当前位置：首页 > 行业动态 > 正文

Bootstrap Slider CDN如何使用及常见问题解答？

“ html，，，“

Bootstrap Slider CDN使用详解

一、简介

Bootstrap Slider 是一款基于 Bootstrap 的开源滑块插件，提供了丰富的功能和灵活的配置选项，使得开发者可以轻松地在网页中集成滑块控件，该插件支持多种浏览器，并且具有易用性、灵活性和兼容性等特点。

二、CDN引入方式

要使用 Bootstrap Slider，首先需要通过 CDN 引入相关的 CSS 和 JavaScript 文件，以下是使用国内 CDN 库引入 Bootstrap 和 Bootstrap Slider 的方法：

1、酷盾安全 CDN

CSS 文件：<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

JavaScript 文件：<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> 和<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Bootstrap Slider CSS 文件：<link href="https://cdn.bootcss.com/bootstrap-slider/9.4.1/css/bootstrap-slider.css" rel="stylesheet">

Bootstrap Slider JavaScript 文件：<script src="https://cdn.bootcss.com/bootstrap-slider/9.4.1/bootstrap-slider.min.js"></script>

2、阿里云 CDN

CSS 文件：<link href="https://lib.baomitu.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

JavaScript 文件：<script src="https://lib.baomitu.com/jquery/1.12.4/jquery.min.js"></script> 和<script src="https://lib.baomitu.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Bootstrap Slider CSS 文件：<link href="https://lib.baomitu.com/bootstrap-slider/9.4.1/css/bootstrap-slider.css" rel="stylesheet">

Bootstrap Slider JavaScript 文件：<script src="https://lib.baomitu.com/bootstrap-slider/9.4.1/bootstrap-slider.min.js"></script>

3、七牛云 CDN

CSS 文件：<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

JavaScript 文件：<script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script> 和<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

Bootstrap Slider CSS 文件：<link href="https://cdn.staticfile.org/bootstrap-slider/9.4.1/css/bootstrap-slider.css" rel="stylesheet">

Bootstrap Slider JavaScript 文件：<script src="https://cdn.staticfile.org/bootstrap-slider/9.4.1/bootstrap-slider.min.js"></script>

三、基本用法示例

以下是一个简单的示例，展示了如何使用 Bootstrap Slider：

1、HTML 部分

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>Bootstrap Slider 示例</title>
       <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
       <link href="https://cdn.bootcss.com/bootstrap-slider/9.4.1/css/bootstrap-slider.css" rel="stylesheet">
       <style>
           #ex1Slider .slider-selection {
               background: #BABABA;
           }
       </style>
   </head>
   <body>
       <input id="ex1" data-slider-id="ex1Slider" type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="15"/>
       <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
       <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
       <script src="https://cdn.bootcss.com/bootstrap-slider/9.4.1/bootstrap-slider.min.js"></script>
       <script>
           $(document).ready(function() {
               $('#ex1').slider({
                   formatter: function (value) {
                       return 'Current value: ' + value;
                   }
               }).on('slide', function (slideEvt) {
                   // 当滚动时触发
                   console.info(slideEvt);
               }).on('change', function (e) {
                   // 当值发生改变的时候触发
                   console.info(e.value.oldValue + '--' + e.value.newValue);
               });
           });
       </script>
   </body>
   </html>

2、解释

引入文件：在 HTML 的<head> 部分，通过 CDN 引入了 Bootstrap 和 Bootstrap Slider 的 CSS 和 JavaScript 文件。

样式定义：在<style> 标签中，为滑块的选择区域定义了背景颜色。

滑块输入框：在<body> 部分，创建了一个<input> 元素作为滑块的输入框，并通过data 属性设置了滑块的最小值、最大值、步长和初始值。

初始化滑块：在<script> 标签中，使用 jQuery 初始化滑块，并绑定了slide 和change 事件，当滑块滚动或值改变时，会在控制台输出相关信息。

四、配置参数说明

Bootstrap Slider 提供了丰富的配置参数，可以通过data 属性或 JavaScript 对象的方式进行设置，以下是一些常用的配置参数及其说明：

参数名称 参数类型 默认值 描述
id string ” 设置滑块元素的 ID
min float 0 滑块允许的最小值
max float 10 滑块允许的最大值
step float 1 滑块的步长
precision float 滑块数值的精度（小数位数）
orientation string ‘horizontal’ 滑块的方向，可选值为 ‘vertical’ 或 ‘horizontal’
value float, array 5 滑块的初始值，设置为数组表示一个范围
range bool false 是否设置一个范围滑块
selection string ‘before’ 选择配置，接收 ‘before’, ‘after’ 或 ‘none’，在范围滑块中，selection 被放置在两个手柄中间
tooltip string ‘show’ 在拖动手柄时是否显示 tooltip，隐藏 tooltip，或者总是显示 tooltip，可选值：’show’, ‘hide’ 或 ‘always’
tooltip_split bool false 如果为 true，显示两个 tooltip，每个手柄显示一个
handle string ’round’ 手柄的形状，可选值：’round’, ‘square’, ‘triangle’ 或 ‘custom’
reversed bool false 滑块是否反向
enabled bool true 滑块是否可用
formatter function 回调函数，返回想在 tooltip 中显示的文字
natural_arrow_keys bool false 是否允许使用键盘的方向键来控制滑块，默认情况下，right/up 键是滑块数值增大，left/down 键使滑块数值减少

五、方法说明

Bootstrap Slider 提供了一些方法，用于操作滑块的行为，以下是一些常用的方法及其说明：

方法名称 参数 描述
getValue 获取滑块的当前值
setValue newValue, triggerSlideEvent 为滑块设置一个新值，如果triggerSlideEvent 为 true，将触发slide 事件
destroy 销毁滑块实例，恢复原始的 元素

六、与 jQuery UI 结合使用

我们可能需要将 Bootstrap Slider 与 jQuery UI 的其他组件结合使用，以下是一个在对话框中使用 Bootstrap Slider 的示例：

1、HTML 部分

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>Bootstrap Slider 与 jQuery UI 结合示例</title>
       <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
       <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
       <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-slider/9.4.1/css/bootstrap-slider.css">
       <style>
           #dialog { display: none; }
       </style>
   </head>
   <body>
       <button id="open-dialog">打开对话框</button>
       <div id="dialog" title="对话框">
           <input id="slider" type="text" data-provide="slider" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50">
       </div>
       <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
       <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
       <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
       <script src="https://cdn.bootcss.com/bootstrap-slider/9.4.1/bootstrap-slider.min.js"></script>
       <script>
           $(document).ready(function() {
               $('#dialog').dialog({
                   autoOpen: false,
                   width: 400,
                   buttons: {
                       "关闭": function() {
                           $(this).dialog("close");
                       }
                   },
                   open: function() {
                       $('#slider').slider();
                   }
               });
               $('#open-dialog').click(function() {
                   $('#dialog').dialog("open");
               });
           });
       </script>
   </body>
   </html>

2、解释

引入文件：在 HTML 的<head> 部分，通过 CDN 引入了 jQuery、jQuery UI、Bootstrap 和 Bootstrap Slider 的 CSS 和 JavaScript 文件。

对话框和滑块：在<body> 部分，创建了一个按钮用于打开对话框，以及一个包含滑块输入框的对话框，通过data-provide="slider" 属性自动初始化滑块。

初始化对话框：在<script> 标签中，使用 jQuery UI 初始化对话框，并设置相关属性，在对话框打开时，初始化滑块插件，当点击按钮时，打开对话框。

七、相关问题与解答

1、问题：如何更改滑块的样式？

回答：可以通过自定义 CSS 来更改滑块的样式，可以修改滑块选择区域的背景颜色、手柄的形状等，也可以通过配置参数中的handle、orientation 等选项来调整滑块的外观。

2、问题：如何在滑块的值改变时执行某些操作？

回答：可以为滑块绑定change 事件，当滑块的值发生改变时，会触发该事件，在事件处理函数中，可以执行相应的操作，如发送数据到服务器、更新页面上的其他元素等。

0

相关文章