jQuery Мобильная ручная цифровая клавиатура

Question

Нужно ли делать цифровую клавиатуру вручную с помощью jQuery Mobile для чего-то вроде калькулятора?

Есть ли какой-нибудь пример для сохранения работы?

Answer 1

Просто поделитесь работой, которую я имел, чтобы выполнить ее.

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;"> 
     &#8592; 
    </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%; 
}