今回は、Onsen UIに自作のテンキーボードを表示する方法を紹介します。
FX収支管理の入力画面と同じ方法です。
Monacaデバッガーの結果です。
iOS版
Android版
次回は、各キーの制御について紹介する予定です。
HTML
|
1 2 3 4 5 6 7 8 9 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 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
<div class="div-tenkey"> <div class="div-tenkey_board"> <ons-row vertical-align="center"> <ons-col width="3%"></ons-col> <ons-col width="22%"> <ons-button modifier="large" class="button-tenkey_number">1</ons-button> </ons-col> <ons-col width="2%"></ons-col> <ons-col width="22%"> <ons-button modifier="large" class="button-tenkey_number">2</ons-button> </ons-col> <ons-col width="2%"></ons-col> <ons-col width="22%"> <ons-button modifier="large" class="button-tenkey_number">3</ons-button> </ons-col> <ons-col width="2%"></ons-col> <ons-col width="22%"> <ons-button modifier="large" class="button-tenkey_number">BS</ons-button> </ons-col> <ons-col width="3%"></ons-col> </ons-row> <ons-row vertical-align="center"> <ons-col width="3%"></ons-col> <ons-col width="22%"> <ons-button modifier="large" class="button-tenkey_number">4</ons-button> </ons-col> <ons-col width="2%"></ons-col> <ons-col width="22%"> <ons-button modifier="large" class="button-tenkey_number">5</ons-button> </ons-col> <ons-col width="2%"></ons-col> <ons-col width="22%"> <ons-button modifier="large" class="button-tenkey_number">6</ons-button> </ons-col> <ons-col width="2%"></ons-col> <ons-col width="22%"> <ons-button modifier="large" class="button-tenkey_number">CL</ons-button> </ons-col> <ons-col width="3%"></ons-col> </ons-row> <ons-row vertical-align="center"> <ons-col width="3%"></ons-col> <ons-col width="22%"> <ons-button modifier="large" class="button-tenkey_number">7</ons-button> </ons-col> <ons-col width="2%"></ons-col> <ons-col width="22%"> <ons-button modifier="large" class="button-tenkey_number">8</ons-button> </ons-col> <ons-col width="2%"></ons-col> <ons-col width="22%"> <ons-button modifier="large" class="button-tenkey_number">9</ons-button> </ons-col> <ons-col width="2%"></ons-col> <ons-col width="22%"> <ons-button modifier="large" class="button-tenkey_number">+/-</ons-button> </ons-col> <ons-col width="3%"></ons-col> </ons-row> <ons-row vertical-align="center"> <ons-col width="3%"></ons-col> <ons-col width="46%"> <ons-button modifier="large" class="button-tenkey_number">0</ons-button> </ons-col> <ons-col width="2%"></ons-col> <ons-col width="22%"> <ons-button modifier="large" class="button-tenkey_number">.</ons-button> </ons-col> <ons-col width="2%"></ons-col> <ons-col width="22%"> <ons-button modifier="large" class="button-tenkey_number"><i class="ion-ios-return-left"></i></ons-button> </ons-col> <ons-col width="3%"></ons-col> </ons-row> </div> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.div-tenkey { position: absolute; bottom: 0; width: 100%; background-color: #ccc; } .div-tenkey_board { margin: 8px auto; width: 90%; } .div-tenkey_board ons-row { margin: 6px 0; } .button-tenkey_number { font-size: 24px; } |
 |
テンキーボード メカニカル式テンキーパッド 赤軸 21キー USB接続 ブラック Windows Mac 対応 新品価格 |
