Yahoo! UI Library - Slider Widget 3 : Slider : GUI Components JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » GUI Components » Slider »

 

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.pngno-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"0180);
    hue.onChange = function(newVal) { hueUpdate(newVal)};

    picker = YAHOO.widget.Slider.getSliderRegion("pickerDiv""selector"
        01800180);
    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.hsv2rgbh, 11);

    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.hsv2rgbh, 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.hrefimgStyle = "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>

           
       

Download : Download nav_yui.zip nav_yui.zip


-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo GUI Components
» Slider