|
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 |
|