如何使用自定义按钮而不是 jquery ui 按钮？答案

【问题标题】：How to use custom button instead of jquery ui buttons?如何使用自定义按钮而不是 jquery ui 按钮？
【发布时间】：2013-07-10 13:59:12
【问题描述】：

如何实现自定义图像而不是 jquery 对话框按钮？那里有标准按钮，但我使用带有.png扩展的photoshop设计了新按钮。所以我想使用 .png 按钮而不是 jquery 对话框按钮。

我希望通过 css 有选项，但如果你给我一个小例子，这对我很有帮助。

jQuery("#dialog-form").dialog ({ 
 autoOpen: false,
  height: 600,
  width: 700,
  modal: true,
  resizable: false,
  draggable: false, 
  buttons : {
    "Search" : function() { // dialog button need to be customize.

【问题讨论】：

标签： jquery css jquery-dialog

【解决方案1】：

试试这个？演示http://jsfiddle.net/yeyene/GnpQ8/2/

创建自定义关闭按钮。

$(document).ready(function(){
    $("#dialog-model").dialog({
        create: function (event, ui) {
            $('.ui-dialog-titlebar').css({'background':'none','border':'none'});
            $(".ui-dialog-titlebar").html('<a href="#" role="button"><span class="myCloseIcon">close</span></a>');
            $("#dialog-model").css({ 'font-family': 'Helvetica', 'padding': '0', 'font-size': '12px' });
        },
        width: 250,
        height: 150,       
        modal: true,
        resizable: false
    });

    $("span.myCloseIcon").click(function() {
        $( "#dialog-model" ).dialog( "close" );
    });
});

【讨论】：

【解决方案2】：

.button-class { 背景; url('yourimage.png');

}

【讨论】：

我在 jquery 对话框中有 4 个按钮，所以这个按钮类将反映哪个按钮？如何指定每个按钮？

【解决方案3】：

从您的页面中删除以下代码DEMO

   <script src="js/development-bundle/ui/jquery.ui.button.js">
   <script>
    $(function() {
    $( "input[type=submit], a,button" )
    .button()       
                });
   </script>

然后像普通 css 一样使用自定义按钮

【讨论】：

我正在使用类似按钮的 jquery 按钮：{ "search" : function() { }..updated in question section.
你的意思是弹出窗口按钮
把你的css类名放在这里
这样你就可以添加你的图片 .classname {border: none;背景： url('/forms/demo.png') 左上角无重复；填充：2px 8px； }
没有朋友，我在对话框中询问是否有搜索按钮 - 这需要自定义。不要打开对话框链接。