你的分享就是我们的动力 ---﹥

功能强大的范围选择滑块-jQRangeSlider

时间:2013-05-30 14:42来源:www.chengxuyuans.com 点击:

jQRangeSlider 是一款功能强大的范围选择滑块,支持数值个日期以及其它类型。支持鼠标拖动滑块改变范围。

特点:

1、可选择日期范围

2、支持触屏设备

3、支持调整步长

4、多种主题样式

官 网:http://ghusse.github.io/jQRangeSlider/
Demo:http://ghusse.github.io/jQRangeSlider/demo.html
文 档:http://ghusse.github.io/jQRangeSlider/documentation.html

功能强大的范围选择滑块-jQRangeSlider预览图

11

使用方法

以下是列出的几种不同的滑块样式的整个代码,里面用到的 css 和 js 都可以在源码包中获取到,引用的时候注意路径。也可以参考官方的说明:点击查看

1、基本样式

1

<!DOCTYPE>
  <html>
  <head>
    <meta charset="utf-8"/>
    <title>example</title>
    <link rel="stylesheet" href="css/iThing.css" type="text/css" />
  </head>
  <body>
    <h1>Hello world</h1>
    <div id="slider"></div>
    <script src="jquery.js"></script>
    <script src="jquery-ui.custom.js"></script>
    <script src="jQRangeSlider-min.js"></script>
    <script>
    //<!--
      $("#slider").rangeSlider();
    //-->
    </script>
  </body>
</html>

2、可编辑样式

1

<!DOCTYPE>
  <html>
  <head>
    <meta charset="utf-8"/>
    <title>example</title>
    <link rel="stylesheet" href="css/iThing.css" type="text/css" />
  </head>
  <body>
    <h1>Hello world</h1>
    <div id="slider"></div>
    <script src="jquery.js"></script>
    <script src="jquery-ui.custom.js"></script>
    <script src="jQEditRangeSlider-min.js"></script>
    <script>
    //<!--
      $("#slider").editRangeSlider();
    //-->
    </script>
  </body>
</html>

3、日期滑块

1

<!DOCTYPE>
  <html>
  <head>
    <meta charset="utf-8"/>
    <title>example</title>
    <link rel="stylesheet" href="css/iThing.css" type="text/css" />
  </head>
  <body>
    <h1>Hello world</h1>
    <div id="slider"></div>
    <script src="jquery.js"></script>
    <script src="jquery-ui.custom.js"></script>
    <script src="jQDateRangeSlider-min.js"></script>
    <script>
    //<!--
      $("#slider").dateRangeSlider();
    //-->
    </script>
  </body>
</html>

4、混合样式

可能我们需要在同一个页面中使用多种样式的滑块,而每个样式滑块所引用的 js 是不一样的,所以我们可以将所有的js合成在一起引用到自己的页面中,官方给了我们一个 jQAllRangeSliders-min.js 文件,里面包含了所有的样式的js,懒人型的,这样就不用一个一个去引用了。

<!DOCTYPE>
  <html>
  <head>
    <meta charset="utf-8"/>
    <title>example</title>
    <link rel="stylesheet" href="css/iThing.css" type="text/css" />
  </head>
  <body>
    <h1>Hello world</h1>
    <div id="slider"></div>
    <div id="dateSlider"></div>
    <div id="editSlider"></div>
    <script src="jquery.js"></script>
    <script src="jquery-ui.custom.js"></script>
    <script src="jQAllRangeSliders-min.js"></script>
    <script>
    //<!--
      $("#slider").rangeSlider();
      $("#dateSlider").dateRangeSlider();
      $("#editSlider").editRangeSlider();
    //-->
    </script>
  </body>
</html>
参数配置【以基本样式讲解说明】

 

Arrows

确定显示或者隐藏滑块两边的箭头
1

$("#arrowsExample").rangeSlider({
  arrows:false
});

Bounds

确定数值或日期的范围
1
基本样式代码

$("#boundsExample").rangeSlider({
     bounds:{min: 10, max: 90}
});

日期样式代码

$("#boundsExample").dateRangeSlider({
  bounds:{
    min: new Date(2012, 0, 1),
    max: new Date(2012, 11, 31)
  }});

defaultValues

设置初始化选中的数值范围,这里包含一个最大值和一个最小值
基本样式代码

$("#defaultValuesExample").rangeSlider({
  defaultValues:{min: 10, max: 90}
});

日期样式代码

$("#defaultValuesExample").dateRangeSlider({
  defaultValues:{
    min: new Date(2012, 0, 1),
    max: new Date(2012, 11, 31)
  }});

Delay out

当我们移动完滑块将鼠标移开后,多长时间后滑块上面的两个指示图标消失,仅当 valueLabels 参数设置为 “change” 时有效

$("#delayExample").rangeSlider({
  valueLabels:"change",
  delayOut: 4000
});

Duration in/out

指定小图标消失这个过程所用的时间,仅当 valueLabels 参数设置为 “change” 时有效

$("#durationExample").rangeSlider({
  valueLabels:"change",
  durationIn: 1000,
  durationOut: 1000
});

Formatter

设定数值小图标上面显示的文字格式
1
普通样式代码

$("#formatterExample").rangeSlider({
  formatter:function(val){
        var value = Math.round(val * 5) / 5,
          decimal = value - Math.round(val);
        return decimal == 0 ? value.toString() + ".0" : value.toString();
      }});
});

日期样式代码

$("#formatterExample").dateRangeSlider({
  formatter:function(val){
        var days = val.getDate(),
          month = val.getMonth() + 1,
          year = val.getFullYear();
        return days + "/" + month + "/" + year;
      }});
});

Range

设定选取值的区域的长度范围,有一个最小值和最大值,可以都设置或只设置其中一个
普通样式

$("#rangeExample").rangeSlider({
  range: {min: 10, max: 40}
});

日期样式

$("#rangeExample").dateRangeSlider({
  range:{
    min: {days: 2},
    max: {days: 7}
  }});

时间单位如下:
years
months
weeks
days
hours
minutes
seconds
Scal

Scales

允许我们在滑动块上加上一个直尺来帮助我们取值
1

普通样式代码

$("#rulersExample").rangeSlider({
  scales: [
  // Primary scale
  {
    first: function(val){ return val; },
    next: function(val){ return val + 10; },
    stop: function(val){ return false; },
    label: function(val){ return val; },
    format: function(tickContainer, tickStart, tickEnd){ 
      tickContainer.addClass("myCustomClass");
    }
  },
  // Secondary scale
  {
    first: function(val){ return val; },
    next: function(val){
      if (val % 10 === 9){
        return val + 2;
      }
      return val + 1;
    },
    stop: function(val){ return false; },
    label: function(){ return null; }
  }]
});

1
日期样式代码

var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];
  $("#dateRulersExample").dateRangeSlider({
    bounds: {min: new Date(2012, 0, 1), max: new Date(2012, 11, 31, 12, 59, 59)},
    defaultValues: {min: new Date(2012, 1, 10), max: new Date(2012, 4, 22)},
    scales: [{
      first: function(value){ return value; },
      end: function(value) {return value; },
      next: function(value){
        var next = new Date(value);
        return new Date(next.setMonth(value.getMonth() + 1));
      },
      label: function(value){
        return months[value.getMonth()];
      },
      format: function(tickContainer, tickStart, tickEnd){
        tickContainer.addClass("myCustomClass");
      }
    }]
  });

Step

每次调整滑块的步长

$("#stepExample").rangeSlider({
 step: 10
});

Type

设置滑块上面的调整图标里面的html标签,可选值位:text 和 number。该参数仅在可编辑样式下有用
1

$("#typeExample").editRangeSlider({
  type: "number"
});

valueLabels

设置滑块上面的调整图标的显示模式:show:一直显示 hide:一直隐藏 change:只有当拖动滑块时才显示

$("#valueLabelsExample").rangeSlider({
   valueLabels: "change"
});

wheelMode

允许我们通过滑动鼠标的滚轮来调整滑块的范围

$("#wheelModeExample").rangeSlider({
    wheelMode: "zoom"
});

还有相关的事件和方法,在这里就不详解了,请参考官方的详细文档:文档

转载注明地址:http://www.chengxuyuans.com/jquery_plugin/63192.html