Wijmo UI for the Web
クイックスタート
| Wijmo ユーザーガイド > ウィジェット > DropDown > クイックスタート |
このクイックスタートでは、Web ページの作成、wijdropdown ウィジェットの追加、およびウィジェットの外観と動作のカスタマイズを行うことができます。
ドロップダウンしてマークアップをコピーします
| テキストエディタに張り付けます |
コードのコピー |
|---|---|
<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML> | |
ドロップダウンからリファレンスをコピーして head タグ内に張り付けます。
| リファレンス |
コードのコピー |
|---|---|
<!--Theme--> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.css" rel="stylesheet" type="text/css" /> <!--RequireJs--> <script type="text/javascript" src="http://cdn.wijmo.com/external/require.js"></script> | |
ドロップダウンからマークアップをコピーして body タグ内に張り付けます。
| マークアップ |
コードのコピー |
|---|---|
<p>Select your destination: <select id="select1"> <optgroup label="United States"> <option>New York</option> <option selected="selected">Los Angeles</option> <option>Chicago</option> <option>Houston</option> <option>Philadelphia</option> </optgroup> <optgroup label="Canada"> <option>Toronto</option> <option>Montreal</option> <option>Vancouver</option> <option>Ottawa</option> <option>Calgary</option> </optgroup> </select> </p> | |
<head> タグ内の参照の下に、次のスクリプトを追加して jQuery ウィジェットを初期化します。
ドロップダウンからスクリプトをコピーして head タグ内に張り付けます。
| スクリプト |
コードのコピー |
|---|---|
<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> | |
全て展開
すべて折りたたむ