六狼论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 117|回复: 0

介绍一个实用的form表单控件DG-spinner

[复制链接]

升级  0.33%

57

主题

57

主题

57

主题

举人

Rank: 3Rank: 3

积分
201
 楼主| 发表于 2013-2-7 20:49:23 | 显示全部楼层 |阅读模式
DG-spinner控件效果如图:

HTML头文件引入:
<script type="text/javascript" src="js/external/mootools.js"></script><link rel="stylesheet" type="text/css" href="css/Spinner.css"></script><script type="text/javascript" src="js/Spinner.js"></script> 
最基本的定义:
<input class="DG-spinner" maxlength="5" value="3" type="text">
控件按照default属性显示:
config: {increment : 1,value : 0,minValue : 0,maxValue : 100,decimals: 0,styles: {},shiftIncrement : 10,label: null,name: '',disableWheel : false,disabled : false,buttonAlign : 'right'}
用户自定义控件样式:
<td><label id="testLabel">Your age(Spinner created from markup):</label></td><td><input id="testElement" class="DG-spinner" maxlength="3" value="18" type="text" properties="maxValue:120,minValue:13,shiftIncrement:20,label:testLabel"></td>用户属性用properties定义,属性以key:value呈现,属性与属性之间以逗号隔开,其中key(属性名)参照上面default属性的config这个json。
 
自动生成该控件的代码为:
HTML:
<td>Created from markup</td><td><input class="DG-spinner" maxlength="5" value="3" type="text"></td>
JS:
<script type="text/javascript">var spinner = new DG.Spinner( {renderTo : 'spinboxcontainer',id:'dynamicSpinner',label: 'labelDynamicSpinner',increment:0.1,decimals:1,styles: {width:'40px'},value : 20,name: 'mySpinner'});</script>以上源码均来自DEMON

DEMON:http://www.dhtmlgoodies.com/scripts/dg-spinner/spinner.html
spinner下载地址:http://www.dhtmlgoodies.com/scripts/dg-spinner/dg-spinner.zip
附:dg-spinner.zip包少了一个mootools.js 下载地址为:http://files.cnblogs.com/zpfweblife/mootools.js 把该文件放在dg-spinner\js\external文件夹下。
 
转自:www.itlanguageexpress.info
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则

快速回复 返回顶部 返回列表