4

如何实现自定义图像而不是 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.
4

3 回答 3

4

试试这个？演示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" );
    });
});
于 2013-07-10T05:59:12.333 回答
0

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

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

然后像普通CSS一样使用您的自定义按钮

于 2013-07-10T04:34:52.560 回答
0

.button-class { 背景; 网址（'你的图片.png'）；

}

于 2013-07-10T04:41:50.987 回答