jQuery UI without HTML

Question

Is there a project (open source) that takes the widgets and plugins for jQuery UI but allows us to use them without setting up any HTML?

Kinda like Ext-js and Sproutcore, but without the acidental complexity and lack of fluidity, and more like Cappuccino, but without requiring a Mac and the horrible load times from Objective-j (which also has no IDE support). Also, more like Ukijs, but with more widgets. And kinda like Pyjamas and GWT, but without the lack of widgets, pre-compiling step, and/or Java. For example:

uki({
  view: "Button", text: "Hello world!",
  rect: "120 80 180 24",
  click: function() { alert(this.text());
}).attachTo( document.getElementById("test") );

The reason I'm taking jQuery is because it is the only web framework that supports all 30 essential controls (given with enough plugins).

This might be a very good idea for a jQuery Plugin, if you ask me. But keep in mind, if the users disable javascript - no content on the page with this kind of code. — Yves M., Aug 09 '10 at 16:44
Yes. Just like it won't work for cappuccino, sproutcore, ukijs or extjs either. These are frameworks for web applications, not web pages. — Daniel Ribeiro, Aug 09 '10 at 17:44
Making javascript write the HTML will slow down your page immensely! If you just aren't confident using HTML you should learn it. However, if you need it just for dynamic reasons... — Mechlar, Aug 11 '10 at 18:47
I have been using a system like this, and me, and John Resig, the author of jquery, have vast evidence of the contrary. Check out: http://ejohn.org/blog/dom-documentfragments/. Test, don't guess. — Daniel Ribeiro, Aug 11 '10 at 21:38

score 2 · Answer 1 · answered Aug 06 '10 at 13:36

Let's see if I understand the question. Instead of

<script>
  $(function(){
    $('a').button();
  });
</script>
<body>
  <button id="foo">Foo</button>
  <button id="bar">Bar</button>
</body>

You want

<script>
  $(function(){
    $('body').append($('<button>').attr('{ id: "foo" }').html('Foo').button());
    $('body').append($('<button id="bar">Bar</button>').button());
  });
</script>
<body>
</body>

Does that meet your needs? At the end of the day you'll still need to specify the details of the button (where it goes, its text, what happens when you click it) no matter what the syntax is.

Actually, I am thinking more in the dsl style of uki.js I've edited the post to make it clearer — Daniel Ribeiro, Aug 06 '10 at 21:39

score 1 · Answer 2 · answered Aug 09 '10 at 01:58

1

DHTMLX is similar to ExtJS, which unfortunately includes sharing some of its disadvantages.

answered Aug 09 '10 at 01:58

Onestone

879
9
7

Interesting. I did now know DHTMLX. But for a toolkit with paid features, it has almost as many widgets as uki (which is not a lot). There is also TIBCO, which i did not mention as it has more accidental complexity than Sproutcore (which is one of the few js frameworks that is more complex than GWT). – Daniel Ribeiro Aug 09 '10 at 04:43

score 1 · Accepted Answer · answered Aug 10 '10 at 07:40

1

I don't think a suitable DSL exists at the moment, the closest thing I can think of is CoffeeScript

http://jashkenas.github.com/coffee-script/

It would also be a good starting point to build from.

answered Aug 10 '10 at 07:40

ocodo

29,401
18
105
117

2

Coffescript is a whole new language the "source" compiles to javascript. It is not even remotely related to UI or Jquery. And building on Coffescript would be delightful, but Javascript people have seen this show already: Java with GWT, Objective-J with Cappuccino, and all web frameworks on server with all other languages. I'd not mind using one written in coffescript, but writting one in it would make the entry barrier for other developers higher (and we need to break down walls amongst us, not create them). – Daniel Ribeiro Aug 10 '10 at 11:12
Contrary to this... >> but writting one in it would make the entry barrier for other developers higher (and we need to break down walls amongst us, not create them). << The point of CoffeeScript is to ease barrier to entry, improve code clarity, and provide a syntactic model which is cleaner than the mush that is JS/ECMA. But regardless, it's an option that is merely blue sky for your original question. I just thought I'd give you a thinking point. – ocodo Aug 10 '10 at 11:54
The biggest issue with coffescript at the moment is its ide support. Javascript has one of the best refactoring and type inference tool among dynamic languages. This is due mostly to lack of method_missing, doesnNotUnderstand, missing_method, equivalent, which makes this things much easier to do. Coffescript has syntax highlighting only (it is too early, for a still developing language). And coffescript, although not as foreign to most JS programmers as java or objective-j, would impose a learning barrier. I root for it, but its to early to jump on its bandwagon, at least for frameworks. – Daniel Ribeiro Aug 10 '10 at 13:11
Ok. We are seriously considering coffescript. It is just so much nicer. And we will support javascript libraries as well, so it is a win-win. – Daniel Ribeiro Sep 19 '10 at 23:58
While this was relevant and a good choice in 2010. Coffeescript should be considered legacy now. Your best options of JS in 2018 are either pure ECMAScript 6 (ES6) or TypeScript. I can't say bad things about ClojureScript, but it'd probably be very painful for your common or garden variety JS Developer. (just for you gentle reader.) – ocodo Apr 23 '18 at 12:28

score 1 · Answer 4 · answered Oct 27 '11 at 19:15

1

You should take a look at Google Closure:

http://code.google.com/closure/

In my opinion, it matches exactly what you are asking for.

answered Oct 27 '11 at 19:15

Daniel Fernandez

111
1
3

s4y · Answer 5 · 2010-07-24T19:57:53.730

0

What's stopping you from using JavaScript and jQuery UI like this right now?

To the best of my knowledge, loading a web page in a current-generation web browser requires an (X)HTML document, but nothing's preventing you from making that document a stub and building your application entirely in JavaScript.

edited Jul 24 '10 at 19:57

answered Jul 24 '10 at 19:52

s4y

50,525
12
70
98

You are right that this is not impossible. The question is: has someone else wrapped all the said jquery plugins/jquery ui components in such way? Look for the source ukijs' wave example (http://ukijs.org/examples/core-examples/wave/) to understand better what I mean. – Daniel Ribeiro Jul 25 '10 at 06:48

score 0 · Answer 6 · answered Aug 12 '10 at 05:54

As "Mr. Shiny and New" pointed out the following code would work:

$('body').append($('<button>').attr('{ id: "foo" }').html('Foo').button());

However the style you are looking for can be accieved by using the appendTo() function:

$('<button id="foo"></button>')
    .button({
        label: "Hello world!",
    }).click(function () {
        //doSomething

    }).appendTo('#test');

Furthermore the code above returns the "button" object which allows you to assign the object to a variable for future reuse:

// set up the button
var a = $('<button/>').button({
    label: 'Hello world!'
}).offset({
    top: 80,
    left: 120
}).width(180).height(24)
.click(function () {
    // dosomething
}).appendTo('body');

// hide then show and rename (if it takes your fancy)
a.hide(300, function () {
    a.show(300, function () {
        a.button( "option" , {
            label: 'Hello to the world again!'
        });
    });
});

The question reads: "takes the widgets and plugins for jQuery UI". Therefore, I am not asking if it is possible. I know it is possible. I have done it over and over again. I am interested if someone else already released a library that does *ALL* of this for all jquery ui widgets and the most important plugins. If it doesn't exists, as soon as my solution matures, I'll open source it. But i thought it was unnecessary for the community to have 2 of such projects. — Daniel Ribeiro, Aug 13 '10 at 17:14

jQuery UI without HTML

6 Answers6

Linked