注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jQuery滑块插件nstSlider

UI fishcity 3998浏览

jQuery滑块插件nstSlider

nstslider是一款功能强大可自定义样式的jquery滑块插件,不是加载进度条哦,nstslider可以实现拖动滑块改变数值,从而实现各种调节参数的功能。nstslider体积轻巧,参数设置灵活,在网站上应用可大大的提高用户体验性。

nstslider的亮点

1、可完全的CSS自定义

2、支持单\双手柄

3、支持触屏

4、兼容IE7以上的主流浏览器

5、自定义数值,可四舍五入

6、非线性直步增量

基础使用方法

引入核心文件,CSS样式由自己定义,这里不多说了。

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="dist/jquery.nstSlider.min.js"></script>

构建html

<div class="slider" data-range_min="-10" data-range_max="100" data-cur_min="20"    data-cur_max="80">
    <div class="bar"></div>
    <div class="leftGrip"></div>
    <div class="rightGrip"></div>
 </div>
 <div class="leftLabel" />
 <div class="rightLabel" />

写入JS,初始化插件

$('.slider').nstSlider({
    "left_grip_selector": ".leftGrip",
    "right_grip_selector": ".rightGrip",
    "value_bar_selector": ".bar",
    "value_changed_callback": function(cause, leftValue, rightValue) {
        $(this).parent().find('.leftLabel').text(leftValue);
        $(this).parent().find('.rightLabel').text(rightValue);
    }
});

转载请注明:jQ酷 » jQuery滑块插件nstSlider

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。