素材牛VIP会员

jQuery文本框数字加减输入效果

 所属分类:网页特效-输入/选择框/联动

 浏览:2789次  评论:0次  更新时间:2016-12-26
牛币素材VIP可免积分下载
jQuery文本框数字加减输入效果兼容IE8
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:基于jquery的轻量级文本框数字加减输入效果

详细介绍

使用方法:

引入jQuery库文件、特效JS文件

<script src="http://www.sucainiu.com/themes/cdn/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/num-alignment.js"></script>

HTML结构

不可编辑:<input id="1" class="alignment" value="15.1"/><br><br>
可编辑:<input id="2" class="alignment" data_edit="true" value="15.1"/><br><br>
自定义类型:<input id="3" user_data="aaa" value="5"/><br><br>
默认类型设置最大值:<input id="4" data_max="11" value="10"/><br><br>
自定义数据:<input id="5" data_step="5" data_min="5" data_max="50" data_digit="0" value="10"/><br><br>
设置长度:<input id="6" style="width:100px;" class="alignment" value="15.1"/>

特效解析:

1.本插件基于jquery基础封装的轻量级插件,使用时只需导入num-alignment.js即可;

2.插件设置默认值:{"step" : 0.1, "min" : 0, "max" : 99, "digit" : 1};

3.可以自定义设置类型   ??》 通过设置 num-alignment.js中下方data中添加;

4.引用自定义类型通过  input框中设置  user_data属性;

5.如果认为插件数据设置不够合理可通过 data_step,data_min,data_max,data_digit四个属性设置步长、最小值、最大值、小数位数;

☆:注意属性值将会覆盖类型值;

6.插件默认设置readonly,如果你想设置为编辑,可通过属性 data_edit="true"设置;

7.插件为自动装载,但是必须设置 user_data,data_step,data_min,data_max,data_digit,属性中的一个或者引用alignment css类;

8.插件宽度通过计算所得,只能通过设置长度来调整,宽度设定将被忽略;

9.一个页面多个插件时必须设置每个元素id

相关素材 - 输入/选择框/联动

讨论这个素材(0)回答他人问题或分享使用心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:1 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)