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文件不能自动提示解决方法
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. js中 charCodeAt
- 2. Android中通过ViewHelper.setTranslationY实现View移动控制（NineOldAndroids开源项目）
- 3. 【Android】日常记录：BottomNavigationView自定义样式，修改点击后图片
- 4. maya 文件检查 ui和数据分离 （一）
- 5. eclipse 修改项目的jdk版本
- 6. Android InputMethod设置
- 7. Simulink中Bus Selector出现很多? ? ?
- 8. 【Openfire笔记】启动Mac版Openfire时提示“系统偏好设置错误”
- 9. AutoPLP在偏好标签中的生产与应用
- 10. 数据库关闭的四种方式
欢迎关注本站公众号,获取更多信息
