JQuery Slider 實現時間刻度滑動條，用以編輯項目/起始時間（手動輸入可自動更新到滑動條）
最近公司項目應客戶要求，web端須要跟桌面端同樣實現經過滑動條設置計劃起始時間，因此就研究了一下Slider插件，被搞慘了
。下面簡單描述一下需求。 css
需求場景：首先，要使用滑動條進行方式進行計劃起始時間的編輯（這不難，能夠很容易使用slider實現），另外還須要提供一個彈出層對起始時間進行編輯，編輯完提交後自動更新滑動條上的起始時間滑塊（這點有點費勁），效果圖以下（實如今下面咯~~~）： html
圖一、滑動條 web
圖二、右鍵菜單 ajax
圖三、彈出層編輯 json
實現思路：滑動條實現起來不是很難，在initSlider的時候，向服務器發送請求獲得全部資計劃的json對象，遍歷子計劃，並添加slider元素到頁面便可，上幹活~~~~。 服務器
全部的slider都在下面的.layout裏面，至於那兩個時間input是父計劃的起始時間（子計劃時間與父計劃的關係，我就不說了~~） app
<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();
});
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];
//獲取當前進度條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($("<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");
}
});
}
剛開始寫博客，有什麼不足之處，望各位給出意見，互相學習！ ide
相關文章
- 1. 【UGUI】Slider滑動條
- 2. 滑動條控制（Slider Control）
- 3. Unity UGUI（七）Slider（滑動條）
- 4. Unity3D Slider控件（滑動條）
- 5. Slider 滑動條效果
- 6. 自定義一個可滑動時間刻度尺
- 7. cocos2dx-lua 滑動條實現
- 8. NGUI做滑動條
- 9. 【EasyUI篇】Slider滑動條組件
- 10. 【Flutter】9、Flutter之滑動條——Slider
- 更多相關文章...
- • jQuery Mobile 表單滑動條 - jQuery Mobile 教程
- • ionic 滑動框 - ionic 教程
- • 算法總結-滑動窗口
- • SpringBoot中properties文件不能自動提示解決方法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
