The RGB slider implements three slider controls to generate a RGB color : Slider « GUI Components « JavaScript DHTML

Home
JavaScript DHTML
1.Ajax Layer
2.Data Type
3.Date Time
4.Development
5.Document
6.Dojo toolkit
7.Event
8.Event onMethod
9.Ext JS
10.Form Control
11.GUI Components
12.HTML
13.Javascript Collections
14.Javascript Objects
15.Javascript Properties
16.jQuery
17.Language Basics
18.Mochkit
19.Mootools
20.Node Operation
21.Object Oriented
22.Page Components
23.Rico
24.Scriptaculous
25.Security
26.SmartClient
27.Style Layout
28.Table
29.Utilities
30.Window Browser
31.YUI Library
JavaScript DHTML » GUI Components » Slider 




The RGB slider implements three slider controls to generate a RGB color


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"
    xmlns:x2="http://www.w3.org/TR/xhtml2"
    xmlns:role="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#"
    xmlns:state="http://www.w3.org/2005/07/aaa">
<head>
<title>Yahoo! UI Library - Slider Widget</title>
<link rel="stylesheet" type="text/css" href="./examples/slider/css/screen.css">
<style type="text/css">

  .dragPanel 
    position: absolute;
    background-color: #eeeeee;
    top: 200px;
    left: 20px;
    width: 320px;
    height: 180px;
  }

  .dragPanel h4 
    background-color: #bbbbbb;
    height: 10px;
        margin: 0px;
    cursor: move;
  }


  input font-size: 85%}
  .thumb 
    cursor:default;
    width:18px; 
    height:18px; 
    z-index: 9;
    position: absolute; 
        left: 0px;
  }

  .bg {
    position:absolute; 
    left:10px; 
    height:18px; 
    width:146px; 
    border: 0px solid #aaaaaa;
  }
  
  .bg span, .bg p {
    cursor:default;
    position: relative;
    font-size: 2px;
    overflow: hidden;
    color: #aaaaaa;
    top: 4px;
    height: 10px;
    width: 4px;
    display: block;
    float:left;
  }

  .bg span {
    border-top:1px solid #cccccc;
    border-bottom:1px solid #cccccc;
  }

  .bg .lb {
    border-left:1px solid #cccccc;
  }

  .bg .rb {
    border-right:1px solid #cccccc;
  }
  #valdiv position:absolute; top: 100px; left:10px; 

  #rBG {top:30px}
  #gBG {top:50px}
  #bBG {top:70px}

  #swatch {
    position:absolute; 
    left:160px; 
    top:34px;
    height:50px; 
    width:50px; 
    border:1px solid #aaaaaa;
  }

</style>

<!-- Nav and logger start -->

<script type="text/javascript" src="./build/yahoo/yahoo.js" ></script>
<script type="text/javascript" src="./build/event/event.js" ></script>
<script type="text/javascript" src="./build/logger/logger.js" ></script>
<script type="text/javascript" src="./build/dom/dom.js" ></script>
<script type="text/javascript" src="./build/animation/animation.js" ></script>
<script type="text/javascript" src="./build/dragdrop/dragdrop.js" ></script>
<script type="text/javascript" src="./examples/slider/js/color.js" ></script>
<script type="text/javascript" src="./examples/slider/js/key.js" ></script>

<script type="text/javascript" src="./build/slider/slider-debug.js" ></script></head>
<body
<div id="pageTitle"><h3>Slider Widget</h3></div> 

<div id="container">
  <div id="containerTop">
    <div id="header"><img id="ylogo" src="./examples/slider/img/logo.gif" /></div>
  <div id="main">

    <!-- Nav and logger start -->

<style type="text/css">
    #logButtonHeader input font-size: 80}

/* logger default styles */
/* font size is controlled here: default 77% */
#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
/* width is controlled here: default 31em */
.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
.yui-log p {margin:1px;padding:.1em;}
.yui-log button {font-family:monospace;}
.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
/* height is controlled here: default 20em*/
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
.yui-log .yui-log-ft .yui-log-categoryfilters {}
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
.yui-log .yui-log-filtergrp {margin-right:.5em;}
.yui-log .info {background-color:#A7CC25;/* A7CC25 green */
.yui-log .warn {background-color:#F58516;/* F58516 orange */
.yui-log .error {background-color:#E32F0B;/* E32F0B red */
.yui-log .time {background-color:#A6C9D7;/* A6C9D7 blue */
.yui-log .window {background-color:#F2E886;/* F2E886 tan */


</style>

<div id="rightbar">
  <div id="rightBarPad">
    <script type="text/javascript">

    YAHOO.example.logApp = function() {
        return {
            init: function() {
                if (YAHOO.widget.Logger) {
                    var reader = new YAHOO.widget.LogReader"logDiv"
                            newestOnTop: true, height: "400px" } );

                    reader._onClickPauseBtn(null, reader);
                }
            }
        };
    } ()

    YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.init);
    </script>

    <div id="logDiv"></div>

  </div>
</div>
<!-- Nav and logger end -->
 

    <div id="content"
      <div class="newsItem"
      <h3>RGB Slider</h3>
        <p>
        The RGB slider implements three slider controls to generate a
        RGB color.  The background color of each slider is also
        dynamically modified to reflect the colors that could be
        generated by moving a single slider.
        </p>
<strong>The logger is paused for performance reasons.  Click "Resume" to re-enable it.</strong>
      </div> 
    </div> 
      
    </div>
  </div>
</div>

<div id="ddRGB" class="dragPanel">
  <h4 id="pickerHandle">&nbsp;</h4>
  <div id="rBG" class="bg">
    <div id="rthumb" class="thumb"><img src="./examples/slider/img/vline.png" /></div> 
  </div> 

  <div id="gBG" class="bg">
    <div id="gthumb" class="thumb"><img src="./examples/slider/img/vline.png" /></div> 
  </div> 

  <div id="bBG" class="bg">
    <div id="bthumb" class="thumb"><img src="./examples/slider/img/vline.png" /></div> 
  </div> 


  <div id="valdiv">
    <form name="rgbform" onsubmit="return userUpdate()">
    <table border="0">
    <tr>
    <td>
    RGB
    </td>
    <td>
    <input name="rval" id="rval" type="text" value="0" size="4" maxlength="4" />
    <input name="gval" id="gval" type="text" value="0" size="4" maxlength="4" />
    <input name="bval" id="bval" type="text" value="0" size="4" maxlength="4" />
    </td>
    <td>
    <input type="button" value="Update" onclick="userUpdate()" />
    </td>
    </tr>
    <tr>
    <td>
    Hex: #
    </td>
    <td>
    <input name="hexval" id="hexval" type="text" value="" size="6" maxlength="6" />
    </td>
    <td>
    <input type="button" value="Update" onclick="userUpdate(true)" />
    </td>
    </tr>
    <tr>
    <td>
    <input type="button" value="Reset" onclick="userReset()" />
    </td>
    </tr>
    </table>
    </form>
  </div>

  <div id="swatch">&nbsp;</div>
  </div>


<script type="text/javascript">

  var r, g, b;
  var dd;

  function init() {
        rgbInit();
    }

  function rgbInit() {

    r = YAHOO.widget.Slider.getHorizSlider("rBG""rthumb"0128);
    r.onChange = function(newVal) { listenerUpdate("r", newVal*2)};

    g = YAHOO.widget.Slider.getHorizSlider("gBG""gthumb"0128);
    g.onChange = function(newVal) { listenerUpdate("g", newVal*2)};

    b = YAHOO.widget.Slider.getHorizSlider("bBG""bthumb"0128);
    b.onChange = function(newVal) { listenerUpdate("b", newVal*2)};

    initColor();

    dd = new YAHOO.util.DD("ddRGB");
    dd.setHandleElId("pickerHandle");
  }

  window.onload = init;

  function initColor() {
    var ch = " ";

    d = document.createElement("P");
    d.className = "rb";
    r.getEl().appendChild(d);
    d = document.createElement("P");
    d.className = "rb";
    g.getEl().appendChild(d);
    d = document.createElement("P");
    d.className = "rb";
    b.getEl().appendChild(d);

    for (var i=0; i<34; i++) {
      d = document.createElement("SPAN");
      d.id = "rBG" + i
      // d.innerHTML = ch;
      r.getEl().appendChild(d);

      d = document.createElement("SPAN");
      d.id = "gBG" + i
      // d.innerHTML = ch;
      g.getEl().appendChild(d);

      d = document.createElement("SPAN");
      d.id = "bBG" + i
      // d.innerHTML = ch;
      b.getEl().appendChild(d);
    }

    d = document.createElement("P");
    d.className = "lb";
    r.getEl().appendChild(d);
    d = document.createElement("P");
    d.className = "lb";
    g.getEl().appendChild(d);
    d = document.createElement("P");
    d.className = "lb";
    b.getEl().appendChild(d);

    userUpdate();
  }

  function updateSliderColors() {

    var curr, curg, curb;
    curr = Math.min(r.getValue() 2255);
    curg = Math.min(g.getValue() 2255);
    curb = Math.min(b.getValue() 2255);

        YAHOO.log("updateSliderColor " + curr + ", " + curg + ", " + curb);

    var d;
    for (var i=0; i<34; i++) {
      d = document.getElementById("rBG" + i);
      d.style.backgroundColor = 
        "rgb(" (i*8"," + curg + "," + curb + ")";

      d = document.getElementById("gBG" + i);
      d.style.backgroundColor = 
        "rgb(" + curr + "," (i*8"," + curb + ")";

      d = document.getElementById("bBG" + i);
      d.style.backgroundColor = 
        "rgb(" + curr + "," + curg + "," (i*8")";
    }

    document.getElementById("swatch").style.backgroundColor =
      "rgb(" + curr + "," + curg + "," + curb + ")";

    document.getElementById("hexval").value = 
          YAHOO.util.Color.rgb2hex(curr, curg, curb);
  }


  function listenerUpdate(whichSlider, newVal) {
    if (newVal == 256) {
      newVal = 255;
    }
    document.getElementById(whichSlider + "val").value = newVal;
    updateSliderColors();
  }

  function userUpdate(isHex) {
    var v;
    var f = document.forms['rgbform'];

    if (isHex) {
      var hexval = f["hexval"].value;
      // shorthand #369
      if (hexval.length == 3) {
        var newval = "";
        for (var i=0;i<3;i++) {
          var a = hexval.substr(i, 1);
          newval += a + a;
        }

        hexval = newval;
      }

      YAHOO.log("hexval:" + hexval);

      if (hexval.length != 6) {
        alert("illegal hex code: " + hexval);
      else {
        var rgb = YAHOO.util.Color.hex2rgb(hexval);
        // alert(rgb.toString());
        if (YAHOO.util.Color.isValidRGB(rgb)) {
          f['rval'].value = rgb[0];
          f['gval'].value = rgb[1];
          f['bval'].value = rgb[2];
        }
      }
    }

    // red
    v = parseFloat(f['rval'].value);
    v = isNaN(v) ) : Math.round(v);
        YAHOO.log("setValue, r: " + v);
    r.setValue(Math.round(v2);

    v = parseFloat(f['gval'].value);
    v = isNaN(v) ) : Math.round(v);
        YAHOO.log("setValue, g: " + g);
    g.setValue(Math.round(v2);

    v = parseFloat(f['bval'].value);
    v = isNaN(v) ) : Math.round(v);
        YAHOO.log("setValue, b: " + b);
    b.setValue(Math.round(v2);


    updateSliderColors();

    return false;
  }

  function userReset() {
    var v;
    var f = document.forms['rgbform'];

    r.setValue(0);
    g.setValue(0);
    b.setValue(0);
  }
</script>

</body>
</html>

           
       














yui.zip( 3,714 k)
Related examples in the same category
1.Slider: vertical and horizontal, tick mark, animate the movement of the thumb
2.Yahoo! UI Library - Slider Widget
3.Yahoo! UI Library - Slider Widget 2: animate the movement of the thumb
4.Yahoo! UI Library - Slider Widget 3:
5.Slider for color picker
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.