jqueryui alternative

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 win开发者_Python百科dows 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?

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");

Have you taken a look at Ninja UI?

http://ninjaui.com

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.

This is an old post, but mooTools, creates elements like you want to do

var newButton = new Element('input', {
    type: 'button',
    'id': 'test_div',
    name: 'teot_button,
    style: 'border: 1px solid black',
    events: {
        click: function() {
            button_click;
        },
        mouseover: function() {
            button_over
        }
    }
};

newButton.replaces($('test_div'));

This will actually work if your used mootools instead of jquery within you applcation, with you coding style, you may be better off with mooTools is this code seems understandable to you. mooTools trys to treat everything as Javascript objects while jQuery take another approach. If that block of code I provided is understandable to you (it does exactly what you want to do, with your id names in place, then go to mootools.net and ready the docs, check out the samples its a breeze to learn. I personally user both, depending on the circumstance but prefer mootools. Hope this helps.

-Mike [LowLow]