定製jQuery UI對話框

爲了學習jQuery UI對話框，我定義了下面的代碼。定製jQuery UI對話框

我需要做以下三個任務

1）用我的形象爲「OK」按鈕和「取消」按鈕

2）使用我的自定義圖像作爲對話框的右側上端的關閉按鈕

3）整個對話的背景應該是「灰色」（包括標題，和地點確定按鈕。）

重要的一點是風格應該只適用於我的對話框。所有其他小部件應該具有默認行爲。對於內容區域，我可以使用＃myDiv.ui-widget-content來實現。

你能爲此建議代碼嗎？

注意：如果可能，請使用最佳做法。（例如1，使用一個變量$ myDialog 2.使用的AutoOpen：假）

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head id="Head1" runat="server"> 
    <title> </title> 

    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"></script> 

    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.6/jquery-ui.js"></script> 


<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/themes/redmond/jquery-ui.css" rel="stylesheet" 
     type="text/css" /> 


    <link href="Styles/OverrideMyDialog.css" rel="stylesheet" 
     type="text/css" />- 



<script type="text/javascript"> 

    $(document).ready(function() { 
     var $myDialog = $(".addNewDiv").dialog(
            { 
             autoOpen: false, 
             title: 'My Title', 
             buttons: { "OK": function() { 
              $(this).dialog("close"); 
              ShowAlert(); 
              return true; 
             }, 
              "Cancel": function() { 
               $(this).dialog("close"); 
               return false; 
              } 
             } 

            } 
              ); 





     $('#myOpener').click(function() { 
      return $myDialog.dialog('open'); 


     }); 
    }); 

    function ShowAlert() { 
     alert('OK Pressed'); 
    } 

</script>

<body> 
    <div> 
    <input id="myOpener" type="button" value="button" /> 
</div> 
<div class="addNewDiv" id="myDiv" title="Add new Person" > 
    <table> 
     <tr> 
      <td> 
       Name 
      </td> 

     </tr> 
     <tr> 
      <td> 
       Age 
      </td> 

     </tr> 
    </table> 
</div> 
</body> 
</html>

而且，我做了一個CSS類重寫的窗口功能只爲我的對話框

/* 
    *File Name: OverrideMyDialog.css 
    * jQuery UI CSS is overriden here for one div 
    */ 


/* Component containers 
----------------------------------*/ 

#myDiv.ui-widget-content 
{ 
border: 5px solid Red; 
background: Gray url(images/ui-bg_inset-hard_100_fcfdfd_1x100.png) 50% bottom repeat-x; 
color: Green; 
}

來源

2012-02-06 Lijo

我已經upvoted上面的答案。仍然dialogClass：'myDialogCSS'是我正在尋找的關鍵。

HTML和jQuery

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery- 
    1.4.4.js"></script> 
    <script type="text/javascript" 
     src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.6/jquery-ui.js"></script> 
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/themes/Sunny/jqueryui. 
    css" 
     rel="stylesheet" type="text/css" /> 
    <link href="Styles/MyStyleSheet.css" 
     rel="stylesheet" type="text/css" /> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
      var $myDialog = $(".addNewDiv").dialog(
      { 
       modal: true, 
       autoOpen: false, 
       dialogClass: 'myDialogCSS', 
       title: 'My Title', 
       closeOnEscape: false, 
       open: function(event, ui) 
       { 
        //Disable OK Button 
        $(".ui-dialog-buttonpane 
         button:contains('OK')").attr("disabled", true).addClass("ui-state-disabled"); 
       }, 
       buttons: { "OK": function() 
       { 
        $(this).dialog("close"); 
        ShowAlert(); 
        return true; 
       }, 
        "Cancel": function() 
        { 
         $(this).dialog("close"); 
         return false; 
        } 
       } 
      } 
      ); 
      $('#myOpener').click(function() 
      { 
       return $myDialog.dialog('open'); 
      }); 
     }); 
     function ShowAlert() { 
      alert('OK Pressed'); 
     } 
    </script> 
</head> 

<body> 
    <div> 
     <input id="myOpener" type="button" value="button" /> 
    </div> 
    <div class="addNewDiv" id="myDiv" title="Add new Person"> 
     <table> 
      <tr> 
       <td>Name 

       </td> 
      </tr> 
      <tr> 
       <td>Age 
       </td> 
      </tr> 
     </table> 
    </div> 
</body> 
</html>

MyStyleSheet.css

/*Title Bar*/ 
    .myDialogCSS .ui-dialog-titlebar 
    { 
     /*Hide Title Bar*/ 
     /*display:none; */ 
    } 

    /*Content*/ 
    .myDialogCSS .ui-dialog-content 
    { 
     font-size:30px; 
    }

來源

2012-02-23 12:37:59 Lijo

你應該自定義css文件。類是：

.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; } 
.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; } 
.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; } 
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; } 
.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; } 
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; } 
.ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; } 
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; } 
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; } 
.ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; } 
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; } 
.ui-draggable .ui-dialog-titlebar { cursor: move; }

來源

2012-02-06 13:29:56 Yorgo

能否請您提供一個樣本（如在哪裏應用此以及如何）？ – Lijo 2012-02-06 13:31:16

這是爲製表符，而不是對話框 – Darthg8r 2012-02-06 13:32:22

你可以在jquery-ui.css文件 – Yorgo 2012-02-06 13:33:43

爲此，您必須通過jQuery用戶界面（jquery.ui.theme.css）提供超馳默認CSS。

Ok按鈕的圖片：您需要更改.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default背景圖片。
關閉鍵：更改.ui-widget-header .ui-icon
背景對話框：更改.ui-widget-content背景屬性。

希望這對你有用。

來源

2012-02-06 13:33:58

轉到http://jqueryui.com/themeroller/，在這裏您可以自定義您的主題。下載並使用它。我也做了同樣的事情來學習。您可以使用Firebug（FF），開發工具F12（IE），F12 Chrome查看應用於項目的css。只有使用這個工具，我已經找到了上述元素。希望這可以工作。 – 2012-02-06 13:38:58

另外，如果您滿意答案，請接受它。其次，如果您需要任何幫助，請發表評論。 – 2012-02-06 13:42:23

例如在我的情況下，theme.css有這個類'.ui-state-default，.ui-widget-content .ui-state-default，.ui-widget-header .ui-state-default'，這裏有一個有一定價值的財產「背景」。你刪除這個值，並把你自己的圖像像這個'url（「images/yourimage.png」）repeat-x滾動50％50％＃0E6D38'。將圖像複製到主題文件夾內的'images'文件夾。在theme.css中直接搜索我提供的術語，並更改'background'屬性。 – 2012-02-06 13:50:56

定製jQuery UI對話框

回答

相關問題