Add mouse handlers to set the thumb's state : Slider « SmartClient « 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 » SmartClient » Slider 
Add mouse handlers to set the thumb's state
 
<!--
Isomorphic SmartClient
Copyright(c1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.

Open Source License

SmartClient source code, located under the source/ directory, and the resulting assembled modules 
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are 
licensed under the terms of the GNU Lesser General Public License, version 3. 
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html

If your project precludes the use of this license, or if you'd like to support SmartClient LGPL, 
we encourage you to buy a commercial license.

Icon Experience Collection

Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection 
(http://www.iconexperience.com) and may be freely used with any SmartClient components without charge, 
but may not be used as part of screen designs separate from SmartClient components without a purchase 
of a license from Icon Experience. We are working to replace these icons as soon as possible.

All other media found under the isomorphic/skins directory may be used under the LGPLv3.

Commercial Licenses

A number of commercial licenses are available for purchase. Please see http://smartclient.com/license.

Warranty Disclaimer

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even 
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General 
Public License for more details.

Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 202008. 


-->

<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->


<HTML><HEAD>
  <SCRIPT>var isomorphicDir = "isomorphic/";</SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
  <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
  <SCRIPT>
/*---------->    SimpleSlider_6.js    <----------*/

// Step 6
//  * convert track and thumb to StretchImg and Img widgets
//  * specify skin directory and images
//  * add mouse handlers to set the thumb's state
//  * add a custom cursor to the thumb

ClassFactory.defineClass("SimpleSlider", Canvas);


SimpleSlider.addProperties({
  length:200,
  vertical:true,
  
  thumbThickWidth:23,
  thumbThinWidth:17,
  trackWidth:7,
  trackCapSize:6,
  skinImgDir:"examples/custom_components/SimpleSlider/images/SimpleSlider/",
  thumbSrc:"thumb.gif",
  trackSrc:"track.gif",
  
  value:0,
  sliderTarget:null,

    initWidget : function () {
        this.Super("initWidget",  arguments);
        
        var width, height;
        
        if (this.vertical) {
            width = Math.max(this.thumbThickWidth, this.trackWidth);
            height = this.length;
        else {
            width = this.length;
            height = Math.max(this.thumbThickWidth, this.trackWidth);
        }
        
        this.setWidth(width);
        this.setHeight(height);
        
        this._usableLength = this.length-this.thumbThinWidth;
        
        this._track = this.addChild(this._createTrack());
        this._thumb = this.addChild(this._createThumb());
        
        this.setValue(this.value);
    },
    
    
    _createTrack : function () {
        return StretchImg.create({
            autoDraw:false,
            left:(this.vertical ? Math.floor((this.getWidth() this.trackWidth)/20),
            top:(this.vertical ? : Math.floor((this.getHeight() this.trackWidth)/2)),
            width:(this.vertical ? this.trackWidth : this.getWidth()),
            height:(this.vertical ? this.getHeight() this.trackWidth),
            vertical:this.vertical,
            capSize:this.trackCapSize,
            src:"[SKIN]" (this.vertical ? "v" "h"this.trackSrc,
            skinImgDir:this.skinImgDir
        });
    },
    
    
    _createThumb : function () {
        return Img.create({
            autoDraw:false,
            left:(this.vertical ? Math.floor((this.getWidth() this.thumbThickWidth)/20),
            top:(this.vertical ? : Math.floor((this.getHeight() this.thumbThickWidth)/2)),
            width:(this.vertical ? this.thumbThickWidth : this.thumbThinWidth),
            height:(this.vertical ? this.thumbThinWidth : this.thumbThickWidth),
            src:"[SKIN]" (this.vertical ? "v" "h"this.thumbSrc,
            skinImgDir:this.skinImgDir,
            canDrag:true,
            dragAppearance:EventHandler.NONE,
            cursor:Canvas.HAND,
            dragMove:"this.parentElement._thumbMove(); return false",
            dragStart:EventHandler.stopBubbling,
            dragStop:"this.setState(''); return false",
            mouseDown:"this.setState('down')",
            mouseUp:"this.setState(''); return false"
        });
    },
    
    
    _thumbMove : function () {
        var thumbPosition;
        
        if (this.vertical) {
            thumbPosition = EventHandler.getY() this.getPageTop();
            thumbPosition = Math.max(0, Math.min(this._usableLength, thumbPosition));
            if (thumbPosition == this._thumb.getTop()) return;
            this._thumb.setTop(thumbPosition);
        else {
            thumbPosition = EventHandler.getX() this.getPageLeft();
            thumbPosition = Math.max(0, Math.min(this._usableLength, thumbPosition));
            if (thumbPosition == this._thumb.getLeft()) return;
            this._thumb.setLeft(thumbPosition);
        }
        
        this.value = thumbPosition/this._usableLength;
        
        this.valueChanged();
        
        if (this.sliderTargetEventHandler.handleEvent(this.sliderTarget, "sliderMove"this);
    },
    
    
    setValue : function (newValue) {
        this.value = newValue;
        
        var thumbPosition = this.value * this._usableLength;
        if (this.vertical)
            this._thumb.setTop(thumbPosition);
        else
            this._thumb.setLeft(thumbPosition);
        
        this.valueChanged();
        
        if (this.sliderTargetEventHandler.handleEvent(this.sliderTarget, "sliderMove"this);
    },
    
    
    getValue : function () {
        return this.value;
    },
    
    
    valueChanged : function () {
    }
    

});
  
  </SCRIPT>
</HEAD><BODY BGCOLOR='powderblue'>
<SCRIPT>


// override default skin directory to pick up local slider images
Page.setSkinDir("");


//--------------------------------------------------
//  display area for targeted sliderMove events
//--------------------------------------------------

 Label.create({
  ID:"display",
  left:150,
  top:50,
  height:20,
  sliderMove:function(event,slider){
    this.setContents("sliderMove event<br>" +
                         slider.getID() ": " + slider.value);
  }
});


//--------------------------------------------------
//  global handler for sliderMove events
//--------------------------------------------------

Label.create({
    ID:"globalDisplay",
    left:300,
    top:50,
    height:20
});
Page.setEvent(
    "sliderMove"
    "globalDisplay.setContents('Global handler<br>' + eventInfo.ID + ': ' + eventInfo.value);"
);


//--------------------------------------------------
//  sliders
//--------------------------------------------------

SimpleSlider.create({
  ID:"vSlider",
  left:100,
  top:100,
  value:0.3,
  sliderTarget:display
});

SimpleSlider.create({
  ID:"hSlider",
  left:300,
  top:180,
  vertical:false,
  value:0.5,
  sliderTarget:display
});


//--------------------------------------------------
//  display areas for observed slider values
//--------------------------------------------------

Label.create({
  ID:"vSliderObserver",
  left:20,
  top:320,
  height:20
});
vSliderObserver.observe(vSlider, "valueChanged""observer.setContents(observed.value)");


Label.create({
  ID:"hSliderObserver",
  left:300,
  top:320,
  height:20
});
hSliderObserver.observe(hSlider, "valueChanged""observer.setContents(observed.value)");


</SCRIPT>
</BODY>
</HTML>

   
  
Related examples in the same category
1.Create, position, and size the slider and its two children (_track and _thumb) make the thumb drag-repositionable
2.Make slider thumb draggable calculate and set constrained thumb position when dragging
3.Add value and sliderTarget properties, calculate new value when thumb is moved, send sliderMove message to sliderTarget when thumb is moved
4.Add value setter and getter methods and use setter to init value
5.Add valueChanged() observable method
6.Convert track and thumb to StretchImg and Img widgets
7.Specify skin directory and images
8.Add a custom cursor to the thumb
9.Use Slider to set the border width
10.Number slider
11.Vertical Slider, min value, max value
12.Value changed event for Slider
13.Horizontal slider
14.Use slider to create a color mixer
15.Error checking of newValue in setValue()
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.