Wijmo UI for the Web
Form Decorator
| Wijmo ユーザーガイド > 概念 > テーマ > Form Decorator |
Wijmo Form Decorator ウィジェットを使用して、Web アプリケーション内のラジオボタンやチェックボックスなどの標準 HTML フォーム要素に簡単にスタイルを設定できます。これらのウィジェットを使用すると、どのブラウザでも統一的にフォーム要素のスタイルを設定できます。
以下の Wijmo Form Decorator ウィジェットを使用して、標準 HTML フォーム要素を装飾します。
カスタム jQuery セレクタを使用して、装飾するフォームの HTML 要素を指定します。
以下に、HTML マークアップおよび jQuery スクリプトを使用して、HTML プロジェクトにすべての Form Decorator ウィジェットを追加する方法を示します。
ドロップダウンしてマークアップをコピーします
| テキストエディタに張り付けます |
コードのコピー |
|---|---|
<!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 タグ内に貼り付けます
| マークアップ |
コードのコピー |
|---|---|
<h3> Input</h3> <input id="textbox" class="wijtextbox" type="text" /> <h3> Textarea</h3> <textarea id="area" class="wijtextbox" rows="5" cols="50"></textarea> <h3> Dropdown</h3> <select id="select1" class="wijdropdown"> <optgroup label="A-G"> <option>Item A</option> <option selected="selected">Item B</option> <option>Item C</option> <option>Item D</option> <option>Item E</option> <option>Item F</option> <option>Item G</option> </optgroup> <optgroup label="H-M"> <option>Item H</option> <option>Item I</option> <option>Item J</option> <option>Item K</option> <option>Item L</option> <option>Item M</option> </optgroup> </select> <h3> Checkbox</h3> <input id="checkbox1" type="checkbox" class="wijcheckbox" /> <label for="checkbox1">Checkbox 1</label> <h3 style="clear: both;"> Radio</h3> <input type="radio" name="radiobutton1" id="radio1" value="1" class="wijradio" checked /> <label for="radio1">Radio 1</label> <input type="radio" name="radiobutton1" id="radio2" value="2" class="wijradio" /> <label for="radio2">Radio 2</label> | |
ドロップダウンからスクリプトをコピーして 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", "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(["wijmo.wijtextbox", "wijmo.wijdropdown", "wijmo.wijradio", "wijmo.wijcheckbox"], function () { $(document).ready(function(){ $(".wijtextbox").wijtextbox(); $(".wijdropdown").wijdropdown(); $(".wijradio").wijradio(); $(".wijcheckbox").wijcheckbox(); }); }); </script> | |
全て展開
すべて折りたたむ