selectToUISlider

用过google earth的朋友，一定记得google earth的一个功能，那就是查看历史影像功能：有一个时间轴滑块，拖动滑块。显示各个时间的影像，例如以下：

没错。就是这个公能，近期做一个WEB的项目，也要用到相似的功能。所以呢就研究了一下，刚開始的时候，记得Jquery UI里面有一个slider的东西，能够实现相似滑块的东西，研究了一下，发现Jquery UI里的slider没法满足我的需求，所以就继续上网search。找了半天。最终找到了selectToUISlider这个Jquery的插件。

selectToUISlider在网上的资料不多。官方演示DEMO例如以下图所看到的：

但是，这种功能没法满足我的需求，研究了半天，最终实现了。

以下就介绍一下我的实现过程啊吧：

1、引入相关js或者样式文件

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>

<script type="text/javascript" src="js/selectToUISlider.jQuery.js"></script>

<link rel="stylesheet" href="css/redmond/jquery-ui-1.7.1.custom.css" type="text/css" />

<link rel="Stylesheet" href="css/ui.slider.extras.css" type="text/css" />

2、在body中定义select内容

<body>

<center>

	<form action="#">

        <!-- demo 3 -->

        <label for="valueImg">请选择影像：</label>

		<fieldset>

			<select name="valueImg" id="valueImg" style="display:block;">

				<optgroup label="1984年">

					<option value="10/03" selected="selected">19841003</option>

				</optgroup>

                <optgroup label="1988年">

					<option value="04/21">19880421</option>

				</optgroup>

                <optgroup label="1989年">

					<option value="10/17">19891017</option>

				</optgroup>

                <optgroup label="1991年">

					<option value="05/16">19910516</option>

				</optgroup>

                <optgroup label="1992年">

					<option value="05/18">19920518</option>

                    <option value="10/25">19921025</option>

				</optgroup>

                <optgroup label="1998年">

					<option value="11/11">19981111</option>

				</optgroup>

                <optgroup label="1999年">

					<option value="05/06">19990506</option>

                    <option value="10/29">19991029</option>

				</optgroup>

                <optgroup label="2000年">

					<option value="04/30">20000430</option>

				</optgroup>

                <optgroup label="2001年">

					<option value="05/19">20010519</option>

				</optgroup>

                <optgroup label="2006年">

					<option value="06/17">20060617</option>

                    <option value="08/27">20060827</option>

                    <option value="09/28">20060928</option>

				</optgroup>

                <optgroup label="2007年">

					<option value="06/09">20070609</option>

                    <option value="07/01">20070701</option>

                    <option value="08/09">20070809</option>

                    <option value="09/22">20070922</option>

				</optgroup>

                <optgroup label="2008年">

					<option value="06/02">20080602</option>

                    <option value="07/02">20080702</option>

                    <option value="08/03">20080803</option>

                    <option value="09/01">20080901</option>

				</optgroup>

                <optgroup label="2009年">

					<option value="08/12">20090812</option>

				</optgroup>

                <optgroup label="2010年">

					<option value="07/06">20100706</option>

                    <option value="09/11">20100911</option>

				</optgroup>

                <optgroup label="2011年">

					<option value="07/09">20110709</option>

                    <option value="08/10">20110810</option>

                    <option value="09/23">20110923</option>

				</optgroup>

                <optgroup label="2012年">

					<option value="06/04">20120604</option>

                    <option value="08/10">20120810</option>

                    <option value="08/25">20120825</option>

                    <option value="09/04">20120904</option>

                    <option value="09/26">20120926</option>

				</optgroup>

                 <optgroup label="2013年">

					<option value="06/03">20130603</option>

                    <option value="07/25">20130725</option>

                    <option value="08/09">20130809</option>

                    <option value="08/25">20130825</option>

                    <option value="09/25">20130925</option>

				</optgroup>

			</select>

		</fieldset>

        <div>

    		<img src="data:images/mysk/19841003.jpg" width="350" height="350" id="img">

    	</div>

	</form>

</center>

</body>

3、设置显示的样式

<style type="text/css">

	body {font-size: 10px; font-family:"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;}

	fieldset { border:0; margin: 5px; height: 12em;}

	.ui-slider {clear: both; top: 1em;}

</style>

4、初始化并加入slider change事件

<script type="text/javascript">

	$(function(){

		$('select#valueImg').selectToUISlider({

			labels: 19,//设置标签的显示个数

			sliderOptions: {

				change:function(e, ui) { //定义change事件

					$("#img").attr("src","images/mysk/"+jQuery("#valueImg  option:selected").text()+".jpg");//修改img的src源

				}

			}

		});

	});

</script>

这样。就实现了例如以下图所看到的的效果：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvR0lTU2hpWGlTaGVuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

但是，当你鼠标拖动的时候以下的图片不会发生变化，这个离我须要的还差一点，我的鼠标拖动滑块时以下的影像也发生变化，找了半天没有找到相相应的事件，所以，就仅仅能在原始js里做文章了，在里面找了找。selectToUISlider.jQuery.js里面的sliderOptions做了一点修改，修改内容例如以下：

	var sliderOptions = {

		step: 1,

		min: 0,

		orientation: 'horizontal',

		max: selectOptions.length-1,

		range: selects.length > 1,//multiple select elements = true

		slide: function(e, ui) {//slide function

				var thisHandle = jQuery(ui.handle);

				//handle feedback

				var textval = ttText(ui.value);

				thisHandle

					.attr('aria-valuetext', textval)

					.attr('aria-valuenow', ui.value)

					.find('.ui-slider-tooltip .ttContent')

						.text( textval );

				//控制原始的select切换

				var currSelect = jQuery('#' + thisHandle.attr('id').split('handle_')[1]);

				currSelect.find('option').eq(ui.value).attr('selected', 'selected');

				//控制Slider的*******************************************************************

				var thisIndex = ui.value;//当前节点

				var handleIndex = thisHandle.data('handleNum');//操作节点

				thisHandle.parents('.ui-slider:eq(0)').slider("values", handleIndex, thisIndex);

		},

		values: (function(){

			var values = [];

			selects.each(function(){

				values.push( jQuery(this).get(0).selectedIndex );

			});

			return values;

		})()

	};

这样，我要的效果就实现了。

在此。给大家共享出来。实用到此功能的读友请多多支持lzugis。

selectToUISlider的更多相关文章

TinyAdmin前端展现框架
一直在苦苦寻找一个合适的前端框架,少说也看了几十个. ext太重.并且有内存泄露,在IE下就是个悲剧. dhtmlx,速度比較好,开源是GPL不适合企业应用,商业的要钱,倒也不贵万把块钱,可是样式比較 ...

随机推荐

activiti如何让业务对象和对应的流程关联
如何让业务对象和对应的流程关联? 发现ProcessInstance 有个方法getBusinessKey()可以得到一个businessKey. ProcessInstance 对应数据库中的表a ...
docker自建仓库Registry
因为生产情况下官方容器还是比较慢的,所以会用到自建docker仓库.docker官方提供完整部署仓库的容器,你只需要提供域名证书,把文件系统挂载到容器,一个用户密码文件就可以使用基本的仓库功能了. 启 ...
解决无法启动mysql服务错误1069
之前在服务器上修改了my.ini文件 mysql就一直无法启动后来把my.ini改回原来的,还是无法启动并报1069错误在网上查了一下,基本上都是说修改mysql密码,再重新启动,试了一下没作用, ...
bzoj 1996 区间dp
1996: [Hnoi2010]chorus 合唱队 Time Limit: 4 Sec Memory Limit: 64 MBSubmit: 1727 Solved: 1115[Submit][ ...
nyoj38——最小生成树
布线问题时间限制:1000 ms | 内存限制:65535 KB 难度:4 描述南阳理工学院要进行用电线路改造,现在校长要求设计师设计出一种布线方式,该布线方式需要满足以下条件:1.把所有 ...
python的经典类与新式类
新式类:class Myclass(object): pass 经典类:class Myclass: pass 新式类里面加了一些新方法,例如重写父类: class A(object): def __ ...
restframework api（基础1）
最近项目忙成狗,都没时间好好看看开发的东西了,正好最近开始看rest api的东西,真是个好东西啊.可以前后端分离,但是在学习的过程中,遇到各种问题.还是基础不够扎实.本次rest api的会一边遇坑 ...
Diff Two Arrays
比较两个数组,然后返回一个新数组,该数组的元素为两个给定数组中所有独有的数组元素.换言之,返回两个数组的差异. 这是一些对你有帮助的资源: Comparison Operators Array.sli ...
C#学习历程（七）[基础知识]
---恢复内容开始--- >>接受用户输入的整数 Console.readline():接受键盘输入的字符串,如果需要接受整数并输出,则需要字符串的转换. 一般建议使用Covert类中的方 ...
C++设计模式之-原型模式
Prototype 模式也正是提供了自我复制的功能, 就是说新对象的创建可以通过已有对象进行创建.在 C++中,拷贝构造函数( Copy Constructor) 曾经是很对程序员的噩梦,浅层拷贝和深 ...

selectToUISlider

selectToUISlider的更多相关文章

随机推荐

热门专题