jQuery滑动条插件JackWeiSlider

                所属分类:输入,?#25945;?拖和放,滑块和旋转

                分享到微?#25490;?#21451;圈
                X
                jQuery滑动条插件JackWeiSlider ie兼容7

                JackWeiSlider

                这是一个jQuery滑动条(Slider)插件,简单易用,自持自定义样式。

                1、函数(Method)

                enable():

                允许鼠标拖动,默认允许。

                disEnable():

                禁止鼠标拖动。

                setText(text):

                设置提示文字,默认显示当前进度百分比。

                setProgress(progress):

                设置初始进度,默认为0.3,?#22402;?#19968;化计算。

                setOnStartDragCallback(callback):

                设置开始拖动事件监听。

                setOnDragCallback(callback):

                设置拖动事件监听,返回当前进度比例。

                setOnStopDragCallback(callback):

                设置停止拖动事件监听。

                2、开发示例

                ?#23548;?#25928;果

                jQuery滑动条(Slider)插件

                <div id="sliderParent" style="padding: 50px;background-color: gray;display: inline-block;">
                var option = {
                    color: 'deepskyblue',
                    width: '400px',
                    progress: 0.3,
                    handleSrc: 'img/slider_handle.png',
                    isCustomText: false
                };
                
                $('#sliderParent')
                    .jackWeiSlider(option)
                    // .setText('2018-4-5 02:39:00')
                    .setProgress(0.6)
                    .setOnStartDragCallback(function() {
                        console.log('start');
                    })
                    .setOnDragCallback(function(p) {
                        console.log(p);
                    })
                    .setOnStopDragCallback(function() {
                        console.log('stop');
                    });
                相关插件-拖和放,滑块和旋转

                基于H5的拖拽功能

                基于H5的拖拽功能,再用jQuery进行了功能完善,拖动后根据放置的位置来布局。
                  拖和放
                 19365  102

                jQuery可任意拖拽排序菜单树机构树

                jQuery可任意拖拽排序菜单树机构树
                  拖和放
                 21980  152

                jquery拖拽插件

                jquery拖拽排序插件,和别的拖拽插件不同这个一次只能拖动到临近的位置。
                  拖和放
                 15944  93

                鼠标轨迹跟随

                鼠标轨迹跟随
                  拖和放
                 19473  87

                讨论这个项目(14)回答他人问题或分享插件使用方法奖励jQ币

                  CC你这?#21453;?#39540; 0
                  2019/4/3 14:27:49
                  就没有人实例多个的吗 回复
                  helloworldZhong 0
                  2019/1/2 15:19:52
                  楼主想问一下 使用多个滚动条 一个变化 其他都跟着变化 怎么决绝
                      wnn13020
                      2019/3/8 13:28:52
                      https://github.com/wnn1302/JackWeiSlider,最新版本已解决
                  回复
                  天晓 0
                  2018/11/7 18:17:14
                  实例化多个滑动条后 滑动其中一个其他的也滑动??
                      CC你这?#21453;?#39540;0
                      2019/4/3 14:26:02
                      解决了吗 怎么实例多个呀
                  回复
                  dreamsqin 0
                  2018/9/6 16:44:30
                  个人感觉是:
                  按钮的位置?#35272;?#20102;鼠标的位置,
                  再加?#19979;?#20027;设置了上下限,
                  所以快速拉动的时候超出限制不能达到100%,
                  如果速度再快一点甚至会直接卡在中间~ 回复
                  fjh82083968 0
                  2018/8/22 10:54:29
                  请问这个如何移除$('#sliderParent')上的事件呢? 回复
                  那只是过去... 0
                  2018/8/20 13:02:48
                  坑,手机端不能用,研究了一上午居然让我 回复
                  戒 爱♀ 0
                  2018/8/16 11:32:40
                  不?#35270;?#25163;机端 回复
                  leoxsc 0
                  2018/8/13 17:18:37
                  有个漏洞就是快速将滑块拉到最左端或最右端,无法回到0%和100%
                      不忘初心0
                      2018/8/15 14:40:44
                      这个是移出了灰色背景区域,设置一下就好了
                      fjh820839680
                      2018/8/21 14:01:05
                      这个请问需要怎么设置啊??
                      境界1
                      2018/10/22 19:35:13
                      把jackwei.slider.js代码中的左右限制判断语句“超限return”换成“超限后?#25345;?#20026;上限值”即可
                      帝光的赤司君,0
                      2018/12/10 11:39:40
                      给哪个值?#25345;擔浚浚?br>
                  回复
                取消回复
                  短信接口
                快3倍投资金计划