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

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

マークアップ	コードのコピー
<select id="select1"> <optgroup label="A-G"> <option>A</option> <option selected="selected">B</option> <option>C</option> <option>D</option> <option>E</option> <option>F</option> <option>G</option> </optgroup> <optgroup label="H-M"> <option>H</option> <option>I</option> <option>J</option> <option>K</option> <option>L</option> <option>M</option> </optgroup> </select>

マークアップ

コードのコピー

<select id="select1">
 <optgroup label="A-G">
   <option>A</option>
   <option selected="selected">B</option>
   <option>C</option>
   <option>D</option>
   <option>E</option>
   <option>F</option>
   <option>G</option>
  </optgroup>
 <optgroup label="H-M">
    <option>H</option>
    <option>I</option>
    <option>J</option>
    <option>K</option>
    <option>L</option>
    <option>M</option>
  </optgroup>
 </select>

次の 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.wijdropdown"], function () { $(document).ready(function () { $("#select1").wijdropdown(); }); }); </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.wijdropdown"], function () {
        $(document).ready(function () {
            $("#select1").wijdropdown();
        });
    });
</script>

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

関連トピック

参照