介绍一个实用的form表单控件DG-spinner
DG-spinner控件效果如图：http://hi.csdn.net/attachment/201108/19/0_1313720560N3VI.gif
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
页:
[1]