jQuery UI without HTML_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-08 11:21 出处：网络

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).

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.

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.

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

You should take a look at Google Closure:

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

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

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.

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!'
        });
    });
});