未使用图标和标签创建JQuery按钮

我在对话框中创建了两个按钮，看起来并不是我所做的，我无法使用该文本显示图标。我可以在其他地方做到这一点。未使用图标和标签创建JQuery按钮

这工作（这几乎是复制和从文档粘贴：

$("#signout_button").button({label:"Sign Out", icons: { primary: 'ui-icon-key'}});

这不起作用：

   $("#dialog_link").dialog({draggable: true, title: "Are you sure?", show: "slide", modal: true, width:500,height:200, 
       buttons: [{ 

        label:'Yes, I am sure', 
        icons: { primary: 'ui-icon-alert' }, 
        click: function(){ 
        alert('well alrighty then'); 
        }  
       },{ 
        text:'No, please make it stop', 
        icons: { primary: 'ui-icon-alert' }, 
        click: function(){ 
        alert('well alrighty then'); 
        } 
       }] 
       });

的DIV已经存在，而且是非常简单的

<div id="dialog_link"></div>

我觉得这是一种奇怪的语法错误。弹出的对话框就好，点击事件触发，所以JavaScript没有崩溃。

的第一个按钮，这是我熟悉导致按钮没有图标，没有文字的方式。第二个按钮是只有文本的图标。

我也曾尝试：

text:true, 
label: 'test label', 
icons: {primary: 'ui-icon-alert'}, 
click: function(){ alert('testing');}

在该signout按钮呈现既图标和标签。这是对话框创建中的JQuery错误还是我错过了一些非常愚蠢和简单的事情？

来源

2012-06-13 user1441141

我创建了该问题的jsfiddle：http://jsfiddle.net/4LCuQ/ – Marc

它似乎没有内置对话框来创建带有图标的按钮。

您与空按钮问题很简单：不要写“标签”使用“文本”，而不是（因为你在你的第二个按钮一样）。

要使用图标反正看到这个解决方案jQuery UI Dialog Button Icons。我认为最后的答案是最好的。

我把所有的一起在这个小提琴和它的工作原理：http://jsfiddle.net/GzeMT/

来源

2012-06-13 03:13:35 Marc

Poifect :)我不知道这是否是我或JQuery的只是无法做到。公开的事件解决方法虽然会很好。谢谢 – user1441141

打算彻底的jQuery UI的代码Dialog和Buttons好以后事实证明，两者使用不同的方法来创建按钮。 Dialog小部件会调用Button函数（小部件），但前提是它存在。所以作为后备，它会自己创建按钮，并使用text属性作为按钮的标签（不是小部件使用的label）通过选项传递。

从其他性能它显示的兴趣只在click处理程序，如果它被定义。

props = $.isFunction(props) ? { click: props, text: name } : props;

任何其他属性被设置为data属性：

$.each(props, function(key, value) { 
    if (key === "click") { 
     return; 
    } 
    if (key in attrFn) { 
     button[ key ](value); 
    } else { 
     button.attr(key, value);//ANY PROPERTY LIKE ICONS SET AS DATA ATTR. 
    } 
});

此它检查后，如果button插件存在并且如果它是使给它的呼叫。

if ($.fn.button) { 
    button.button(); 
}

我试过了一个简单的解决方法。如果button小部件存在，那么我们传递我们在对话框选项中为按钮设置的所有属性。和我所有的惊喜呢按预期工作:)

if ($.fn.button) { 
button.button(props);//PASS OPTIONS FROM DIALOG BUTTON OBJECT HERE 
}

来源

2012-06-13 03:49:19 TheVillageIdiot

我不得不承认我并不完全了解这个解决方法。尽管如此，感谢您的深入分析。其他人建议使用open事件在事实之后添加图标。 – user1441141

如果你没有使用缩小的jQuery UI的源代码，那么你可以用'button.button（props）'代替'button.button（）'代码，它会显示你想要的按钮：D – TheVillageIdiot

未使用图标和标签创建JQuery按钮

回答

相关问题