CODEWITHSUNDEEP
javascriptjqueryjquery-ui
hmmzor
hmmzor

Reputation: 21

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 windows inline, and obviously jqueryui is not meant for that.

so the questions are:

Upvotes: 2

Views: 4244

Answers (4)

Mike L.
Mike L.

Reputation: 1966

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]

Upvotes: 0

Jamie
Jamie

Reputation: 507

Have you taken a look at Ninja UI?

http://ninjaui.com

Upvotes: 4

nxt
nxt

Reputation: 1983

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

Upvotes: 6

Justin Johnson
Justin Johnson

Reputation: 31300

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.

Upvotes: 2

Related Questions