0
A
回答
0
只是分享我爲完成它所做的工作。
HTML:
<div class="ui-grid-b numBtnKbd">
<div class="ui-block-a numBtnKbdCell borderTopGrey borderLeftGrey">
<div class="numBtnKbdBtn">
1
</div>
</div>
<div class="ui-block-b numBtnKbdCell borderTopGrey borderLeftGrey">
<div class="numBtnKbdBtn">
2
</div>
</div>
<div class="ui-block-c numBtnKbdCell borderTopGrey borderLeftGrey borderRightGrey">
<div class="numBtnKbdBtn">
3
</div>
</div>
<div class="ui-block-a numBtnKbdCell borderTopGrey borderLeftGrey">
<div class="numBtnKbdBtn">
4
</div>
</div>
<div class="ui-block-b numBtnKbdCell borderTopGrey borderLeftGrey">
<div class="numBtnKbdBtn">
5
</div>
</div>
<div class="ui-block-c numBtnKbdCell borderTopGrey borderLeftGrey borderRightGrey">
<div class="numBtnKbdBtn">
6
</div>
</div>
<div class="ui-block-a numBtnKbdCell borderTopGrey borderLeftGrey">
<div class="numBtnKbdBtn">
7
</div>
</div>
<div class="ui-block-b numBtnKbdCell borderTopGrey borderLeftGrey">
<div class="numBtnKbdBtn">
8
</div>
</div>
<div class="ui-block-c numBtnKbdCell borderTopGrey borderLeftGrey borderRightGrey">
<div class="numBtnKbdBtn">
9
</div>
</div>
<div class="ui-block-a numBtnKbdCellBottom borderTopGrey borderLeftGrey borderBottomGrey">
<div class="numBtnKbdBtn">
DEL
</div>
</div>
<div class="ui-block-b numBtnKbdCell borderTopGrey borderLeftGrey borderBottomGrey">
<div class="numBtnKbdBtn">
0
</div>
</div>
<div class="ui-block-c numBtnKbdCellBottom borderTopGrey borderLeftGrey borderBottomGrey borderRightGrey">
<div class="numBtnKbdBtn" style="font-size: 200%; line-height: 50px;">
←
</div>
</div>
</div>
CSS:
.borderTopGrey{
border-top: 1px solid #4d4d4d;
}
.borderLeftGrey{
border-left: 1px solid #4d4d4d;
}
.borderBottomGrey{
border-bottom: 1px solid #4d4d4d;
}
.borderRightGrey{
border-right: 1px solid #4d4d4d;
}
.numBtnKbd {
width: 100%;
height: 245px;
}
.numBtnKbdCell {
background: #e6e6e6;
width: 33.33%;
height: 60px;
cursor: pointer;
color: #4d4d4d;
}
.numBtnKbdCell:active{
background: #ffcc33;
}
.numBtnKbdCellBottom {
background: #29abe2;
width: 33.33%;
height: 60px;
cursor: pointer;
color: #ffffff;
}
.numBtnKbdCellBottom:active{
background: #ffcc33;
color: #000000;
}
.numBtnKbdBtn {
height: 100%;
line-height: 60px;
text-align: center;
font-size: 120%;
}
相關問題
- 1. jQuery Mobile有數字小鍵盤嗎?
- 2. 在Windows Mobile中自動顯示鍵盤
- 3. 使用jQuery將鍵盤數字鍵盤設置爲accesskeykey
- 4. jquery聚焦到數字輸入不會觸發手機的數字鍵盤
- 5. Jquery數字鍵盤輸入問題
- 6. 關閉鍵盤數字鍵盤
- 7. 鍵盤與中間的數字鍵盤?
- 8. 如何處理數字鍵從手機鍵盤
- 9. jQuery Mobile的滑動手勢與
- 10. Jquery Mobile - 採取手機的字體
- 11. 如何強制Android Mobile鍵盤輸入數字?
- 12. iPad數字鍵盤
- 13. 如何手動顯示ios鍵盤?
- 14. 如何僅允許手機鍵盤上的數字
- 15. 移動設備強制數字鍵盤
- 16. Angular 2數字鍵盤啓動
- 17. 如何自動調用數字鍵盤?
- 18. Android - 數字(浮動)軟鍵盤
- 19. 鍵盤數字線與鍵盤的數字
- 20. jquery鍵入字母作爲移動鍵盤
- 21. jQuery Mobile Phonegap iOS:當我拔起鍵盤時,標題閃爍
- 22. jQuery Mobile焦點鍵盤上的下一個輸入
- 23. 點擊屏幕關閉jQuery Mobile中的鍵盤
- 24. jQuery Mobile的:隱藏虛擬鍵盤關閉彈出
- 25. 使用jQuery Mobile和Phonegap在Galaxy S2上輸入鍵盤錯誤
- 26. 柔性手機鍵盤
- 27. 用數字鍵盤改變鍵盤的文字板
- 28. 更改Windows Mobile上的鍵盤佈局
- 29. 處理數字鍵盤的藍牙鍵盤的返回鍵
- 30. 數字鍵盤鍵盤不顯示返回鍵中的iPhone
你去那裏,所以如此之大,你可以回答你自己的問題。 :) – Tasos 2014-09-23 15:45:27