介紹一個實用的form表單控件DG-spinner

原創

2020-02-22 05:31

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文件夾下。