Wijmo UI for the Web
マークアップとスクリプティング
| Wijmo ユーザーガイド > ウィジェット > ComboBox > マークアップとスクリプティング |
wijcombobox ウィジェットは、HTML マークアップで <input> 要素または <select> 要素を使用して作成できます。
以下のマークアップと jQuery スクリプトは、HTML input 要素を使用して wijcombobox ウィジェットを作成する方法の一例です。
| マークアップ |
コードのコピー |
|---|---|
<input id="combobox" /> | |
次の 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.wijcombobox"], function () { $(document).ready(function () { $("#combobox").wijcombobox({ data: [{ label: 'c++', value: 'c++' }, { label: 'java', value: 'java' }, { label: 'php', value: 'php' }, { label: 'coldfusion', value: 'coldfusion' }] }); }); }); </script> | |
ここで説明しているマークアップとスクリプトの結果は次のようになります。コンボボックスをドロップダウンすると、オプションが表示されます。
以下のマークアップと jQuery スクリプトは、HTML select 要素を使用して wijcombobox ウィジェットを作成する方法の一例です。
| マークアップ |
コードのコピー |
|---|---|
<select id="combobox"> <option value="c++">c++</option> <option value="java">java</option> <option value="php">php</option> <option value="coldfusion">coldfusion</option> </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.wijcombobox"], function () { $(document).ready(function () { $("#combobox").wijcombobox({}); }); }); </script> | |
ここで説明しているマークアップとスクリプトの結果は次のようになります。コンボボックスをドロップダウンすると、オプションが表示されます。