0

我正在创建两个按钮以在对话框中使用，但它似乎不是我所做的，我无法让图标与文本一起显示。我可以在其他地方做到这一点。

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

$("#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 错误还是我错过了一些非常愚蠢和简单的东西？

4

2 回答 2

1

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

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

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

我把所有这些放在这个小提琴中，它可以工作：http: //jsfiddle.net/GzeMT/

于 2012-06-13T03:13:35.223 回答
0

在浏览完 jQuery UI 代码之后，Dialog结果Buttons发现两者都使用不同的方式来创建按钮。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 
}
于 2012-06-13T03:49:19.167 回答