jQuery UIのカスタマイズダイアログ

jQueryのUIダイアログを学習するために、私は以下に定義されたコードを持っています。

私は3つのタスクを実行する必要があります

1)画像を「OK」ボタンと「キャンセル」ボタンとして使用する

2)私のカスタムイメージをダイアログの右上端の閉じるボタンとして使用する

3)ダイアログ全体の背景は「灰色」(タイトル、OKボタンの場所を含む)である必要があります。

重要な点は、スタイルを自分のダイアログにのみ適用することです。他のすべてのウィジェットにはデフォルトの動作が必要です。コンテンツエリアについては、#myDiv.ui-widget-contentを使用して達成することができました。

これについてコードを教えてください。

注:できるだけベストプラクティスを使用してください。 (たとえば、変数$ myDialogを使用する2. autoOpen:falseを使用する)




    <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; 
} 
2

3 答え

私は上記の答えをupvotedしています。まだ dialogClass :「myDialogCSS」が私が探していたキーでした。

HTMLとjQuery



    <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;
     }
4
追加された

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; }
1
追加された
サンプルを提供してもらえますか(これを適用する場所や方法など)?
追加された 著者 Lijo,
それはタブのものであり、ダイアログのものではありません
追加された 著者 Darthg8r,
あなたはこれをjquery-ui.cssファイルで見つけることができます
追加された 著者 Yorgo,
@Lijo、私の答えをチェックしてください。何かがうまくいかない場合は、!important を置く必要があります。
追加された 著者 Amar Palsapure,

このためには、jQuery UI(jquery.ui.theme.css)が提供するデフォルトCSSを上書きする必要があります。

  1. Image for Ok button: You need to change .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default background image.
  2. Close Button: Change .ui-widget-header .ui-icon
  3. Background of Dialogue: Change .ui-widget-content background property.

これはあなたのために働くことを望みます。

1
追加された
ありがとう。重要な点は、スタイルを自分のダイアログにのみ適用することです。他のすべてのウィジェットにはデフォルトの動作が必要です。コンテンツエリアについては、#myDiv.ui-widget-contentを使用して達成することができました。どのように私はポストに記載されている他の要件を達成するのですか?
追加された 著者 Lijo,
jqueryui.com/themeroller にアクセスしてテーマをカスタマイズできます。それをダウンロードして再生してください。私も同じことを学びました。 Firebug(FF)、開発者ツールF12(IE)、F12 Chromeを使用して、アイテムに適用されたCSSを表示できます。このツールのみを使用して、私は上記の要素を見つけました。これがうまくいきたいです。
追加された 著者 Amar Palsapure,
また、あなたが答えに満足すれば、それを受け入れてください。第二に、助けが必要な場合は、コメントを投稿してください。
追加された 著者 Amar Palsapure,
たとえば、私の場合、theme.cssはこのクラス .ui-state-default、.ui-widget-content .ui-state-default、.ui-widget-header .ui-state-default ここにはある値を持つ background という1つのプロパティがあります。この値を削除し、この url( "images/yourimage.png")repeat-x scroll 50%50%#0E6D38 のような独自のイメージを置いてください。テーマフォルダ内の images フォルダに画像をコピーします。 theme.cssの中で私が提供した用語を直接検索し、 background プロパティを変更します。
追加された 著者 Amar Palsapure,
他の人にも同じことをすることができます。 jQueryによって提供されるデフォルトを上書きする独自のカスタムCSSファイルを作成することができます。その場合、このCSSファイルには、#myDiv.ui-widget-content #myDiv.ui-widget-header .ui-icon などがあります。あなたの値は反映されません。例えば、 background-color:red!important のように重要!
追加された 著者 Amar Palsapure,