最近公司项目应客户要求，web端需要跟桌面端一样实现通过滑动条设置计划起始时间，所以就研究了一下Slider插件，被搞惨了
。下面简单描述一下需求。
需求场景：首先，要使用滑动条进行方式进行计划起始时间的编辑（这不难，可以很容易使用slider实现），另外还需要提供一个弹出层对起始时间进行编辑，编辑完提交后自动更新滑动条上的起始时间滑块（这点有点费劲），效果图如下（实现在下面咯~~~）：
图1、滑动条
图2、右键菜单
图3、弹出层编辑
实现思路：滑动条实现起来不是很难，在initSlider的时候，向服务器发送请求得到所有资计划的json对象，遍历子计划，并添加slider元素到页面即可，上干活~~~~。
所有的slider都在下面的.layout里面，至于那两个时间input是父计划的起始时间（子计划时间与父计划的关系，我就不说了~~）
//初始化slider$(document).ready(function(){ initSlider();});
添加slider（在initSlider函数中）
var planid = $("#planid").val(); var pre; var next; var curSlider; var url = '/plans/getSubPlanJson/' + planid; $.ajax({ type: "POST", dataType: "json", url: url, cache: false, data: "", success: function (json) { if (typeof(json) != "undefined" && typeof(json["rows"]) != "undefined") { for (var i = 0; i < json["rows"].length; i++) { var ids = json["rows"][i]["IDS"]; $(" ", {"class": "layout-slider"}).css("width", "100%") .append($(" ").css({display: "none"}).append($("", {type: "text", name: "mindate",value:json["rows"][i]["STARTDATE"], id: "mindate" + i})))//开始时间表单，滑动滑动条时，动态改变 .append($("").css({display: "none"}).append($("", {type: "text", name: "maxdate",value:json["rows"][i]["ENDDATE"], id: "maxdate" + i}))) .append($("", {"class": "layoutspan"}) .append($("", {text: ids}).css("width", "100px").attr("Index",i)) .append($("").css({display: "inline-block", width: "900px", padding: "0 5px"}).append($("", {id: "Slider" + i, type: "slider", name: "area"})))) .appendTo(".layout") .append($("").css({display: "none"}).append($("", {id: "plandata" + i, type: "text", name: "plandataId",value:json["rows"][i]["ID"]}))); var maxDate=$("#maxdate"+i); var minDate=$("#mindate"+i); var v1 = getvalue(mindate, scale, to, json["rows"][i]["STARTDATE"]); var v2 = getvalue(maxdate, scale, to, json["rows"][i]["ENDDATE"]); $("#Slider" + i).attr("value", v1 + ";" + v2); $("#Slider" + i).slider({ from: 0, to: to, step: step, limits: false, smooth: true, range:true, round: 0, dimension: "", skin: "plastic" , calculate: function(value){ pre = (value+"").split(";")[0]; next = (value+"").split(";")[1]; //获取当前进度条id，用以更新表单 var t =$(this)[0].inputNode[0].id; curSlider=t.substring(6,7) return calculate.call(this, value); }, onstatechange: function(value){ //当滑动条改变时，将起始时间更新到相应的计划的表单 var mind = (value+"").split(";")[0]; var maxd = (value+"").split(";")[1]; var mind = calculate.call(this, mind); var maxd = calculate.call(this, maxd); $("#mindate"+curSlider).attr("value",mind); $("#maxdate"+curSlider).attr("value",maxd); window.console && console.log('curSlider: %s', curSlider); } });
右键菜单编辑的实现：
$('span.layoutspan').contextMenu('myMenu1', { bindings: { 'edit': function(t) { var span=$(t).children(":first"); var idS=$(span).text(); var index =$(span).attr("Index"); $("#editPlandata").dialog({ title : "编辑计划", modal : true, href : "/plans/editPlanData/" + idS+"?mindate="+min+"&maxdate="+max, top : $("#center").offset().top + 50, iconCls : "icon-save", width : 500, buttons : [ { text : '提交', id : 'submit1', handler : function() { $(t).empty(); $(t).attr("class","layout"); $(t).append($("", {text: idS}).css("width", "100px").attr("Index",index)); $(t).append($("").css({display: "inline-block", width: "900px", padding: "0 5px"}) .append($("", {id: "Slider" + index, type: "slider", name: "area"}))); var startdata = $("#editPlandata input[name='startdate']").val(); var enddata = $("#editPlandata input[name='enddate']").val(); var v1 = getvalue(mindate, scale, to, startdata); var v2 = getvalue(maxdate, scale, to,enddata); $("#Slider" + index).attr("value",v1 + ";" + v2); $("#Slider" + index).slider({ from: 0, to: to, step: step, limits: false, smooth: true, range:true, round: 0, dimension: "", skin: "plastic" , calculate: function(value){ pre = (value+"").split(";")[0]; next = (value+"").split(";")[1]; //获取当前进度条id，用以更新表单 var t =$(this)[0].inputNode[0].id; curSlider=t.substring(6,7) return calculate.call(this, value); }, onstatechange: function(value){ //当滑动条改变时，将起始时间更新到相应的计划的表单 var mind = (value+"").split(";")[0]; var maxd = (value+"").split(";")[1]; var mind = calculate.call(this, mind); var maxd = calculate.call(this, maxd); $("#mindate"+curSlider).attr("value",mind); $("#maxdate"+curSlider).attr("value",maxd); window.console && console.log('curSlider: %s', curSlider); } }); $("#editPlandata").dialog("close"); var start = $("#editPlandata input[name=startdate]").val(); var end = $("#editPlandata input[name=enddate]").val(); var min="#mindate"+index; $("#mindate"+index).attr("value",start); $("#maxdate"+index).attr("value",end); } }, { text : '取消', iconCls : 'icon-cancel', handler : function() { $("#editPlandata").dialog("close"); } } ], close : function(event, ui) { $(this).dialog("close"); $(this).dialog("destroy"); } }); }
基本上这样就可以了，上面的代码直接可能无法直接使用，而且代码重复性比较高，后面会抽象封装一下，我把整个的js代码附件一下（第一次写博客，貌似不能上传附件，有需要的可以找我要哈~~~~）。
刚开始写博客，有什么不足之处，望各位给出意见，互相学习！