Jquery实现微调 FineTuning

最新推荐文章于 2020-07-27 06:05:49 发布

宸路

最新推荐文章于 2020-07-27 06:05:49 发布

阅读量912

点赞数

分类专栏： JQuery学习文章标签： jquery javascript function textbox div stylesheet

本文链接：https://blog.csdn.net/gaofang2009/article/details/5839639

版权

JQuery学习专栏收录该内容

43 篇文章 0 订阅

订阅专栏

效果图

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中的样式，可以随着自己喜欢组合

页面代码：

完整的示例：

字体大小可以自已适当的调整要到需要的程度

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"></mce:script> <mce:style type="text/css"></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>

效果：