Question

我正在寻找一个javascript用户界面库（或框架）。我将使用它与jquery。

当然jquery-ui是我的第一站，但它并没有给我我想要的最简单的功能。它对于日历，模态，排序，拖动等丰富的小部件非常有用，但它缺乏我需要的核心功能。

例如，我希望能够添加如下按钮：

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

显然这只是一个例子而且它不遵循jquery或jquery-ui约定，但希望你明白我的意思。问题不仅仅是按钮或简单的元素。另一个例子是jquery windows。尽管可能，尝试实现内联的jqueryui窗口是一件令人头疼的问题，显然jqueryui不适用于此。

所以问题是：

是否有这样的接口库，我可以使用jquery？
jquery-ui有这种我不知道的功能吗？

Answer 1

如果您使用jQuery 1.4，您可以这样做：

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

Answer 2

你看过Ninja UI吗？

http://ninjaui.com

Answer 3

该功能已包含在jQuery核心中。它的格式与您希望的格式不同。

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

如果你想简化这一点，你似乎可以轻而易举地编写一个插件来将你提出的格式转换成上面的格式。

Answer 4

这是一篇旧帖子，但mooTools会创建您想要的元素

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

如果您在应用程序中使用了mootools而不是jquery，那么这实际上是有效的，使用编码风格，使用mooTools可能会更好，这段代码对您来说是可以理解的。 mooTools尝试将所有内容视为Javascript对象，而jQuery采用另一种方法。如果我提供的代码块对您来说是可以理解的（它完全符合您的要求，并且您的ID名称已就位，那么请访问mootools.net并准备文档，查看示例，轻而易举学习。我个人用户，视情况而定，但更喜欢mootools。希望这有帮助。

-Mike [LowLow]

jqueryui替代方案

4 个答案: