Question

我正在创建两个用于对话框的按钮，它看起来不像我做的，我无法使用文本显示图标。我可以在其他地方做到这一点。

这有效（几乎可以从文档中复制和粘贴：

$("#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');}

渲染时的注销按钮同时包含图标和标签。这是对话框创建中的JQuery错误还是我遗漏了一些非常愚蠢和简单的东西？

Answer 1

它似乎没有内置在用图标创建按钮的对话框中。

空按钮的问题很简单：不要写“标签”而是使用“文字”（就像在第二个按钮上一样）。

要使用图标，请参阅此解决方案jQuery UI Dialog Button Icons。我认为最后的答案是最好的。

我把这一切都放在这个小提琴中，它起作用：http://jsfiddle.net/GzeMT/

Answer 2

在彻底完成Dialog和Buttons的jQuery UI代码之后，事实证明两者都使用不同的方式来创建按钮。 Dialog小部件会调用Button函数（小部件），但前提是它存在。因此，作为回退，它会创建按钮本身，并使用通过选项传递的text属性作为按钮的标签（而不是label作为button小部件使用）。

如果已定义，则仅在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 
}

没有用图标和标签创建的JQuery按钮

2 个答案: