jqueryui alternative

Question

I'm looking for a javascript user interface library (or framework). I will use it with jquery.

Of course jquery-ui was my first stop, but it doesn't give me even the simplest features i want. it can be very good for rich widgets like calendars, modals, sorting, dragging, but it lacks the core functions i need.

for example, i want to be able to add a button like this:

$('#test_div').button({
    'name': 'test_button',
    'css': 'border: 1px solid #000000',
    'onclick': 'button_click();',
    'onmouseover': 'button_over()'
});

obviously this is just an example and it's not following jquery or jquery-ui conventions, but hopefully you understand what i mean. the problem is not only buttons or simple elements. another example is jquery windows. while possible, it's a headache to try to implement jqueryui windows inline, and obviously jqueryui is not meant for that.

so the questions are:

• is there an interface library like this, which i can use with jquery?
• does jquery-ui has this kind of functionality that i don't know of?

Answer 1

That functionality is already included in jQuery core. It's just in a different format than your hoping for.

$('#test_div').replaceWith(
    $("<button>")
        .attr("id",    "test_div")
        .attr("name",  "test_Button")
        .attr("style", "border: 1px solid #000000")
        .click(button_click)
        .mouseover(button_over)
);

If you want to simplify this, it seems like it would be trivial for you to write a plugin to convert your proposed format into the above.

Answer 2

If you use jQuery 1.4 you could do it like this:

$("<button/>", {  
  "name": "test_button",
  "css": {
     border: "1px solid #000000"
  },  
  click: button_click,
  mouseover: button_over
}).appendTo("#test_div");

Answer 3

Have you taken a look at Ninja ui? It's built on the core of jQuery UI without the widgets.

http://ninjaui.com