Wijmo UI for the Web
クイックスタート
| Wijmo ユーザーガイド > ウィジェット > Input ウィジェット > InputMask > クイックスタート |
このクイックスタートでは、Web ページに２つの wijinputmask ウィジェットを追加し、ウィジェットの外観と動作をカスタマイズする方法を学びます。１つ目のウィジェットでは、placeholder オプションを使用して初期テキストを作成し、pickersオプションのlist属性を使用してドロップダウンリストを作成します。２つ目のウィジェットでは、maskFormat オプションと passwordChar オプションを使用して、社会保障番号テキストボックスを作成します。
ドロップダウンしてマークアップをコピーします
| テキストエディタに張り付けます |
コードのコピー |
|---|---|
<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML> | |
ドロップダウンから参照コードをコピーして head タグ内に貼り付けます
| 参照 |
コードのコピー |
|---|---|
<!--jQuery References--> <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js" type="text/javascript"></script> <!--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" /> <!--Wijmo Widgets JavaScript--> <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20173.128.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/interop/wijmo.data.ajax.3.20173.128.js" type="text/javascript"></script> | |
ドロップダウンからマークアップをコピーして body タグ内に貼り付けます
| マークアップ |
コードのコピー |
|---|---|
<input type="text" id="textbox1" /> <br> <h3>Enter your SSN:</h3> <input type="text" id="textbox2" /> | |
ドロップダウンからスクリプトをコピーして head タグ内に貼り付けます
| スクリプト |
コードのコピー |
|---|---|
<script type="text/javascript"> $(document).ready(function () { $("#textbox1").wijinputnumber( { showTrigger: true, pickers: { list: ['100', '200', '300'] }, placeHolder: 'Click the arrow' }); $("#textbox2").wijinputmask( { maskFormat: "000-00-0000", passwordChar: '*' }); }); </script> | |
全て展開
すべて折りたたむ