如何在jquery dialog-extend中添加标题上的图标

时间:2014-07-28 09:07:31

标签: jquery jquery-ui jquery-ui-dialog

我使用jquery.dialogextend.js 2.0.0,jQuery 1.9.1和jQueryUI 1.10.2。

我的jquery对话框js如下:

$(function(){

    ////auto open dialog/////////////       
        //check cookie
        if( document.cookie.indexOf( "Once=true" ) < 0 ) {

        //dialog options
        var dialogOptions = {
            "title" : "title",
            "open" : function () {
                $("#open").prop("disabled",true);
                $(this).load('pop.php');
                $(this).parent().css('opacity', 0.4);
                $(this).parent().hover( function () { 
                    $(this).css('opacity', 0.9); 
                }, function (event) { 
                    $(this).css('opacity', 0.4); 
                });  
            },
            "width" : 370,
            "height" : 250,
            "dialogClass": 'dlgfixed',
            "position" : ['right bottom'], 
            "modal" : false,
            "autoOpen": true,
            "closeOnEscape" : true,
            "draggable" : true,
            "close" : function(){ 
                $(this).remove(); 
                document.cookie = "Once=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
                $("#open").prop("disabled",false);
            }
        };

        var dialogExtendOptions = {
                       "closable" : true,
                       "maximizable" : true,
                       "minimizable" : true,
     };
        // open dialog
        $("<div><div />").dialog(dialogOptions).dialogExtend(dialogExtendOptions);

  }
});

如何在标题上添加自定义图标。

请帮忙

任何建议都将不胜感激

1 个答案:

答案 0 :(得分:1)

我得到了在标题上添加自定义图标的解决方案

代码如下:

$(function(){


  // ADD HTML FOR NEW BUTTON
    var newBtn = '<a class="ui-dialog-titlebar-refresh ui-corner-all ui-state-default" href="#" role="button" style="position: absolute; top: 50%; right: 5.5em; margin-top: -10px; height: 18px;"><span class="ui-icon ui-icon-refresh">refresh</span></a>';


    ////auto open dialog/////////////       
        //check cookie
        if( document.cookie.indexOf( "Once=true" ) < 0 ) {

        //dialog options
        var dialogOptions = {
            "title" : "title",
             "create": function() {    ///// CREATE FUNCTION TO ADD CUSTOM BUTTON
            $(this).prev('.ui-dialog-titlebar').find('.ui-dialog-title').after(newBtn);
            },
            "open" : function () {
                $("#open").prop("disabled",true);
                $(this).load('pop.php');
                $(this).parent().css('opacity', 0.4);
                $(this).parent().hover( function () { 
                    $(this).css('opacity', 0.9); 
                }, function (event) { 
                    $(this).css('opacity', 0.4); 
                });  
            },
            "width" : 370,
            "height" : 250,
            "dialogClass": 'dlgfixed',
            "position" : ['right bottom'], 
            "modal" : false,
            "autoOpen": true,
            "closeOnEscape" : true,
            "draggable" : true,
            "close" : function(){ 
                $(this).remove(); 
                document.cookie = "Once=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
                $("#open").prop("disabled",false);
            }
        };

        var dialogExtendOptions = {
                       "closable" : true,
                       "maximizable" : true,
                       "minimizable" : true,
     };
        // open dialog
        $("<div><div />").dialog(dialogOptions).dialogExtend(dialogExtendOptions);

  }
});