Javascriptでダイアログで選択する汎用ピッカー ~ mamGeneralPicker.js
■使い方
-
上記ボタンを押してmamgeneralpicker.jsをダウンロードします。
- mamGeneralPickerを使いたいファイルで、
<script src="./js/mamgeneralpicker.js"></script>
のように、相対又は絶対パスでmamgeneralpicker.jsを指定します。
-
クラス名に"mamGeneralPicker"を指定したinputエレメント(type="text")を設定します。
<input type="text" class="mamGeneralPicker" data-list="雑誌,漫画,辞書,辞典" />
- ブラウザで開いてテキストボックスをクリックしたりタップすると汎用ピッカーが開きます。
■使用例
<script src="./js/mamGeneralPicker.js"></script> <input type="text" class="mamGeneralPicker" data-list="Delphi,VisualBasic,Python,Javascript,VBA"/>
<script src="./js/mamGeneralPicker.js"></script> <input type="text" class="mamGeneralPicker" data-list="単行本,パンフレット,雑誌,漫画,カタログ,専門書,辞書,百科事典"/>
<script src="./js/mamGeneralPicker.js"></script> <input type="text" class="mamGeneralPicker" placeholder="時" data-list="00,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23"/> <input type="text" class="mamGeneralPicker" placeholder="分" data-list="00,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59"/>
スマートフォンなどで、オンスクリーンキーボード(ソフトウェアキーボード)を表示したくない場合は、readonly 属性を追加してください。
<input type="text" class="mamGeneralPicker" placeholder="時" data-list="00,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23" readonly="readonly" />