JavaScript Tutorial/jQuery/UI Slider

Материал из Web эксперт
Перейти к: навигация, поиск

30. jQuery UI Slider - Colorpicker

<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!doctype html>
<html lang="en">
<head>
  <title>jQuery UI Slider - Colorpicker</title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.slider.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <style type="text/css">
  #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; }
  #demo-frame > div.demo { padding: 10px !important; };
  </style>
  <script type="text/javascript">
  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;">
<div class="demo">
<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>
Simple Colorpicker
</p>
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="swatch" class="ui-widget-content ui-corner-all"></div>
</div><!-- End demo -->
<div class="demo-description" style="clear:left;">
<p>Combine three sliders to create a simple RGB colorpicker.</p>
</div><!-- End demo-description -->
</body>
</html>


30. jQuery UI Slider - Default functionality

<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!doctype html>
<html lang="en">
<head>
  <title>jQuery UI Slider - Default functionality</title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.slider.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <style type="text/css">
    #demo-frame > div.demo { padding: 10px !important; };
  </style>
  <script type="text/javascript">
  $(function() {
    $("#slider").slider();
  });
  </script>
</head>
<body>
<div class="demo">
<div id="slider"></div>
</div><!-- End demo -->
<div class="demo-description">
<p>The basic slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys.</p>
</div><!-- End demo-description -->
</body>
</html>


30. jQuery UI Slider - Multiple sliders

<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!doctype html>
<html lang="en">
<head>
  <title>jQuery UI Slider - Multiple sliders</title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.slider.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <style type="text/css">
    #demo-frame > div.demo { padding: 10px !important; }
    #eq span {
      height:120px; float:left; margin:15px
    }
  </style>
  <script type="text/javascript">
  $(function() {
    // change defaults for range, animate and orientation
    $.extend($.ui.slider.defaults, {
      range: "min",
      animate: true,
      orientation: "vertical"
    });
    // setup master volume
    $("#master").slider({
      value: 60,
      orientation: "horizontal"
    });
    // setup graphic EQ
    $("#eq > span").each(function() {
      // read initial values from markup and remove that
      var value = parseInt($(this).text());
      $(this).empty();
      $(this).slider({
        value: value
      })
    });
  });
  </script>
</head>
<body class="ui-widget-content" style="border:0;">
<div class="demo">
<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>
Master volume
</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>
Graphic EQ
</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>
</div><!-- End demo -->
<div class="demo-description" style="clear:left;">
<p>Combine horizontal and vertical sliders, each with their own options, to create the UI for a music player.</p>
</div><!-- End demo-description -->
</body>
</html>


30. jQuery UI Slider - Range slider

<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!doctype html>
<html lang="en">
<head>
  <title>jQuery UI Slider - Range slider</title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.slider.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <style type="text/css">
    #demo-frame > div.demo { padding: 10px !important; };
  </style>
  <script type="text/javascript">
  $(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>
<div class="demo">
<p>
<label for="amount">Price range:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>
<div id="slider-range"></div>
</div><!-- End demo -->
<div class="demo-description">
<p>Set the <code>range</code> option to true to capture a range of values with two drag handles.  The space between the handles is filled with a different background color to indicate those values are selected.</p>
</div><!-- End demo-description -->
</body>
</html>


30. jQuery UI Slider - Range with fixed maximum

<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!doctype html>
<html lang="en">
<head>
  <title>jQuery UI Slider - Range with fixed maximum</title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.slider.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <style type="text/css">
    #demo-frame > div.demo { padding: 10px !important; };
  </style>
  <script type="text/javascript">
  $(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>
<div class="demo">
<p>
<labe for="amount">Minimum number of bedrooms:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>
<div id="slider-range-max"></div>
</div><!-- End demo -->
<div class="demo-description">
<p>Fix the maximum value of the range slider so that the user can only select a minimum.  Set the <code>range</code> option to "max."</p>
</div><!-- End demo-description -->
</body>
</html>


30. jQuery UI Slider - Range with fixed minimum

<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!doctype html>
<html lang="en">
<head>
  <title>jQuery UI Slider - Range with fixed minimum</title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.slider.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <style type="text/css">
    #demo-frame > div.demo { padding: 10px !important; };
  </style>
  <script type="text/javascript">
  $(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>
<div class="demo">
<p>
<label for="amount">Maximum price:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>
<div id="slider-range-min"></div>
</div><!-- End demo -->
<div class="demo-description">
<p>Fix the minimum value of the range slider so that the user can only select a maximum.  Set the <code>range</code> option to "min."</p>
</div><!-- End demo-description -->
</body>
</html>


30. jQuery UI Slider - Snap to increments

<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!doctype html>
<html lang="en">
<head>
  <title>jQuery UI Slider - Snap to increments</title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.slider.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <style type="text/css">
    #demo-frame > div.demo { padding: 10px !important; };
  </style>
  <script type="text/javascript">
  $(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>
<div class="demo">
<p>
<label for="amount">Donation amount ($50 increments):</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>
<div id="slider"></div>
</div><!-- End demo -->
<div class="demo-description">
<p>Increment slider values with the <code>step</code> option set to an integer, commonly a dividend of the slider"s maximum value.  The default increment is 1.</p>
</div><!-- End demo-description -->
</body>
</html>


30. jQuery UI Slider - Vertical range slider

<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!doctype html>
<html lang="en">
<head>
  <title>jQuery UI Slider - Vertical range slider</title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.slider.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <style type="text/css">
    #demo-frame > div.demo { padding: 10px !important; };
  </style>
  <script type="text/javascript">
  $(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>
<div class="demo">
<p>
<label for="amount">Target sales goal (Millions):</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>
<div id="slider-range" style="height:250px;"></div>
</div><!-- End demo -->
<div class="demo-description">
<p>Change the orientation of the range slider to vertical.  Assign a height value via <code>.height()</code> or by setting the height through CSS, and set the <code>orientation</code> option to "vertical."</p>
</div><!-- End demo-description -->
</body>
</html>


30. jQuery UI Slider - Vertical slider

<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!doctype html>
<html lang="en">
<head>
  <title>jQuery UI Slider - Vertical slider</title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.slider.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <style type="text/css">
    #demo-frame > div.demo { padding: 10px !important; };
  </style>
  <script type="text/javascript">
  $(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>
<div class="demo">
<p>
<label for="amount">Volume:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>
<div id="slider-vertical" style="height:200px;"></div>
</div><!-- End demo -->
<div class="demo-description">
<p>Change the orientation of the slider to vertical.  Assign a height value via <code>.height()</code> or by setting the height through CSS, and set the <code>orientation</code> option to "vertical."</p>
</div><!-- End demo-description -->
</body>
</html>


30. Set step value for slider

<html lang="en">
<head>
  <title></title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.slider.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <script type="text/javascript">
    $(function() {
        var sliderOpts = {
          steps: 10
        };
      
        $("#mySlider").slider(sliderOpts);
    });
  </script>
</head>
<body>
<div id="mySlider"></div>
</body>
</html>


30. Set the max value for slider

<html lang="en">
<head>
  <title></title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.slider.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <script type="text/javascript">
    $(function() {
        var sliderOpts = {
          max: 255,
          steps: 255,
          slide: function(e, ui) {
            var val = $(this).slider("value");
            var id = $(this).attr("id");
            $("#output").text(val);
          }    
        };
        $("#rSlider").slider(sliderOpts);
    });
  </script>
</head>
<body>
    <div id="container">
      <div id="rSlider"></div><br>
      <div id="output">
    </div>
</body>
</html>


30. Slider events: change, slide, start, stop

<html lang="en">
<head>
  <title></title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.slider.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <script type="text/javascript">
    $(function() {
        //create config object
        var sliderOpts = {
          change: function() {
              $("#messageBox").text("The slider"s value has changed");
          },
          slide: function() {
              $("#messageBox").text("The slider is sliding");
          },
          start: function() {
              $("#messageBox").text("The slider has started");
          },
          stop: function() {
              $("#messageBox").text("The slider has stopped");
          }    
        };
        $("#mySlider").slider(sliderOpts);
    });
  </script>
</head>
<body>
<div id="mySlider"></div>
<div id="messageBox"></div>
</body>
</html>


30. Three sliders share one event handler

<html lang="en">
<head>
  <title></title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.slider.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <script type="text/javascript">
    $(function() {
        var r = 0;
        var g = 0;
        var b = 0;
        var sliderOpts = {
          max: 255,
          steps: 255,
          slide: function(e, ui) {
            var val = $(this).slider("value");
            var id = $(this).attr("id");
            
            if (id == "rSlider") {
              r = val;
            } else if (id == "gSlider") {
              g = val;
            } else {
              b = val;
            }
            var rgbString = r + "/" + g + "/" + b;
            $("#output").text(rgbString);
          }    
        };
        $("#rSlider, #gSlider, #bSlider").slider(sliderOpts);
    });
  </script>
</head>
<body>
    <div id="container">
      <div id="rSlider"></div><br>
      <div id="gSlider"></div><br>
      <div id="bSlider"></div>
      <div id="output">
    </div>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/jQuery/UI_Slider&oldid=9775»