selectToUISlider

来源：互联网发布：点对点带宽测试软件编辑：程序博客网时间：2024/06/03 16:24

用过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 = trueslide: function(e, ui) {//slide functionvar 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。

2 0