zoukankan      html  css  js  c++  java
  • jQuery UI Slider(滑块)

     1 <!doctype html>
     2 <html lang="en">
     3 <head>
     4   <meta charset="utf-8">
     5   <title>jQuery UI 滑块(Slider) - 颜色选择器</title>
     6   <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
     7   <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
     8   <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
     9   <link rel="stylesheet" href="jqueryui/style.css">
    10   <style>
    11   #red, #green, #blue {
    12     float: left;
    13     clear: left;
    14      300px;
    15     margin: 15px;
    16   }
    17   #swatch {
    18      120px;
    19     height: 100px;
    20     margin-top: 18px;
    21     margin-left: 350px;
    22     background-image: none;
    23   }
    24   #red .ui-slider-range { background: #ef2929; }
    25   #red .ui-slider-handle { border-color: #ef2929; }
    26   #green .ui-slider-range { background: #8ae234; }
    27   #green .ui-slider-handle { border-color: #8ae234; }
    28   #blue .ui-slider-range { background: #729fcf; }
    29   #blue .ui-slider-handle { border-color: #729fcf; }
    30   </style>
    31   <script>
    32   function hexFromRGB(r, g, b) {
    33     var hex = [
    34       r.toString( 16 ),
    35       g.toString( 16 ),
    36       b.toString( 16 )
    37     ];
    38     $.each( hex, function( nr, val ) {
    39       if ( val.length === 1 ) {
    40         hex[ nr ] = "0" + val;
    41       }
    42     });
    43     return hex.join( "" ).toUpperCase();
    44   }
    45   function refreshSwatch() {
    46     var red = $( "#red" ).slider( "value" ),
    47       green = $( "#green" ).slider( "value" ),
    48       blue = $( "#blue" ).slider( "value" ),
    49       hex = hexFromRGB( red, green, blue );
    50     $( "#swatch" ).css( "background-color", "#" + hex );
    51   }
    52   $(function() {
    53     $( "#red, #green, #blue" ).slider({
    54       orientation: "horizontal",
    55       range: "min",
    56       max: 255,
    57       value: 127,
    58       slide: refreshSwatch,
    59       change: refreshSwatch
    60     });
    61     $( "#red" ).slider( "value", 255 );
    62     $( "#green" ).slider( "value", 140 );
    63     $( "#blue" ).slider( "value", 60 );
    64   });
    65   </script>
    66 </head>
    67 <body class="ui-widget-content" style="border:0;">
    68  
    69 <p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
    70   <span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span>
    71   简单的颜色选择器
    72 </p>
    73  
    74 <div id="red"></div>
    75 <div id="green"></div>
    76 <div id="blue"></div>
    77  
    78 <div id="swatch" class="ui-widget-content ui-corner-all"></div>
    79  
    80  
    81 </body>
    82 </html>
    View Code

    官网

    其余的就不写了,菜鸟写的很详细

  • 相关阅读:
    javascript 获取event
    IE与火狐下兼容(阻止冒泡事件)
    IE和FireFox中JS兼容之event
    不同浏览器中childNodes获取子节点个数
    文档结构和遍历
    爬取拉钩Java招聘数据
    爬取糗事百科的图片
    爬虫框架scrapy安装
    会爬电影神器,是一种什么样的体验,你懂得!!!!!!!
    利用Python的unittest单元测试框架的discover方法批量执行脚本用例
  • 原文地址:https://www.cnblogs.com/Cein/p/7122697.html
Copyright © 2011-2022 走看看