Jquery实现数字微调 FineTuning 小插件
用到了jquery1.4.2及相应的ui文件
这是一个只实现了微调基本功能的小插件，自己编辑。
可以在文本框中手动输入，也可以用鼠标点击调整textbox中的数字
插件代码
/*! *fineTuning微调小插件件 * Copyright 2010, 高芳 * * jQuery JavaScript Library v1.4.2 * http://jquery.com/ * * Date: 2010-11-30 */ (function ($) { $.fineTuning = $.fineTuning || {}; $.extend($.fineTuning, { version: "1.00", addTxt: function (fill, options) { options = $.extend({ maxValue: 30, /*最大值*/ minValue: 0, /*最小值*/ defValue: 1, /*默认值*/ txtWidth: 100/*文本框大小*/ }, options || {}); fill = $(fill); var h = []; h.push('<input type="text" name="TextNum"/>'); h.push('<div style="width: 20px;overflow:hidden;position: absolute; font-size:x-small; right:-20px;top:0px; bottom:0px; text-align:center;">'); h.push('<dt><a href="#" mce_href="#" name="Pre" style="text-decoration:none;" mce_style="text-decoration:none;">▲</a></dt>'); h.push('<dt><a href="#" mce_href="#" name="Next" style="text-decoration:none;" mce_style="text-decoration:none;">▼</a></dt>'); h.push('</div> '); fill.append(h.join('')); /*在父级div中 添加用到的控件*/ var TxtBox = $(":text", fill); TxtBox.val(options.defValue).width(options.txtWidth)/*设置文本框大小*/ .addClass("ui-widget ui-widget-content") .bind("blur keyup",function(){ var TxtNum = parseInt($(this).val()); if(!TxtNum && TxtNum !=0){ $(this).val(options.minValue); return; } $(this).val((TxtNum> options.maxValue) ? options.maxValue :((TxtNum< options.minValue) ? options.minValue :TxtNum)); }); fill.width(TxtBox.width()).height(TxtBox.height()) /*设置父级div宽度，高度与textbox相同*/ .css({ "position": "relative", "height": "100%" }); /*设置父级div样式*/ $("dt", fill).addClass("ui-state-default"); /*给所有的控件加上样式*/ AddHover($("a", $(fill))); fill.bind("click", function (event) { if (!event) event = window.event; var target = (event.target) ? event.target : event.srcElement; if (target.tagName == "A") { FineTuning(options, $(target), fill); } }); } }); //鼠标悬浮时更改样式 ---私有 function AddHover(obj) { $(obj).hover( function (event) { if (!event) event = window.event; var target = (event.target) ? event.target : event.srcElement; if (target.tagName == "A") { $(target).parents("dt").addClass("ui-state-hover"); } }, function (event) { if (!event) event = window.event; var target = (event.target) ? event.target : event.srcElement; if (target.tagName == "A") { $(target).parents("dt").removeClass("ui-state-hover"); } } ); } //私有方法 function FineTuning(opt, obj, parent) { /*FineTuning微调的实体方法开始*/ var MinVal = opt.minValue; var MaxVal = opt.maxValue; var ClickName = $(obj).attr("name"); var TxtBox = $("input:text", $(parent)); var TxtNum = parseInt(TxtBox.val()); if(!TxtNum && TxtNum !=0){ TxtBox.val(MinVal);return; } switch (ClickName) { case "Pre": { TxtBox.val((TxtNum - 1 < MinVal) ? MinVal : (TxtNum - 1)); } break; case "Next": { TxtBox.val((TxtNum + 1 > MaxVal) ? MaxVal : (TxtNum + 1)); } break; } /*FineTuning微调的实体方法结束*/ } })(jQuery);
示例图片：
示例代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <mce:script src="jquery-1.4.2.min.js" mce_src="jquery-1.4.2.min.js" type="text/javascript"></mce:script> <mce:script src="jQuery.fineTuning.js" mce_src="jQuery.fineTuning.js" type="text/javascript"></mce:script> <link href="../ui/smoothness/jquery-ui-1.8.2.custom.css" mce_href="ui/smoothness/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" /> <mce:script type="text/javascript"><!-- $(function () { var options = { maxValue: 3, minValue: -1, defValue: 2, txtWidth:20 }; $.fineTuning.addTxt($("#xx"),options); options = { maxValue: 10, minValue: 5, defValue: 4 }; $.fineTuning.addTxt($("#yy"),options); }); // --></mce:script> </head> <body> 第一个 <div id="xx"> </div> 第二个 <div id="yy"></div> </body> </html>