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="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>

这样,就实现了如下图所示的效果:

但是,当你鼠标拖动的时候下面的图片不会发生变化,这个离我需要的还差一点,我的鼠标拖动滑块时下面的影像也发生变化,找了半天没有找到相对应的事件,所以,就只能在原始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。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jquery判断一个div的边界是否超出另外一个div的边界

    摘要:本文简单介绍jquery判断一个div的边界是否超出另外一个div的边界,如果超出边界做出相应的处理。

    lzugis
  • shape文件的生成与打包下载

    lzugis
  • Dojo Chart之常用统计图

    很多做web的都知道,在很多web系统中会涉及到一些统计图,例如饼状图,柱状图、趋势图、以及叠加图等。提到这儿,做web的都很熟悉的,jquery的highch...

    lzugis
  • HTML不常用的标签

    做网页都知道,只要知道DIV+CSS就可以做出绝大部分的效果,但是也是有部分标签也是很有用的,但不常用。

    剑行者
  • bootstrap select 多选 搜索框 分组 常用

    用户5760343
  • H5新特性之语义化标签

    H5新增了很多标签,也更加语义化了,但是除了header、footer、nav等,其他的还真的没有去了解过,今天整理一下H5新增的语义化标签。

    wade
  • 03.Web大前端时代之:HTML5+CSS3入门系列~H5功能元素

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 2.功能元素 1...

    逸鹏
  • 【消息队列 MQ 专栏】消息队列之 Kafka

    Kafka 最早是由 LinkedIn 公司开发一种分布式的基于发布/订阅的消息系统,之后成为 Apache 的顶级项目。主要特点如下:

    芋道源码
  • [译]CSS边框实现“无图化”设计

    原文:http://www.yuiblog.com/blog/2011/03/08/css-border-tricks-with-collapsed-boxes...

    小李刀刀
  • Cypress web自动化20-跨域问题-a标签超链接

    cypress 上默认访问一个跨域的网页会出现异常: Cypress detected a cross origin error happened on pag...

    上海-悠悠

扫码关注云+社区

领取腾讯云代金券