マークアップとスクリプティング

ほとんどの場合、onClick イベントなどのイベントの間に wijdialog の表示が必要になります。たとえば、上記のマークアップには、wijdialog ウィジェットを表示または非表示にするボタンを作成するマークアップが含まれています。

wijdialog ウィジェットの HTML マークアップは次のようになります。

マークアップ	コードのコピー
<div> <input type="button" value="Hide Dialog" onclick="$('#dialog').wijdialog('close')"/> <input type="button" value="Show Dialog" onclick="$('#dialog').wijdialog('open')"/> <div id="dialog" title="Basic dialog"></div> </div>

マークアップ

コードのコピー

<div>                
    <input type="button" value="Hide Dialog" onclick="$('#dialog').wijdialog('close')"/>                
    <input type="button" value="Show Dialog" onclick="$('#dialog').wijdialog('open')"/>                
    <div id="dialog" title="Basic dialog"></div>            
</div>

次の jQuery スクリプトでウィジェットを初期化できます。

スクリプト	コードのコピー
<script type="text/javascript"> requirejs.config({ baseUrl: "http://cdn.wijmo.com/amd-js/3.20173.128", paths: { "jquery": "jquery-1.11.1.min", "jquery-ui": "jquery-ui-1.11.0.custom.min", "jquery.ui": "jquery-ui", "jquery.mousewheel": "jquery.mousewheel.min", "globalize": "globalize.min" } }); </script> <script id="scriptInit" type="text/javascript"> require(["wijmo.wijdialog"], function () { $(document).ready(function () { $('#dialog').wijdialog({ autoOpen: false, captionButtons: { refresh: { visible: false} } }); }); }); </script>

スクリプト

コードのコピー

<script type="text/javascript">
    requirejs.config({
        baseUrl: "http://cdn.wijmo.com/amd-js/3.20173.128",
            paths: {
                "jquery": "jquery-1.11.1.min",
                "jquery-ui": "jquery-ui-1.11.0.custom.min",
                "jquery.ui": "jquery-ui",
                "jquery.mousewheel": "jquery.mousewheel.min",
                "globalize": "globalize.min"
            }
    });
</script>

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijdialog"], function () {
        $(document).ready(function () {
            $('#dialog').wijdialog({
                autoOpen: false,
                captionButtons: {
                    refresh: { visible: false}
                }
            });
        });
    });
</script>

ここで説明しているマークアップとスクリプトの結果は次のようになります。ボタンをクリックすると、ダイアログが表示または非表示になります。

関連トピック

参照