Yahoo! UI Library - Slider Widget 3: : Slider « GUI Components « JavaScript DHTML






Yahoo! UI Library - Slider Widget 3:


<!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">
  input { font-size: .85em }

  #ddPicker { 
    position: absolute;
    background-color: #eeeeee;
    top: 200px;
    left: 20px;
    width: 360px;
    height: 240px;
  }

  #pickerHandle { 
    background-color: #bbbbbb;
    height: 10px;
    cursor: move;
  }

  #hueThumb { 
    cursor:default;
    width:18px; 
    height:18px; 
    z-index: 9;
    position:absolute; 
  }

  #hueBg {
    position:absolute; 
    left:216px; 
    height:198px; 
    width:18px; 
    background:url(./examples/slider/img/hue.png) no-repeat;
    top:18px;
  }
  
  #pickerDiv {
    position:absolute; 
    left:10px; 
    height:187px; 
    width:188px; 
    /*
    background:url(./examples/slider/img/pickerbg.png) no-repeat;
    */
    top:20px;
  }

  #pickerbg { 
    position:absolute; 
    z-index: 1;
    top:0px;
    left:0px;
  }

  #selector { 
    cursor:default;
    width:11px; 
    height:11px; 
    z-index: 9;
    position:absolute; 
    top:0px;
    left:0px;
  }

  #valdiv { text-align:right; position:absolute; top: 86px; left:246px; } 

  #rBG {top:180px}
  #gBG {top:210px}
  #bBG {top:240px}

  #swatch {
    position:absolute; 
    left:260px; 
    top:30px;
    height:60px; 
    width:60px; 
    border:2px 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>HSV Color Picker</h3>
        <p>&nbsp;</p>
<strong>The logger is paused for performance reasons.  Click "Resume" to re-enable it.</strong>
      </div> 
    </div> 
      
    </div>
  </div>
</div>

<div id="ddPicker">
  <div id="pickerHandle">&nbsp;</div>
  <div id="pickerDiv">
    <img id="pickerbg" src="img/pickerbg.png" alt="" />
    <div id="selector"><img src="./examples/slider/img/select.gif" /></div> 
  </div>

   <div id="hueBg">
    <div id="hueThumb"><img src="./examples/slider/img/hline.png" /></div> 
  </div> 

  <div id="valdiv">
    <form name="rgbform" onsubmit="return userUpdate()">
    <br />
    R <input name="rval" id="rval" type="text" value="0" size="3" maxlength="3" />
    H <input name="hval" id="hval" type="text" value="0" size="3" maxlength="3" />
    <br />
    G <input name="gval" id="gval" type="text" value="0" size="3" maxlength="3" />
    S <input name="gsal" id="sval" type="text" value="0" size="3" maxlength="3" />
    <br />
    B <input name="bval" id="bval" type="text" value="0" size="3" maxlength="3" />
    V <input name="vval" id="vval" type="text" value="0" size="3" maxlength="3" />
    <br />
    <br />
    # <input name="hexval" id="hexval" type="text" value="0" size="6" maxlength="6" />
    <br />

    </form>
  </div>

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


<script type="text/javascript">

  var hue;
  var picker;
  var dd;

  function init() {

    hue = YAHOO.widget.Slider.getVertSlider("hueBg", "hueThumb", 0, 180);
    hue.onChange = function(newVal) { hueUpdate(newVal); };

    picker = YAHOO.widget.Slider.getSliderRegion("pickerDiv", "selector", 
        0, 180, 0, 180);
    picker.onChange = function(newX, newY) { pickerUpdate(newX, newY); };

    hueUpdate();

    dd = new YAHOO.util.DD("ddPicker");
    dd.setHandleElId("pickerHandle");
    dd.endDrag = function(e) {
      // picker.thumb.resetConstraints();
      // hue.thumb.resetConstraints(); 
        };
  }

  window.onload = init;

  function pickerUpdate(newX, newY) {
    swatchUpdate();
  }

  function hueUpdate(newVal) {

    var h = (180 - hue.getValue()) / 180;
    if (h == 1) { h = 0; }

    YAHOO.log("hue " + hue.getValue());

    var a = YAHOO.util.Color.hsv2rgb( h, 1, 1);

    document.getElementById("pickerDiv").style.backgroundColor = 
      "rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";

    swatchUpdate();
  }

  function swatchUpdate() {
    var h = (180 - hue.getValue());
    if (h == 180) { h = 0; }
    document.getElementById("hval").value = (h*2);

    h = h / 180;
    YAHOO.log("h " + hue.getValue());

    var s = picker.getXValue() / 180;
    document.getElementById("sval").value = Math.round(s * 100);

    YAHOO.log("s " + s);

    var v = (180 - picker.getYValue()) / 180;
    document.getElementById("vval").value = Math.round(v * 100);

    YAHOO.log("v " + v);

    var a = YAHOO.util.Color.hsv2rgb( h, s, v );

    document.getElementById("swatch").style.backgroundColor = 
      "rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";

    document.getElementById("rval").value = a[0];
    document.getElementById("gval").value = a[1];
    document.getElementById("bval").value = a[2];
    document.getElementById("hexval").value = 
      YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]);
  }
</script>


<!--[if gte IE 5.5000]>
<script type="text/javascript">

// yuck.

function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
   {
   for(var i=0; i<document.images.length; i++)
      {
    var img = document.images[i]
    var imgName = img.src.toUpperCase()
    if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
       {
     var imgID = (img.id) ? "id='" + img.id + "' " : ""
     var imgClass = (img.className) ? "class='" + img.className + "' " : ""
     var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
     var imgStyle = "display:inline-block;" + img.style.cssText 
     if (img.align == "left") imgStyle = "float:left;" + imgStyle
     if (img.align == "right") imgStyle = "float:right;" + imgStyle
     if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle    
     var strNewHTML = "<span " + imgID + imgClass + imgTitle
     + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
       + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
     + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
     img.outerHTML = strNewHTML
     i = i-1
       }
      }
   }

YAHOO.util.Event.addListener(window, "load", correctPNG);

</script>
<![endif]-->

</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.The RGB slider implements three slider controls to generate a RGB color
5.Slider for color picker