jQuery UI
  • [jQuery UI]jQuery UI 教程
  • [jQuery UI]jQuery UI 简介
  • [jQuery UI]jQuery UI 下载
  • [jQuery UI]jQuery UI 使用
  • [jQuery UI]jQuery UI 定制
  • [jQuery UI]jQuery UI 工作原理
  • [jQuery UI]jQuery UI 主题
  • [jQuery UI]jQuery UI ThemeRoller
  • [jQuery UI]jQuery UI CSS 框架 API
  • [jQuery UI]jQuery UI 设计主题
  • [jQuery UI]jQuery UI 部件库(Widget Factory)
  • [jQuery UI]jQuery UI 通过部件库(Widget Factory)扩展小部件
  • [jQuery UI]jQuery UI 小部件(Widget)方法调用
  • [jQuery UI]jQuery UI 为什么使用部件库(Widget Factory)
  • [jQuery UI]jQuery UI 如何使用部件库(Widget Factory)
  • [jQuery UI]jQuery UI 1.10 API 文档
  • [jQuery UI]jQuery UI API 类别 - 特效(Effects)
  • [jQuery UI]jQuery UI API类别 - 特效核心Effects Core
  • [jQuery UI]jQuery UI API 类别 - 交互Interactions
  • [jQuery UI]jQuery UI API 类别 - 方法重载Method Overrides
  • [jQuery UI]jQuery UI API 类别 - 方法Methods
  • [jQuery UI]jQuery UI API 类别 - 选择器Selectors
  • [jQuery UI]jQuery UI API 类别 - 主题Theming
  • [jQuery UI]jQuery UI API 类别 - UI 核心UI Core
  • [jQuery UI]jQuery UI API 类别 - 实用工具Utilities
  • [jQuery UI]jQuery UI API 类别 - 小部件Widgets
  • [jQuery UI]jQuery UI 实例
  • [jQuery UI]jQuery UI 实例 - 拖动Draggable
  • [jQuery UI]jQuery UI 实例 - 放置Droppable
  • [jQuery UI]jQuery UI 实例 - 缩放Resizable
  • [jQuery UI]jQuery UI 实例 - 选择Selectable
  • [jQuery UI]jQuery UI 实例 - 排序Sortable
  • [jQuery UI]jQuery UI 实例 - 折叠面板Accordion
  • [jQuery UI]jQuery UI 实例 - 自动完成Autocomplete
  • [jQuery UI]jQuery UI 实例 - 按钮Button
  • [jQuery UI]jQuery UI 实例 - 日期选择器Datepicker
  • [jQuery UI]jQuery UI 实例 - 对话框Dialog
  • [jQuery UI]jQuery UI 实例 - 菜单Menu
  • [jQuery UI]jQuery UI 实例 - 进度条Progressbar
  • [jQuery UI]jQuery UI 实例 - 滑块Slider
  • [jQuery UI]jQuery UI 实例 - 旋转器Spinner
  • [jQuery UI]jQuery UI 实例 - 标签页Tabs
  • [jQuery UI]jQuery UI 实例 - 工具提示框Tooltip
  • [jQuery UI]jQuery UI 实例 - 特效Effect
  • [jQuery UI]jQuery UI 实例 - 显示Show
  • [jQuery UI]jQuery UI 实例 - 隐藏Hide
  • [jQuery UI]jQuery UI 实例 - 切换Toggle
  • [jQuery UI]jQuery UI 实例 - 添加Class-Add Class
  • [jQuery UI]jQuery UI 实例 - 移除 Class-Remove Class
  • [jQuery UI]jQuery UI 实例 - 切换Class-Toggle Class
  • [jQuery UI]jQuery UI 实例 - 转换Class-Switch Class
  • [jQuery UI]jQuery UI 实例 - 颜色动画Color Animation
  • [jQuery UI]jQuery UI 实例 - 定位Position
  • [jQuery UI]jQuery UI 实例 - 部件库Widget Factory
  • 直达腾讯云服务器
    腾讯云服务器,数据库,短信等热销产品限量秒杀;新购爆款3折起;
    腾讯云数据库MySQL入门机型仅12元/月
    腾讯云云服务器新购特惠,最低2折起,1核1G3年仅794.73元,即0.73元/日。
    腾讯云国际顶级CA机构SSL证书8.8折,云解析买一年最高送半年!
    腾讯云为数百万企业和开发者提供安全、稳定的云服务器、云数据库、CDN等云服务
    腾讯云服务器安全可靠高性能,多种配置供您选择
    腾讯云数据库性能卓越稳定可靠,为您解决数据库运维难题
    阿里云服务器入口
    180天免费用腾讯云服务器马上领取
    您当前位置:狗鱼MySQL教程 >> javaScript >> jQuery UI >> jQuery UI 实例 - 滑块Slider
    jQuery UI 实例 - 滑块(Slider)
    更新日期: 2017年07月21日 来源: 本站原创 作者: 佚名 阅读:
    上一篇jQuery UI 实例 - 进度条Progressbar 下一篇:jQuery UI 实例 - 旋转器Spinner

    jQuery UI 实例 - 滑块(Slider)

    拖动手柄来选择一个数值。

    如需了解更多有关 slider 部件的细节,请查看 API 文档 滑块部件(Slider Widget)。

    默认功能

    基本的滑块是水平的,有一个单一的手柄,可以用鼠标或箭头键进行移动。

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jquery ui 滑块(Slider) - 默认功能</title>
      <link rel="stylesheet"
     href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.9.1.js"></script>
      <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
      <script>
      $(function() {
        $( "#slider" ).slider();
      });
      </script>
    </head>
    <body>
     
    <div id="slider"></div>
     
     
    </body>
    </html>
    

    查看演示

    颜色选择器

    组合了三个滑块,来创建一个简单的 RGB 颜色选择器。

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI 滑块(Slider) - 颜色选择器</title>
      <link rel="stylesheet" 
    href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.9.1.js"></script>
      <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
      <style>
      #red, #green, #blue {
        float: left;
        clear: left;
        width: 300px;
        margin: 15px;
      }
      #swatch {
        width: 120px;
        height: 100px;
        margin-top: 18px;
        margin-left: 350px;
        background-image: none;
      }
      #red .ui-slider-range { background: #ef2929; }
      #red .ui-slider-handle { border-color: #ef2929; }
      #green .ui-slider-range { background: #8ae234; }
      #green .ui-slider-handle { border-color: #8ae234; }
      #blue .ui-slider-range { background: #729fcf; }
      #blue .ui-slider-handle { border-color: #729fcf; }
      </style>
      <script>
      function hexFromRGB(r, g, b) {
        var hex = [
          r.toString( 16 ),
          g.toString( 16 ),
          b.toString( 16 )
        ];
        $.each( hex, function( nr, val ) {
          if ( val.length === 1 ) {
            hex[ nr ] = "0" + val;
          }
        });
        return hex.join( "" ).toUpperCase();
      }
      function refreshSwatch() {
        var red = $( "#red" ).slider( "value" ),
          green = $( "#green" ).slider( "value" ),
          blue = $( "#blue" ).slider( "value" ),
          hex = hexFromRGB( red, green, blue );
        $( "#swatch" ).css( "background-color", "#" + hex );
      }
      $(function() {
        $( "#red, #green, #blue" ).slider({
          orientation: "horizontal",
          range: "min",
          max: 255,
          value: 127,
          slide: refreshSwatch,
          change: refreshSwatch
        });
        $( "#red" ).slider( "value", 255 );
        $( "#green" ).slider( "value", 140 );
        $( "#blue" ).slider( "value", 60 );
      });
      </script>
    </head>
    <body class="ui-widget-content" style="border:0;">
     
    <p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
      <span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span>
      简单的颜色选择器
    </p>
     
    <div id="red"></div>
    <div id="green"></div>
    <div id="blue"></div>
     
    <div id="swatch" class="ui-widget-content ui-corner-all"></div>
     
     
    </body>
    </html>
    

    查看演示

    多个滑块

    组合水平的和垂直的滑块,每个都带有各自的选项,来创建一个音乐播放器的 UI。

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI 滑块(Slider) - 多个滑块</title>
      <link rel="stylesheet" 
    href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.9.1.js"></script>
      <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
      <style>
      #eq span {
        height:120px; float:left; margin:15px
      }
      </style>
      <script>
      $(function() {
        // 设置主音量
        $( "#master" ).slider({
          value: 60,
          orientation: "horizontal",
          range: "min",
          animate: true
        });
        // 设置图形均衡器
        $( "#eq > span" ).each(function() {
          // 从标记读取初始值并删除
          var value = parseInt( $( this ).text(), 10 );
          $( this ).empty().slider({
            value: value,
            range: "min",
            animate: true,
            orientation: "vertical"
          });
        });
      });
      </script>
    </head>
    <body>
     
    <p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
      <span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span>
      主音量
    </p>
     
    <div id="master" style="width:260px; margin:15px;"></div>
     
    <p class="ui-state-default ui-corner-all" style="padding:4px;margin-top:4em;">
      <span class="ui-icon ui-icon-signal" style="float:left; margin:-2px 5px 0 0;"></span>
      图形均衡器
    </p>
     
    <div id="eq">
      <span>88</span>
      <span>77</span>
      <span>55</span>
      <span>33</span>
      <span>40</span>
      <span>45</span>
      <span>70</span>
    </div>
     
     
    </body>
    </html>
    

    查看演示

    范围滑块

    设置 range 选项为 true,来获取带有两个拖拽手柄的值的范围。
    手柄之间的控件用不同的背景颜色填充来表示该区间的值是可选择的。

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI 滑块(Slider) - 范围滑块</title>
      <link rel="stylesheet"
     href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.9.1.js"></script>
      <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
      <script>
      $(function() {
        $( "#slider-range" ).slider({
          range: true,
          min: 0,
          max: 500,
          values: [ 75, 300 ],
          slide: function( event, ui ) {
            $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
          }
        });
        $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
          " - $" + $( "#slider-range" ).slider( "values", 1 ) );
      });
      </script>
    </head>
    <body>
     
    <p>
      <label for="amount">价格范围:</label>
      <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
    </p>
     
    <div id="slider-range"></div>
     
     
    </body>
    </html>
    

    查看演示

    带有固定最大值的范围

    固定范围滑块的最大值,用户只能选择最小值。设置 range 选项为 "max"。

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI 滑块(Slider) - 带有固定最大值的范围</title>
      <link rel="stylesheet"
     href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.9.1.js"></script>
      <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
      <script>
      $(function() {
        $( "#slider-range-max" ).slider({
          range: "max",
          min: 1,
          max: 10,
          value: 2,
          slide: function( event, ui ) {
            $( "#amount" ).val( ui.value );
          }
        });
        $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
      });
      </script>
    </head>
    <body>
     
    <p>
      <label for="amount">最小的房间数量:</label>
      <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
    </p>
    <div id="slider-range-max"></div>
     
     
    </body>
    </html>
    

    查看演示

    带有固定最小值的范围

    固定范围滑块的最小值,用户只能选择最大值。设置 range 选项为 "min"。

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI 滑块(Slider) - 带有固定最小值的范围</title>
      <link rel="stylesheet" 
    href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.9.1.js"></script>
      <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
      <script>
      $(function() {
        $( "#slider-range-min" ).slider({
          range: "min",
          value: 37,
          min: 1,
          max: 700,
          slide: function( event, ui ) {
            $( "#amount" ).val( "$" + ui.value );
          }
        });
        $( "#amount" ).val( "$" + $( "#slider-range-min" ).slider( "value" ) );
      });
      </script>
    </head>
    <body>
     
    <p>
      <label for="amount">最大价格:</label>
      <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
    </p>
     
    <div id="slider-range-min"></div>
     
     
    </body>
    </html>
    

    查看演示

    绑定到 select 的滑块

    如何绑定一个滑块到一个已有的 select 元素。
    选择保持可见以便显示变化。当选择改变时,同时更新滑块。

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI 滑块(Slider) - 绑定到 select 的滑块</title>
      <link rel="stylesheet"
     href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.9.1.js"></script>
      <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
      <script>
      $(function() {
        var select = $( "#minbeds" );
        var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
          min: 1,
          max: 6,
          range: "min",
          value: select[ 0 ].selectedIndex + 1,
          slide: function( event, ui ) {
            select[ 0 ].selectedIndex = ui.value - 1;
          }
        });
        $( "#minbeds" ).change(function() {
          slider.slider( "value", this.selectedIndex + 1 );
        });
      });
      </script>
    </head>
    <body>
     
    <form id="reservation">
      <label for="minbeds">最小的床位数</label>
      <select name="minbeds" id="minbeds">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
      </select>
    </form>
     
     
    </body>
    </html>
    

    查看演示

    滑块滚动条

    使用滑块来操作页面上内容的定位。本实例中,它是一个能获取值的滚动条。

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI 滑块(Slider) - 滑块滚动条</title>
      <link rel="stylesheet" 
    href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.9.1.js"></script>
      <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
      <style>
      .scroll-pane { overflow: auto; width: 99%; float:left; }
      .scroll-content { width: 2440px; float: left; }
      .scroll-content-item { width: 100px; height: 100px;
     float: left; margin: 10px; font-size: 3em; line-height: 96px; text-align: center; }
      .scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px; }
      .scroll-bar-wrap .ui-slider { background: none; border:0; height: 2em; margin: 0 auto;  }
      .scroll-bar-wrap .ui-handle-helper-parent { 
    position: relative; width: 100%; height: 100%; margin: 0 auto; }
      .scroll-bar-wrap .ui-slider-handle { top:.2em; height: 1.5em; }
      .scroll-bar-wrap .ui-slider-handle .ui-icon { 
    margin: -8px auto 0; position: relative; top: 50%; }
      </style>
      <script>
      $(function() {
        //滚动面板部分
        var scrollPane = $( ".scroll-pane" ),
          scrollContent = $( ".scroll-content" );
     
        //创建滑块
        var scrollbar = $( ".scroll-bar" ).slider({
          slide: function( event, ui ) {
            if ( scrollContent.width() > scrollPane.width() ) {
              scrollContent.css( "margin-left", Math.round(
                ui.value / 100 * ( scrollPane.width() - scrollContent.width() )
              ) + "px" );
            } else {
              scrollContent.css( "margin-left", 0 );
            }
          }
        });
     
        //追加要处理的图标
        var handleHelper = scrollbar.find( ".ui-slider-handle" )
        .mousedown(function() {
          scrollbar.width( handleHelper.width() );
        })
        .mouseup(function() {
          scrollbar.width( "100%" );
        })
        .append( "<span class='ui-icon ui-icon-grip-dotted-vertical'></span>" )
        .wrap( "<div class='ui-handle-helper-parent'></div>" ).parent();
     
        //由于滑块手柄滚动,改变要隐藏的溢出部分
        scrollPane.css( "overflow", "hidden" );
     
        //根据要滚动距离按比例定义滚动条和手柄的尺寸
        function sizeScrollbar() {
          var remainder = scrollContent.width() - scrollPane.width();
          var proportion = remainder / scrollContent.width();
          var handleSize = scrollPane.width() - ( proportion * scrollPane.width() );
          scrollbar.find( ".ui-slider-handle" ).css({
            width: handleSize,
            "margin-left": -handleSize / 2
          });
          handleHelper.width( "" ).width( scrollbar.width() - handleSize );
        }
     
        //基于滚动内容位置,重置滑块的值
        function resetValue() {
          var remainder = scrollPane.width() - scrollContent.width();
          var leftVal = scrollContent.css( "margin-left" ) === "auto" ? 0 :
            parseInt( scrollContent.css( "margin-left" ) );
          var percentage = Math.round( leftVal / remainder * 100 );
          scrollbar.slider( "value", percentage );
        }
     
        //如果滑块是 100%,且窗口变大,则显示内容
        function reflowContent() {
            var showing = scrollContent.width() + parseInt( 
    scrollContent.css( "margin-left" ), 10 );
            var gap = scrollPane.width() - showing;
            if ( gap > 0 ) {
              scrollContent.css( "margin-left", parseInt( 
    scrollContent.css( "margin-left" ), 10 ) + gap );
            }
        }
     
        //当缩放窗口时改变手柄的位置
        $( window ).resize(function() {
          resetValue();
          sizeScrollbar();
          reflowContent();
        });
        //初始化滚动条大小
        setTimeout( sizeScrollbar, 10 );//safari 超时
      });
      </script>
    </head>
    <body>
     
    <div class="scroll-pane ui-widget ui-widget-header ui-corner-all">
      <div class="scroll-content">
        <div class="scroll-content-item ui-widget-header">1</div>
        <div class="scroll-content-item ui-widget-header">2</div>
        <div class="scroll-content-item ui-widget-header">3</div>
        <div class="scroll-content-item ui-widget-header">4</div>
        <div class="scroll-content-item ui-widget-header">5</div>
        <div class="scroll-content-item ui-widget-header">6</div>
        <div class="scroll-content-item ui-widget-header">7</div>
        <div class="scroll-content-item ui-widget-header">8</div>
        <div class="scroll-content-item ui-widget-header">9</div>
        <div class="scroll-content-item ui-widget-header">10</div>
        <div class="scroll-content-item ui-widget-header">11</div>
        <div class="scroll-content-item ui-widget-header">12</div>
        <div class="scroll-content-item ui-widget-header">13</div>
        <div class="scroll-content-item ui-widget-header">14</div>
        <div class="scroll-content-item ui-widget-header">15</div>
        <div class="scroll-content-item ui-widget-header">16</div>
        <div class="scroll-content-item ui-widget-header">17</div>
        <div class="scroll-content-item ui-widget-header">18</div>
        <div class="scroll-content-item ui-widget-header">19</div>
        <div class="scroll-content-item ui-widget-header">20</div>
      </div>
      <div class="scroll-bar-wrap ui-widget-content ui-corner-bottom">
        <div class="scroll-bar"></div>
      </div>
    </div>
     
     
    </body>
    </html>
    

    查看演示

    对齐增量

    通过把 step 选项设置为一个整数来设置滑块值的增量,通常是滑块最大值的除数。默认增量是 1。

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI 滑块(Slider) - 对齐增量</title>
      <link rel="stylesheet" 
    href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.9.1.js"></script>
      <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
      <script>
      $(function() {
        $( "#slider" ).slider({
          value:100,
          min: 0,
          max: 500,
          step: 50,
          slide: function( event, ui ) {
            $( "#amount" ).val( "$" + ui.value );
          }
        });
        $( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
      });
      </script>
    </head>
    <body>
     
    <p>
      <label for="amount">捐款金额($50 增量):</label>
      <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
    </p>
     
    <div id="slider"></div>
     
     
    </body>
    </html>
    

    查看演示

    垂直的范围滑块

    改变范围滑块的方向为垂直的。
    通过 .height() 分配一个高度值,或通过 CSS 设置高度,同时设置 orientation 选项为 "vertical"。

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI 滑块(Slider) - 垂直的范围滑块</title>
      <link rel="stylesheet"
     href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.9.1.js"></script>
      <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
      <script>
      $(function() {
        $( "#slider-range" ).slider({
          orientation: "vertical",
          range: true,
          values: [ 17, 67 ],
          slide: function( event, ui ) {
            $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
          }
        });
        $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
          " - $" + $( "#slider-range" ).slider( "values", 1 ) );
      });
      </script>
    </head>
    <body>
     
    <p>
      <label for="amount">销售目标(百万):</label>
      <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
    </p>
     
    <div id="slider-range" style="height:250px;"></div>
     
     
    </body>
    </html>
    

    查看演示

    垂直的滑块

    改变滑块的方向为垂直的。
    通过 .height() 分配一个高度值,或通过 CSS 设置高度,同时设置 orientation 选项为 "vertical"。

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI 滑块(Slider) - 垂直的滑块</title>
      <link rel="stylesheet"
     href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.9.1.js"></script>
      <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
      <script>
      $(function() {
        $( "#slider-vertical" ).slider({
          orientation: "vertical",
          range: "min",
          min: 0,
          max: 100,
          value: 60,
          slide: function( event, ui ) {
            $( "#amount" ).val( ui.value );
          }
        });
        $( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) );
      });
      </script>
    </head>
    <body>
     
    <p>
      <label for="amount">体积:</label>
      <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
    </p>
     
    <div id="slider-vertical" style="height:200px;"></div>
     
     
    </body>
    </html>
    

    查看演示

     

    感觉本站内容不错,读后有收获?

    我要小额赞助,鼓励提供更好的内容教程

    上一篇jQuery UI 实例 - 进度条Progressbar 下一篇:jQuery UI 实例 - 旋转器Spinner
    Copyright 2013-2017 Powered by 狗鱼MySQL教程,All Rights Reserved.
    广州相如计算机科技有限有限公司 版权所有 粤ICP备08130661号-4
    售前咨询:020-38667011 手机:13711588918