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

最新推荐文章于 2024-11-05 18:18:48 发布

iteye_18256

最新推荐文章于 2024-11-05 18:18:48 发布

阅读量134

点赞数

分类专栏： js插件文章标签： html javascript 插件 ViewUI

js插件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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