数字输入框

source code mui提供了数字输入框控件,可直接输入数字,也可以点击“+”、“-”按钮变换当前数值;默认numbox控件dom结构比较简单,如下:

<div class="mui-numbox">
  <!-- "-"按钮,点击可减小当前数值 -->
  <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
  <input class="mui-numbox-input" type="number" />
  <!-- "+"按钮,点击可增大当前数值 -->
  <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
</div>

numbox自定义参数

data-numbox-min

输入框允许使用的最小值,默认无限制

data-numbox-max

输入框允许使用的最大值,默认无限制

data-numbox-step

每次点击“+”、“-”按钮变化的步长,默认步长为1

mui提供了数字输入框控件,可直接输入数字,也可以点击“+”、“-”按钮变换当前数值; 默认numbox控件dom结构比较简单,如下

示例:设置取值范围为0~100,每次变化步长为10,则代码如下

<div class="mui-numbox" data-numbox-step='10' data-numbox-min='0' data-numbox-max='100'>
  <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
  <input class="mui-numbox-input" type="number" />
  <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
</div>

mui-numbox

数字输入框,可重写样式改变大小等

Mui.css (v3.0.0)部分源码:

<!--4741-->
.mui-numbox
{
  position: relative;

  display: inline-block;
  overflow: hidden;

  width: 120px;
  height: 35px;
  padding: 0 40px 0 40px;

  vertical-align: top;
  vertical-align: middle;

  border: solid 1px #bbb;
  border-radius: 3px;
  background-color: #efeff4;
}
.mui-numbox [class*=numbox-btn], .mui-numbox [class*=btn-numbox]
{
  font-size: 18px;
  font-weight: normal;
  line-height: 100%;

  position: absolute;
  top: 0;

  overflow: hidden;

  width: 40px;
  height: 100%;
  padding: 0;

  color: #555;
  border: none;
  border-radius: 0;
  background-color: #f9f9f9;
}
.mui-numbox [class*=numbox-btn]:active, .mui-numbox [class*=btn-numbox]:active
{
  background-color: #ccc;
}
.mui-numbox [class*=numbox-btn][disabled], .mui-numbox [class*=btn-numbox][disabled]
{
  color: #c0c0c0;
}
.mui-numbox .mui-numbox-btn-plus, .mui-numbox .mui-btn-numbox-plus
{
  right: 0;

  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.mui-numbox .mui-numbox-btn-minus, .mui-numbox .mui-btn-numbox-minus
{
  left: 0;

  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.mui-numbox .mui-numbox-input, .mui-numbox .mui-input-numbox
{
  display: inline-block;
  overflow: hidden;

  width: 100% !important;
  height: 100%;
  margin: 0;
  padding: 0 3px !important;

  text-align: center;
  text-overflow: ellipsis;
  word-break: normal;

  border: none !important;
  border-right: solid 1px #ccc !important;
  border-left: solid 1px #ccc !important;
  border-radius: 0 !important;
}

.mui-input-row .mui-numbox
{
  float: right;

  margin: 2px 8px;
}

mui-numbox-btn-minus

数字减少按钮

Mui.css (v3.0.0)部分源码:

.mui-numbox .mui-numbox-btn-minus, .mui-numbox .mui-btn-numbox-minus
{
    left: 0;

    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

mui-numbox-btn-plus

数字增加按钮

Mui.css (v3.0.0)部分源码:

.mui-numbox .mui-numbox-btn-plus, .mui-numbox .mui-btn-numbox-plus
{
  right: 0;

  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

mui-numbox-input

数字输入区域

Mui.css (v3.0.0)部分源码:

<!--4801-->
.mui-numbox .mui-numbox-input, .mui-numbox .mui-input-numbox
{
  display: inline-block;
  overflow: hidden;

  width: 100% !important;
  height: 100%;
  margin: 0;
  padding: 0 3px !important;

  text-align: center;
  text-overflow: ellipsis;
  word-break: normal;

  border: none !important;
  border-right: solid 1px #ccc !important;
  border-left: solid 1px #ccc !important;
  border-radius: 0 !important;
}
上次更新: 2018-10-22 08:21:38