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


JAVASCRIPT DHTML TUTORIALS » GUI Components » Slider »

 

Yahoo! UI Library - Slider Widget 2




<!DOCTYPE html PUBLIC "-//W4C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w4.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" ></link>

<!-- 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>Sliders</h3>
        <p>
        The slider widget is an implementation of YAHOO.util.DragDrop 
        It also will use YAHOO.util.Animation if available to
        animate the movement of the thumb when you click the 
        slider background.

        The only difference between the two sliders aside from
        the fact that one is vertical and one horizontal is that 
        the horizontal slider implements the "tick mark" feature
        of drag and drop; it will "snap" to the tick marks spaced
        25 pixels apart.
        </p>
<strong>The logger is paused for performance reasons.  Click "Resume" to re-enable it.</strong>
        <p>
              <!--
        <a href="javascript:verticalSlider.lock()">Lock</a>
        <a href="javascript:verticalSlider.unlock()">Unlock</a>
                -->
        </p>

              <div id="vertWrapper">
                <div
                 id="vertBGDiv"
                 name="vertBGDiv"
                 tabindex="0" 
                 x2:role="role:slider" 
                 state:valuenow="0" 
                 state:valuemin="0" 
                 state:valuemax="200"
                 title="Vertical Slider" 
                 onkeydown="return handleVertSliderKey(this, YAHOO.util.Event.getEvent(event))" 
                 onkeypress="YAHOO.util.Event.preventDefault(YAHOO.util.Event.getEvent(event))" >
                   <div id="vertHandleDiv"><img alt="" src="./examples/slider/img/vertSlider.png" /></div> 
                </div>

                <div id="vertValueDiv">
                  <form name="formV" onsubmit="return updateVert()">
                  <input name="vertVal" id="vertVal" type="text" value="0" size="4" maxlength="4" />
                  <input type="button" value="Update" onclick="updateVert()" />
                  </form>
                </div>
              </div>
 
           <div id="horizWrapper">
             <div
                 id="horizBGDiv"
                 name="horizBGDiv"
                 tabindex="0" 
                 x2:role="role:slider" 
                 state:valuenow="0" 
                 state:valuemin="-100" 
                 state:valuemax="100"
                 title="Horizontal Slider" 
                 onkeydown="return handleHorizSliderKey(this, YAHOO.util.Event.getEvent(event))" 
                 onkeypress="YAHOO.util.Event.preventDefault(YAHOO.util.Event.getEvent(event))" >
               <div id="horizHandleDiv" ><img alt="" src="./examples/slider/img/horizSlider.png" /></div> 
              </div> 

            <div id="horizValueDiv">
                <form name="formH" onsubmit="return updateHoriz()">
                <input name="horizVal" id="horizVal" type="text" value="0" size="4" maxlength="4" />
                <input type="button" value="Update" onclick="updateHoriz()" />
                </form>
            </div>

     
    </div> 

    </div>
  </div>
</div>


<script type="text/javascript">

function handleHorizSliderKey(slider, ev) {
  if (gLoggergLogger.debug("horizontal slider keypress");

  // var valueNow = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuenow"), 10);

  var valueNow = horizontalSlider.getValue();

  // var valueMin = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemin"), 10);
  // var valueMax = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemax"), 10);

  var valueMin = horizontalSlider.thumb.rightConstraint;
  var valueMax = horizontalSlider.thumb.leftConstraint;

  var delta = 0;

  var kc = ev.keyCode;

  if (gLoggergLogger.debug("keycode: " + kc);

  if (kc == YAHOO.util.Key.DOM_VK_LEFT) {
    delta = -25;
  else if (kc == YAHOO.util.Key.DOM_VK_RIGHT) {
    delta = 25;
  else if (kc == YAHOO.util.Key.DOM_VK_HOME) {
    delta = -valueNow - valueMin );
  else if (kc == YAHOO.util.Key.DOM_VK_END) {
    delta = valueMax - valueNow;
  else {
    return true;
  }
  
  valueNow += delta;

  horizontalSlider.setValue(valueNow, true);

    if (slider.setAttributeNS) {
      slider.setAttributeNS("http://www.w3.org/2005/07/aaa"
                              "valuenow"
                              valueNow);
    }
  
  // displaySlider(slider);

    YAHOO.util.Event.stopEvent(ev);
  return false;
}

function handleVertSliderKey(slider, ev) {
  if (gLoggergLogger.debug("vertical slider keypress");

  // var valueNow = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuenow"), 10);

  var valueNow = verticalSlider.getValue();

  // var valueMin = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemin"), 10);
  // var valueMax = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemax"), 10);

  var valueMin = verticalSlider.thumb.topConstraint;
  var valueMax = verticalSlider.thumb.bottomConstraint;

  var delta = 0;
  var kc = ev.keyCode;
  if (kc == YAHOO.util.Key.DOM_VK_UP) {
    delta = -20;
  }
  else if (kc == YAHOO.util.Key.DOM_VK_DOWN) {
    delta = 20;
  }
  else if (kc == YAHOO.util.Key.DOM_VK_HOME) {
    delta = -valueNow - valueMin );
  }
  else if (kc == YAHOO.util.Key.DOM_VK_END) {
    delta = valueMax - valueNow;
  }
  else {
    return true;
  }
  
  valueNow += delta;
  if (valueNow < valueMin) {
    valueNow = valueMin;
  }

  if (valueNow > valueMax) {
    valueNow = valueMax;
  }  

    if (slider.setAttributeNS) {
      slider.setAttributeNS("http://www.w3.org/2005/07/aaa"
                              "valuenow", valueNow);
    }
  
  // displaySlider(slider);
  verticalSlider.setValue(valueNow, true);

    YAHOO.util.Event.stopEvent(ev);
  return false;
}

  var verticalSlider, horizontalSlider;
  var gLogger;
  function init() {
    if (typeof(ygLogger!= "undefined") {
      ygLogger.init(document.getElementById("logDiv"));
      gLogger = new ygLogger("slider.php");
    }

        //////////////////////////////////////////////////////////////////

    verticalSlider = YAHOO.widget.Slider.getVertSlider("vertBGDiv"
                         "vertHandleDiv"0200);

    verticalSlider.onChange = function(offsetFromStart) {
      document.getElementById("vertVal").value = offsetFromStart;
      document.getElementById("vertBGDiv").title = 
                        "Vertical Slider, value = " + offsetFromStart;
    };

        verticalSlider.onSlideStart = function() {
            //alert("slidestart");
            YAHOO.log("VERT slidestart""warn");
        }

        verticalSlider.onSlideEnd = function() {
            //alert("slideend");
            YAHOO.log("VERT slideend""warn");
        }

        // verticalSlider.setValue(20);
        // verticalSlider.lock();
        //verticalSlider.animate = false;



      document.getElementById("vertVal").title = 
                            "Type in slider value between 0 and 200.";


        //////////////////////////////////////////////////////////////////

    horizontalSlider = YAHOO.widget.Slider.getHorizSlider("horizBGDiv"
                           "horizHandleDiv"10010025);

    horizontalSlider.onChange = function(offsetFromStart) {
      document.getElementById("horizVal").value = offsetFromStart;
      document.getElementById("horizBGDiv").title = 
                        "Horizontal Slider, value = " + offsetFromStart;
    };

        horizontalSlider.onSlideStart = function() {
            //alert("slidestart");
            YAHOO.log("HORIZ slidestart""warn");
        };

        horizontalSlider.onSlideEnd = function() {
            // alert("slideend");
            YAHOO.log("HORIZ slideend""warn");
        };


        // horizontalSlider.lock();

      document.getElementById("horizVal").title = 
                        "Type in slider value between -100 and 100. Values " +
                        "will be rounded to a number divisable by 25."
  }

  function updateVert() {
    var v = parseFloat(document.forms['formV']['vertVal'].value, 10);
    if isNaN(v) ) v = 0;
    verticalSlider.setValue(Math.round(v));
    return false;
  }
  
  function updateHoriz() {
        var fld = document.forms["formH"]["horizVal"];
    var v = parseFloat(fld.value, 10);
    if isNaN(v) ) v = 0;
    horizontalSlider.setValue(Math.round(v));
        var newVal = horizontalSlider.getValue();
        if (v != newVal) {
            fld.value = newVal;
        }
    return false;
  }

  window.onload = init;

</script>

</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