? ? 最近公司項目應客戶要求，web端需要跟桌面端一樣實現通過滑動條設置計劃起始時間，所以就研究了一下Slider插件，被搞慘了。下面簡單描述一下需求。

? ? 需求場景：首先，要使用滑動條進行方式進行計劃起始時間的編輯（這不難，可以很容易使用slider實現），另外還需要提供一個彈出層對起始時間進行編輯，編輯完提交后自動更新滑動條上的起始時間滑塊（這點有點費勁），效果圖如下（實現在下面咯~~~）：

????

圖1、滑動條

圖2、右鍵菜單

圖3、彈出層編輯

? ? 實現思路：滑動條實現起來不是很難，在initSlider的時候，向服務器發送請求得到所有資計劃的json對象，遍歷子計劃，并添加slider元素到頁面即可，上干活~~~~。

? ? 所有的slider都在下面的.layout里面，至于那兩個時間input是父計劃的起始時間（子計劃時間與父計劃的關系，我就不說了~~）

<div class="layout"><input id="mindate" type="text" value="${plans.startdate}" /><input id="maxdate" type="text" value="${plans.enddate}" /> </div>
//初始化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"];$("<div>", {"class": "layout-slider"}).css("width", "100%").append($("<span>").css({display: "none"}).append($("<input>", {type: "text", name: "mindate",value:json["rows"][i]["STARTDATE"], id: "mindate" + i})))//開始時間表單，滑動滑動條時，動態改變.append($("<span>").css({display: "none"}).append($("<input>", {type: "text", name: "maxdate",value:json["rows"][i]["ENDDATE"], id: "maxdate" + i}))).append($("<span>", {"class": "layoutspan"}).append($("<span>", {text: ids}).css("width", "100px").attr("Index",i)).append($("<span>").css({display: "inline-block", width: "900px", padding: "0 5px"}).append($("<input>", {id: "Slider" + i, type: "slider", name: "area"})))).appendTo(".layout").append($("<span>").css({display: "none"}).append($("<input>", {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];return calculate.call(this, value); },onstatechange: function(value){ //當滑動條改變時，將起始時間更新到相應的計劃的表單 <pre name="code" class="javascript">//獲取當前進度條id，用以更新表單var t =$(this)[0].inputNode[0].id;curSlider=t.substring(6,7) 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($("<span>", {text: idS}).css("width", "100px").attr("Index",index));$(t).append($("<span>").css({display: "inline-block", width: "900px", padding: "0 5px"}).append($("<input>", {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代碼附件一下（第一次寫博客，貌似不能上傳附件，有需要的可以找我要哈~~~~）。

? ? 剛開始寫博客，有什么不足之處，望各位給出意見，互相學習！

總結

以上是生活随笔為你收集整理的JQuery Slider 实现时间刻度滑动条，用以编辑项目/起始时间（手动输入可自动更新到滑动条）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。