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%;
}

jQuery Mobile手动数字键盘

1 个答案: