selectToUISlider
2014-04-22 13:53
369 查看
用过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。
相关文章推荐
- selectToUISlider
- 修改selectToUISlider实现历史影像的对比与显示
- 修改selectToUISlider实现历史影像的对比与显示
- [转]Select Single And Up To 1 Rows
- SQL Script for select data from ebs and make a csv file to FTP
- How to override TTThumbsViewController didSelectPhoto protocol method? 选项
- [MacOS] xcrun: error: active developer path ("/Volumes/Xcode/Xcode6-Beta.app/Contents/Developer") does not exist, use xcode-select to change
- What is the difference between SET and SELECT when assigning values to variables, in T-SQL?
- LINQ to SQL语句(1)Select查询的九种形式
- mysql SELECT/UPDATE command denied to user 'root'@'localhost' for table 'XXX' 报错1142处理
- 自己动手重新实现LINQ to Objects: 3 - Select
- DataTable Select Linq to DataTable
- dbvis MySQL server version for the right syntax to use near 'OPTION SQL_SELECT_LIMIT=DEFAULT' at lin
- mysql "select command denied to user root" 问题解决
- LINQ体验(5)--LINQ to SQL语句之Select/Distinct和Count/Sum/Min/Max/Avg
- Use mysql_num_rows() to find out how many rows were returned for a SELECT statement or mysql_affected_rows() to find out how man
- Connect to Sqlite and do insert, delete, update and select
- Fatal error: Call to a member function read() on a non-object in D:\wamp\www\include\dialog\select_i
- android studio打包签名错误please select the product flavors to build and sign
- jQuery插件 selectToSelect