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

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

マークアップ	コードのコピー
<div id="datepager" style="margin-top:20px"></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", "bootstrap": "bootstrap.min", //Needed if you use Bootstrap. "knockout": "knockout-3.1.0" //Needed if you use Knockout. } }); </script> <script id="scriptInit" type="text/javascript"> require(["globalize.cultures", "wijmo.wijdatepager"], function () { $(document).ready(function () { $("#datepager").wijdatepager({}); }); }); </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",
                "bootstrap": "bootstrap.min", //Needed if you use Bootstrap.
                "knockout": "knockout-3.1.0" //Needed if you use Knockout.
            }
    });
</script>

<script id="scriptInit" type="text/javascript">
    require(["globalize.cultures", "wijmo.wijdatepager"], function () {
    $(document).ready(function () {
        $("#datepager").wijdatepager({});
    });
    });
</script>

ここで説明しているマークアップとスクリプトの結果は次のようになります。DatePager にマウスポインタを合わせると、アニメーション表示されます。

関連トピック