文档章节

JQuery Slider 实现时间刻度滑动条,用以编辑项目/起始时间(手动输入可自动更新到滑动条)

ivan-Zhao
 ivan-Zhao
发布于 2015/09/10 14:26
字数 1143
阅读 161
收藏 0

    最近公司项目应客户要求,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];
					      	   //获取当前进度条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");
		        	        			}
		        	        		});
		        	        		
		        	        	}



基本上这样就可以了,上面的代码直接可能无法直接使用,而且代码重复性比较高,后面会抽象封装一下,我把整个的js代码附件一下(第一次写博客,貌似不能上传附件,有需要的可以找我要哈~~~~)。

    刚开始写博客,有什么不足之处,望各位给出意见,互相学习!

 


    


© 著作权归作者所有

ivan-Zhao
粉丝 10
博文 33
码字总数 29110
作品 0
深圳
程序员
私信 提问
Web设计与开发终极资源大全(上)

Web 技术突飞猛进,Web 设计与开发者们可以选择的工具越来越多,Web 开发者的技巧不再只限于 HTML 和 服务器端编程,还需要精通各种第三方资源,这些第三方资源有时候比你的项目更复杂,更专...

红薯
2010/03/18
1K
3
10 款简单精美的 jQuery 和 CSS3 表单

表单在网页中扮演着十分重要的作用,从用户登录注册到留言评论,都离不开表单。一个设计精美方便的表单,可以提高用户交互的质量。下面给大家介绍10款设计简单但是外观精美的jQuery和CSS3表单...

android哥哥
2012/08/06
9.2K
10
28 个很有用的 JQuery Sliders 插件

SlideDeck jQuery plugin SlideDeck Lite 是 SlideDeck Pro 的功能限制版本。很专业。 Automatic Image Slider w/ CSS & jQuery Quicksand Move Elements with Style Nivo – A new jQuery i......

小编辑
2011/09/02
3K
3
超强的jquery极品插件--色彩选择器类/ 右键菜单类/ 图片新闻flash展示类

Farbtastic Farbtastic是一个color picker插件。它能够在一个页面中加入多个颜色选择控件,然后每个控件关联到页面中的一个元素比如:文本输入框。 Farbtastic jQuery Color Picker 21世纪开...

晨曦之光
2012/03/09
458
0
39 个超实用 jQuery 实例应用特效

1.Contextual Slideout:上下文滑动特效 2.Revealing Photo Slider:图片幻灯片特效 3.Fancy Box:魔幻盒 4.Scrollable:滚动特效 5.Flip:翻转特效,实现4个方向旋转 6.Smart tooltips:智能...

MrMign
2012/09/12
27.6K
6

没有更多内容

加载失败,请刷新页面

加载更多

thinkphp5.1学习过程四——trait

<?php /** *trait实现了代码的复用 *并且突破了单继承的限制 *trait是类不是类,不能实例化 */ trait Demo1 { public function hello1() { return __METHOD__; } } trait Demo2 { public fu......

大海yht
34分钟前
6
0
DB2 sequence 操作

操作DB2 下 sequence seqName db2数据库一般seq还是比较大的,但是程序在调用的时候还是不可避免的有一些bug, 下面是对于seq一些简单的操作,也作为工作的一些记录 1、命令行取sequence se...

飞雪无痕
41分钟前
6
0
《吊打面试官》系列-秒杀系统设计

你知道的越多,你不知道的越多 点赞再看,养成习惯 GitHub上已经开源 https://github.com/JavaFamily 有一线大厂面试点脑图和个人联系方式,欢迎Star和指教 絮叨 之前写了很多Redis相关的知识...

敖丙
47分钟前
12
0
Qt编写气体安全管理系统11-数据打印

一、前言 在各种软件系统中,数据打印也是常用的功能之一,一般来说会对查询的数据结果导出到excel,还会对查询的数据结果直接打印,在Qt中提供了打印机类QPrinter,在printsupport组件中,可...

飞扬青云
53分钟前
5
0
初级阶段

#include <stdio.h> #include <stdlib.h> int main(){ int a; int Sn = 0; int i; int tmp = 0; scanf_s("%d", &a); for (i = 1; i <= 5; i++) { tmp = tmp * 10 + a; Sn += tmp; } printf("......

Lxxxxx256
54分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部