jQuery ui数字微调插件js特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery ui数字微调插件js特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery ui数字微调插件</title>
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="jquery/ui.core.js"></script>
<script type="text/javascript" src="jquery/ui.spinner.js"></script>
<style type="text/css">
body
{
	background: #fff;
	font-family: Arial;
}

label {
	float: center;
	margin-right: .5em;
	padding: .15em 0;
	font-weight: bold;
}

.ui-spinner {
	width: 15em;
	display: block;
	position: relative;
	overflow: hidden;
	border: 1px solid #999;
	background: #FEFEFE url(images/spinner-bg.gif) repeat-x left bottom;
	padding: 0 5px;
}

.ui-spinner-disabled {
	background: #F4F4F4;
	color: #CCC;
}

.ui-spinner-box {
	width: 90%;
	height: 100%;
	float: left;
	font-size: 125%;
	border: none;
	background: none;
	padding: 0;
}

.ui-spinner-up,
.ui-spinner-down {
	width: 10%;
	height: 50%;
	font-size: 0.5em;
	padding: 0;
	margin: 0;
	z-index: 100;
	text-align: center;
	vertical-align: middle;
	position: absolute;
	right: 0;
	cursor: default;
	border: 1px solid #999;
	border-right: none;
	border-top: none;
}

.ui-spinner-down {
	bottom: 0;
	border-bottom: 0;
}

.ui-spinner-pressed {
	background: #FEFEFE;
}

.ui-spinner-list,
.ui-spinner-listitem {
	margin: 0;
	padding: 0;
}


</style>

<script type="text/javascript">
$(function(){

	var itemList = [
		{url: "#", title: "John Resig"},
		{url: "#", title: "J&ouml;rn Zaefferer"},
		{url: "#", title: "Jonathan Snook"},
		{url: "#", title: "Richard Worth"},
		{url: "#", title: "Paul Bakaus"},
		{url: "#", title: "Yehuda Katz"},
		{url: "#", title: "Aza Raskin"},
		{url: "#", title: "Karl Swedberg"},
		{url: "#", title: "Scott Jehl"},
		{url: "#", title: "Jonathan Sharp"},
		{url: "#", title: "Kevin Hoyt"},
		{url: "#", title: "Cody Lindley"},
		{url: "#", title: "Mike Alsup"}
	];

	var opts = {
		's1': {decimals:2},
		's2': {stepping: 0.25},
		's3': {currency: '$'},
		's4': {},
		's5': {
			//
			// Two methods of adding external items to the spinner
			//
			// method 1: on initalisation call the add method directly and format html manually
			init: function(e, ui) {
				for (var i=0; i<itemList.length; i++) {
					ui.add('<a href="'+ itemList[i].url +'" target="_blank">'+ itemList[i].title +'</a>');
				}
			},

			// method 2: use the format and items options in combination
			format: '%(title) <a href="%(url)" target="_blank">&raquo;</a>',
			items: itemList
		}
	};

	for (var n in opts)
		$("#"+n).spinner(opts[n]);

	$("button").click(function(e){
		var ns = $(this).attr('id').match(/(s\d)\-(\w+)$/);
		if (ns != null)
			$('#'+ns[1]).spinner( (ns[2] == 'create') ? opts[ns[1]] : ns[2]);
	});

});
</script>
</head>

<body>
<div align="center">
<h1>jQuery UI微调测试页</h1>

<p>这是一个为开发人员和可视化的测试页，演示了一些功能.</p>

<p><label for="s1">基本功能: </label>
<input type="text" id="s1" value="10" /></p>

<p>
<button id="s1-disable">关闭</button>
<button id="s1-enable">开启</button>
<button id="s1-destroy">去除</button>
<button id="s1-create">创建</button>
</p>

<hr />

<p><label for="s2">十进制: </label>
<input type="text" id="s2" value="10.25" /></p>

<p>
<button id="s2-disable">关闭</button>
<button id="s2-enable">开启</button>
<button id="s2-destroy">去除</button>
<button id="s2-create">创建</button>
</p>

<hr />

<p><label for="s3">货币: </label>
<input type="text" id="s3" /></p>

<p>
<button id="s3-disable">关闭</button>
<button id="s3-enable">开启</button>
<button id="s3-destroy">去除</button>
<button id="s3-create">创建</button>
</p>

<hr />

<p><label for="s4">数据列表: </label>
<ul id="s4">

	<li>item 1</li>
	<li>item 2</li>
	<li>item 3</li>
	<li>item 4</li>
	<li>item 5</li>
	<li>item 6</li>

	<li>item 7</li>
	<li>item 8</li>
	<li>item 9</li>
	<li>item 10</li>
</ul>

<p>
<button id="s4-disable">关闭</button>

<button id="s4-enable">开启</button>
<button id="s4-destroy">去除</button>
<button id="s4-create">创建</button>
</p>

<hr />
</div>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)