Question

如何实现自定义图像而不是jquery对话框按钮？有标准按钮，但我设计了新的按钮使用photoshop与expion .png。所以我想使用.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.

Answer 1

试试这个吗？ DEMO 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" );
    });
});

Answer 2

从您的信息页DEMO

中删除以下代码

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

然后使用您的自定义按钮，如普通的CSS

Answer 3

.button-class { 背景; URL（ 'yourimage.png'）;

}

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

3 个答案: