《layui宇宙版教程》：滑块slider

最新推荐文章于 2023-09-01 10:19:07 发布
最新推荐文章于 2023-09-01 10:19:07 发布
阅读量1.8k 收藏
点赞数
分类专栏： Layui宇宙版教程 文章标签： layui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ghyghost/article/details/108116181
版权

《Layui宇宙版教程》提供2000人的QQ群进行交流学习，QQ群号：1046961650，或通过手机QQ扫描二维码进入：

 

1.28 滑块slider

作为一个拖拽式的交互性组件，滑块往往能给产品带来更好的操作体验。

模块加载名称：slider。

1.28.1 快速使用

通过对slider模块的使用，可以在页面构建出可拖动的滑动元素，如下代码是一个最基本的用法。

 

　　测试代码如下：

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body style="padding: 10px;">

       <br />

       <br />

        <div id="slideTest1"></div>

       <script>

           var slider = layui.slider;

           //渲染

           slider.render({

              elem: '#slideTest1' //绑定元素

           });

       </script>

    </body>

</html>

 

    运行效果如图1-xx所示。

 

1.28.2 基础参数

支持的基础参数如图1-xx所示。

 

1.28.3 属性type

　　测试代码如下：

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body style="padding: 10px;">

       <br />

       <br />

       <div id="slideTest1"></div>

       <br />

       <br />

       <br />

       <br />

       <div id="slideTest2"></div>

       <script>

           var slider = layui.slider;

           slider.render({

              elem: '#slideTest1',

              type: "default"

           });

           slider.render({

              elem: '#slideTest2',

              type: "vertical"

           });

       </script>

    </body>

</html>

 

    运行效果如图1-xx所示。

 

1.28.4 属性min和max

　　测试代码如下：

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body style="padding: 10px;">

       <br />

       <br />

       <div id="slideTest1"></div>

       <script>

           var slider = layui.slider;

           slider.render({

              elem: '#slideTest1',

              min: 30,

              max: 90

           });

       </script>

    </body>

</html>

 

1.28.5 属性range

　　测试代码如下：

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body style="padding: 10px;">

       <br />

       <br />

       <div id="slideTest1"></div>

       <script>

           var slider = layui.slider;

           slider.render({

              elem: '#slideTest1',

              range: true

           });

       </script>

    </body>

</html>

 

    运行效果如图1-xx所示。

 

1.28.6 属性value

　　测试代码如下：

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body style="padding: 10px;">

       <br />

       <br />

       <div id="slideTest1"></div>

       <br />

       <br />

       <br />

       <div id="slideTest2"></div>

       <script>

           var slider = layui.slider;

           slider.render({

              elem: '#slideTest1',

              range: true,

              value: [50, 60]

           });

           slider.render({

              elem: '#slideTest2',

              value: 50

           });

       </script>

    </body>

</html>

 

    运行效果如图1-xx所示。

 

1.28.7 属性step

　　测试代码如下：

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body style="padding: 10px;">

       <br />

       <br />

       <div id="slideTest1"></div>

       <script>

           var slider = layui.slider;

           slider.render({

              elem: '#slideTest1',

              step: 10

           });

        </script>

    </body>

</html>

 

1.28.8 属性showstep

　　测试代码如下：

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body style="padding: 10px;">

       <br />

       <br />

       <div id="slideTest1"></div>

       <script>

           var slider = layui.slider;

           slider.render({

              elem: '#slideTest1',

              step: 10,

              showstep: true

           });

       </script>

    </body>

</html>

 

    运行效果如图1-xx所示。

 

1.28.9 属性tips

　　测试代码如下：

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

        <script src="layui/layui.all.js"></script>

    </head>

    <body style="padding: 10px;">

       <br />

       <br />

       <div id="slideTest1"></div>

       <script>

           var slider = layui.slider;

           slider.render({

              elem: '#slideTest1',

              tips: false

           });

       </script>

    </body>

</html>

 

1.28.10 属性input

　　测试代码如下：

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body style="padding: 10px;">

       <br />

       <br />

       <div id="slideTest1"></div>

       <script>

           var slider = layui.slider;

           slider.render({

              elem: '#slideTest1',

              input: true

           });

       </script>

    </body>

</html>

 

    运行效果如图1-xx所示。

 

1.28.11 属性height

　　测试代码如下：

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body style="padding: 10px;">

       <br />

       <br />

       <div id="slideTest1"></div>

       <script>

           var slider = layui.slider;

           slider.render({

              elem: '#slideTest1',

              type: "vertical",

              height: 500

           });

       </script>

    </body>

</html>

 

1.28.12 属性disabled

　　测试代码如下：

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

        <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body style="padding: 10px;">

       <br />

       <br />

       <div id="slideTest1"></div>

       <script>

           var slider = layui.slider;

           slider.render({

              elem: '#slideTest1',

              value: 50,

              disabled: true

           });

       </script>

    </body>

</html>

 

    运行效果如图1-xx所示。

 

1.28.13 属性theme

　　测试代码如下：

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body style="padding: 10px;">

       <br />

       <br />

       <div id="slideTest1"></div>

       <script>

           var slider = layui.slider;

           slider.render({

              elem: '#slideTest1',

              value: 50,

              theme: "red"

           });

       </script>

    </body>

</html>

 

    运行效果如图1-xx所示。

 

1.28.14 自定义提示文本

当鼠标放在圆点和滑块拖拽时均会触发提示层。其默认显示的文本是它的对应数值，也可以自定义提示内容。

 

　　测试代码如下：

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body style="padding: 10px;">

       <br />

       <br />

       <div id="slideTest1"></div>

       <script>

           var slider = layui.slider;

           slider.render({

              elem: '#slideTest1',

              setTips: function(value) { //自定义提示文本

                  return "百分比：" + value + '%';

               }

           });

       </script>

    </body>

</html>

 

    运行效果如图1-xx所示。

 

1.28.15 数值改变的回调

在滑块数值被改变时触发。该回调非常重要，可动态获得滑块当前的数值。可以将得到的数值赋值给隐藏域或者进行一些其它操作。

 

　　测试代码如下：

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body style="padding: 10px;">

       <br />

       <br />

       <div id="slideTest1"></div>

       <br />

       <br />

       <br />

       <div id="slideTest2"></div>

       <script>

           var slider = layui.slider;

           //当滑块为普通模式，回调返回的value是一个数值

           slider.render({

              elem: '#slideTest1',

              change: function(value) {

                  console.log(value) //动态获取滑块数值

                  //do something

              }

           });

 

           //当滑块为范围模式，回调返回的value是一个数组，包含开始和结尾

           slider.render({

              elem: '#slideTest2',

              range: true,

              change: function(value) {

                  console.log(value[0]) //得到开始值

                  console.log(value[1]) //得到结尾值

                  //do something

              }

           });

       </script>

    </body>

</html>

 

1.28.16 实例方法

执行slider实例时会返回一个当前实例的对象，里面包含针对当前实例的方法和属性。

语法：var ins1 = slider.render(options);

    实例方法和属性如图1-xx所示。

 

1.28.17 动态改变滑块数值

可以通过外部方法动态改变滑块数值。

　　

测试代码如下：

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body style="padding: 10px;">

       <br />

       <br />

       <div id="slideTest1"></div>

       <br />

       <br />

       <br />

       <div id="slideTest2"></div>

       <br />

       <br />

       <br />

       <input type="button" value="button1" id="button1">

       <br />

       <input type="button" value="button2" id="button2">

       <script>

           var slider = layui.slider;

           //当滑块为普通模式，回调返回的value是一个数值

           var ins1 = slider.render({

              elem: '#slideTest1'

           });

 

           //当滑块为范围模式，回调返回的value是一个数组，包含开始和结尾

           var ins2 = slider.render({

              elem: '#slideTest2',

              range: true

           });

 

           $(document).ready(function() {

              $("#button1").click(function() {

                  ins1.setValue(20)

              });

              $("#button2").click(function() {

                  //若滑块开启了范围（range: true）

                  ins2.setValue(20, 0) //设置开始值

                  ins2.setValue(60, 1) //设置结尾值

              });

           });

       </script>

    </body>

</html>

 

    运行效果如图1-xx所示。

 

立志做一个佳娃~
关注
专栏目录
前端框架Layui学习四：滑块、评分、轮播、代码修饰器、时间和日期选择器
zhengzaifeidelushang的博客
07-16 695
layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，拿来即用。
layui框架学习（29：滑块模块）
gc_2299的博客
06-27 711
学习并记录layui框架中内置模块的滑块模块的函数、参数设置方式。
【layui-slider】滑块应用实例
m0_46953020的博客
03-24 657
我这写的属性都是一些常用的，根据自己需要设置属性 <div id="slide_div"></div> slider.render({//滑块 elem: "#slide_div", //绑定元素 type: 'default', //滑块类型，可选值有：default（水平滑块）、vertical（垂直滑块）,默认 default min: 0, //滑动条最小值，正整数，默认为 0
LayUI中的内置模块之 滑块文档 - layui.slider
daimeijin的博客
08-15 2136
前言 最近在准备找工作的事项，但是作为一个后台也是需要了解一些前端框架的。就目前的来说有大火的VUE，但是VUE还是存在一定的学习成本，所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手，后面会考虑使用VUE+ElementUI做一个大型一点的SAAS系统。查阅资料后得到如下文章，作为学习记录使用。 滑块文档 作为一个拖拽式的交互性组件，滑块往往能给产品带来更好的操作体验。layui 深以为然，slider 模块包含了你能想到的大部分功能，尽管它可以作为一个独立的个体，但很多时候它往往会出现 f
Layui的滑块
weixin_44543131的博客
06-28 3176
1:引用layui的css和js： 2：在页面上放一个div，用来示范，给这个div一个ID：‘slideTest1’，然后可以写一些样式，比如让它距离上边距20%，左右居中：margin: 20% auto；宽80%，高20px等等； <div id="slideTest1" style="margin: 20% auto;width: 80%;height: 20px;">&l...
Layui-滑块
weixin_54668937的博客
12-19 1628
文献种类：专题技术文献； 开发工具与关键技术： VS、JS 作者：方建恒 ；年级：20级 ；撰写时间： 2021 年 12 月 18日 Layui-滑块 今天我们来将一下Layui插件里的滑块模块。 作为一个拖拽式的交互性组件，滑块往往能给产品带来更好的操作体验。 接下来我们先来看一下Layui插件里的滑块模块的基础使用， 首先老样子我们先把Layui的JS和CSS引入。 然后创建一个div用来充当放置滑块的容器，如图： 在script部分加载出Layui插件里的滑块模块， 然后对滑
使用layui滑块slider遇到问题解决：1、加标尺2、兼容移动端拖拽1、多个滑块使用赋值4、切换箭头赋值问题
zcc的博客
07-11 2156
点击总控制单个滑块后，点击单个的上下箭头值不对，加上 inputValue = sliderTxt.children('.' + SLIDER_INPUT_TXT).children('input').val();3、设置滑块值，得到实例对象可以通过以下代码设置值，但是我动态创建的slider要怎么用变量接，难道定义多个变量吗，最后我是把渲染的滑块实例对象放到了数组中。4、我在点击总滑块时会给滑块123同时赋值改变，但是再点击某个分滑块的上下箭头时，滑块值不对，会根据上次的值修改。
layui slider滑块用法详解,获取值,赋值,初始化等方法,以及回调注意事项
u013931283的博客
03-03 4506
详细参考该篇文章(复制下方地址到浏览器上访问) http://www.shagua.wiki/project/3?p=99 挺好的,总结的很详细,收藏下来以后备用
Axure9 教程：滑块控制图片放大缩小效果.docx
05-30
在本教程中，我们将学习如何使用Axure9创建一个滑块控制图片放大缩小的效果，这是一个常见于网站编辑功能中的交互设计。首先，我们要理解这个效果的主要目标：通过滑动一个滑块来改变图片的大小，使得用户能够方便地...
jquery.layer_slider:Layers Slider-jQuery插件
05-06
GLS滑块 G层滑块 G（MOS）层滑块是一个简单的jQuery插件，它扩展了jQuery（$）对象并提供了大量的自定义选项，包括动画和定时。 该插件使用css库Animate.css为其动画样式。 使用过的技术 [Animate.css]（ ＃@许可证##版权所有:copyright:2014 GHAP。 根据MIT许可获得许可
LayerSlider 6.5.7; 响应WordPress的滑块插件
02-07
LayerSlider WordPress的插件功能 超级流畅的硬件加速CSS3转换与jQuery后备 充分响应和多个布局支持 与旧浏览器的许多后备功能兼容性高 延迟加载图像以获得更好的性能 无限数量的图层，视频，音频，文本或自定义HTML内容 强大的API更多的定制 SEO友好 多个滑块可以添加在同一页面上 包括免费幻灯片转换画廊 非常详细的文档与例子 使用的无限变化（图像滑块，带有文本的图像滑块，内容滑块，视频库滑块，混合内容滑块，横幅旋转器，旋转木马等）
slim-slider:Slim Slider 是一个小型的 WordPress 滑块插件
08-05
Slim Slider 插件是一个简单的 WordPress 滑块插件，允许您使用简单的短代码在帖子和页面中添加滑块。 [slim_slider] 安装 通过 WordPress 管理员安装。 WordPress admin 安装快速且简单。 插件可以通过内置插件...
layui滑块
zhouzhou_98的博客
10-02 3276
滑块 相关属性 elem ：绑定页面元素 value 设置初始值 min 最小值 max 最大值 step 设置步长 setTips 滑动时是否显示tips文本 change 监听改变事件 <%-- Created by IntelliJ IDEA. User: Lenovo Date: 2019/10/2 Time: 15:3...
通过layui组件的滑动块实现控制图片放大缩小功能！
qishinihenhao的专栏
01-23 2317
先看效果图 html 代码：创建滑块   &lt;div id="slideys" class="demo-slider"&gt;&lt;/div&gt;   //javascript 代码 var ysw = 0;   //记录图片原始宽度 var ysh = 0;   //记录图片原始高度 var setimgpath = ""; layui.use('slider', fu...
layui slider(滑块)初始化与事件监听
佳佳鸽的博客
03-19 1651
layui slider(滑块)事件监听（节选）： html部分： 首先在对应位置，直接插入一个滑块对应的id号 <div id="my_slider"></div> JS部分： 通过id号，进行滑块的初始化与监听： layui.slider.render({ elem:'#my_slider' ,value:50 ,input:true ,min:2800 ,max:6500 ,change: function(val){
layui 横向滑动块不显示问题
weixin_43648083的博客
08-05 1025
layui
layui的 的silder为什么拖拽不了啦
肖肖肖丽珠的博客
06-20 2039
https://www.layui.com/doc/modules/slider.html#change官网silder的介绍 情景是这样的。我新增时有个拖拽的滑块，编辑时能修改这个滑块。 我就写了一个函数让他新增和编辑的时候都调用这个函数.但是好像编辑是好的，新增不好。最后我在新增和编辑里面都重新写了一遍渲染的。并且新增和编辑的slider的class写的不一样的名字。然后就好了。 ...
layui数据表格实现表格中嵌套表格，并且可以折叠展开
最新发布
zongmaomx的博客
09-01 5805
1、最外层的表格先渲染，在done回调中向每个tr后面插入一个用来嵌套子级表格的tr。tr的class和table的id需要用索引 i 关联。3、最后监听箭头显示和隐藏对应的表格。2、插入完成后再渲染所有的子级表格。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值