Jquery实现微调 FineTuning
效果图
js脚本
$(document).ready(function () { /**************FineTuning微调开始****************************/ $("#PreNum,#NextNum,#PreNum3,#NextNum3").bind("click", { minVal: "2", maxVal: "30" }, FineTuning); //鼠标悬浮时更改样式 $("#PreNum,#NextNum,#PreNum3,#NextNum3").hover( function () { var ContainerName = $(this).attr("id"); var ContainerLength = ContainerName.length; if (ContainerName != "PreNum" && ContainerName != "NextNum") { ContainerName = ContainerName.substring(0, ContainerLength - 1); } $(this).removeClass("ui-state-default"); }, function () { var ContainerName = $(this).attr("id"); var ContainerLength = ContainerName.length; if (ContainerName != "PreNum" && ContainerName != "NextNum") { ContainerName = ContainerName.substring(0, ContainerLength - 1); } $(this).addClass("ui-state-default"); } ); /**************FineTuning微调结束****************************/ }); /********************FineTuning微调的实体方法开始***************************************/ function FineTuning(e) { var MinVal = e.data.minVal; var MaxVal = e.data.maxVal; var ClickID = $(this).attr("id").toString(); var ClickLength = ClickID.length; var ClickNum = ""; if (ClickID != "PreNum" && ClickID != "NextNum") { ClickNum = ClickID.substring(ClickLength - 1, ClickLength); ClickID = ClickID.substring(0, ClickLength - 1); } var Num = parseInt($("#TxtNum" + ClickNum.toString()).val()); if (ClickID == "PreNum") { if (Num - 1 >= MinVal) { $("#TxtNum" + ClickNum.toString()).val(Num - 1); } } else if (ClickID == "NextNum") { if (Num + 1 <= MaxVal) { $("#TxtNum" + ClickNum.toString() + "").val(Num + 1); } } if (Num < MinVal) { $("#TxtNum" + ClickNum.toString()).val(MinVal); } if (Num > MaxVal) { $("#TxtNum" + ClickNum.toString()).val(MaxVal); } } /********************FineTuning微调的实体方法结束***************************************/
讲解：
PreNum:前一个数字
NextNum:下一个数字
TxtNum:显示数字的文本框
命名规则：
PreNum或PreNum（i）
NextNum或NextNum（i）
TxtNum 或TxtNum（i）
PreNum、NextNum、TxtNum的i要一样
样式用的是jquery的ui中的样式，可以随着自己喜欢组合
页面代码：
<div style="position: relative; height: 100%; width:120px;"> <asp:TextBox ID="TxtNum3" CssClass="TxtNum" runat="server"></asp:TextBox> <div style="position: absolute; right: 1px; top: 1px;"> <div id="PreNum3" class="ui-widget ui-widget-header ui-corner-all ui-state-default" style="font-size: 0.5em; text-align: center; width: 20px;"> <a href="javascript:" mce_href="javascript:">▲</a> </div> <div id="NextNum3" class="ui-widget ui-widget-header ui-corner-all ui-state-default" style="font-size: 0.5em; text-align: center; width: 20px;"> <a href="javascript:" mce_href="javascript:">▼</a> </div> </div> </div>
完整的示例：
字体大小可以自已适当的调整要到需要的程度
jquery.ui.all.css 在此文件的上两级目录的themes/base下
jquery-1.4.2.js 在此文件的上两级目录下
jquery-ui-1.8.1.custom.js 在此文件的上两级目录的ui下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <link type="text/css" href="../../themes/base/jquery.ui.all.css" mce_href="themes/base/jquery.ui.all.css" rel="stylesheet" /> <mce:script type="text/javascript" src="../../jquery-1.4.2.js" mce_src="jquery-1.4.2.js"></mce:script> <mce:script type="text/javascript" src="../../ui/jquery-ui-1.8.1.custom.js" mce_src="ui/jquery-ui-1.8.1.custom.js"></mce:script> <mce:script type="text/javascript"><!-- $(function () { /**************FineTuning微调开始****************************/ $("#PreNum3,#NextNum3").bind("click", { minVal: "2", maxVal: "30" }, FineTuning); //鼠标悬浮时更改样式 $("#PreNum3,#NextNum3").hover( function () { var ContainerName = $(this).attr("id"); var ContainerLength = ContainerName.length; if (ContainerName != "PreNum" && ContainerName != "NextNum") { ContainerName = ContainerName.substring(0, ContainerLength - 1); } $(this).removeClass("ui-state-default"); }, function () { var ContainerName = $(this).attr("id"); var ContainerLength = ContainerName.length; if (ContainerName != "PreNum" && ContainerName != "NextNum") { ContainerName = ContainerName.substring(0, ContainerLength - 1); } $(this).addClass("ui-state-default"); } ); /**************FineTuning微调结束****************************/ }); /********************FineTuning微调的实体方法开始***************************************/ function FineTuning(e) { var MinVal = e.data.minVal; var MaxVal = e.data.maxVal; var ClickID = $(this).attr("id").toString(); var ClickLength = ClickID.length; var ClickNum = ""; if (ClickID != "PreNum" && ClickID != "NextNum") { ClickNum = ClickID.substring(ClickLength - 1, ClickLength); ClickID = ClickID.substring(0, ClickLength - 1); } var Num = parseInt($("#TxtNum" + ClickNum.toString()).val()); if (ClickID == "PreNum") { if (Num - 1 >= MinVal) { $("#TxtNum" + ClickNum.toString()).val(Num - 1); } } else if (ClickID == "NextNum") { if (Num + 1 <= MaxVal) { $("#TxtNum" + ClickNum.toString() + "").val(Num + 1); } } if (Num < MinVal) { $("#TxtNum" + ClickNum.toString()).val(MinVal); } if (Num > MaxVal) { $("#TxtNum" + ClickNum.toString()).val(MaxVal); } } /********************FineTuning微调的实体方法结束***************************************/ // --></mce:script> <mce:style type="text/css"><!-- html{ font:62.5%; } --></mce:style><style type="text/css" mce_bogus="1">html{ font:62.5%; }</style> </HEAD> <BODY> <table><tr><td> <div style="position: relative; height: 100%; width:100%; "> <input id="TxtNum3" class="TxtNum" value="20"></input> <div style="position: absolute; right: 2px; top: 1px;"> <div id="PreNum3" class="ui-widget ui-widget-header ui-corner-all ui-state-default" style="font-size: 0.4em; text-align: center; width: 20px;"> <a href="javascript:" mce_href="javascript:">▲</a> </div> <div id="NextNum3" class="ui-widget ui-widget-header ui-corner-all ui-state-default" style="font-size: 0.4em; text-align: center; width: 20px;"> <a href="javascript:" mce_href="javascript:" >▼</a> </div> </div> </div> </td> </tr> </table> </BODY> </HTML>
效果：
