| javascript_components

# Class: Bs_Slider Source Location: /components/slider/Bs_Slider.class.js.php
### Class Overview
A Slider Component. #### Author(s): andrej arn <at blueshoes dot org>, sam blume <sam at blueshoes dot org> #### Copyright: blueshoes.org | ### Variables $arrowAmount $baseZindex $bgColor $colorbar $direction $fieldName $height $imgDir $inputTextFieldEvent $maxVal $minVal $moveX $moveY $styleContainerClass $styleValueFieldClass $styleValueTextClass $useInputField $valueDefault $valueInterval $width $_constructor | ### Methods attachEvent attachOnArrow attachOnChange attachOnInputBlur attachOnInputChange attachOnSlideEnd attachOnSlideMove attachOnSlideStart draw drawInto fireEvent getSliderPos getValue hasEventAttached onChangeByApi onChangeByArrow onChangeByClick onChangeByInput render setArrowIconLeft setArrowIconRight setBackgroundImage setDisabled setDisplay setSliderIcon setValue updateHandle updateValueField updateValueText
### Inherited Variables | ### Inherited Methods
### Class Details [line 84] A Slider Component. Features: IE6 and NS(Mozilla7) compliant. Lets you add a slider to your page. It simulates a HTML-form text field; so your form-handling will not change. You may use your customized images. Able to attach onClick- and onChange-events to execute your JS-code when checked/changed. Includes (+Dependencies):

    1     <script type="text/javascript" src="/_bsJavascript/lib/LibCrossBrowser.js"></script>
    2        <script type="text/javascript" src="/_bsJavascript/lib/EventHandler.js"></script>
    3        <script type="text/javascript" src="/_bsJavascript/core/form/Bs_FormUtil.lib.js"></script>
    4        <script type="text/javascript" src="/_bsJavascript/components/slider/Bs_Slider.class.js"></script>
How to use: Have a look at the example (see example link below) Create a function in the HTML-header called init(). Place the javascript code that instanciates and inits this component into init(). Place an 'onLoad' in your body-tag: e.g. <body onLoad="init();"> In the HTML body: Place a div- or span-tag with an unique ID where you want the component to be. How it works: [After instanciating and initializing the object]. Call the drawInto([tag id]) method. This will search the HTML code for a tag with the given id and insert HTML- and JS- code dynamically (using DOM) to display the component and handle it. What is returned to the server:
      +------------------------+------------------------------------------------+
      | [tag id] +"_value"     | int, The slider value                          |
      +------------------------+------------------------------------------------+
     In versions 4.4 and before
      +--------------------------------------------+----------------------------+
      | [varible name of the object] +"_value"     | int, The slider value      |
      +--------------------------------------------+----------------------------+
This class generates a normal HTML text field and saves it's state in there. It's not visible because it is set to display:none (invisible) but (when used in a form), it will be submitted like any other HTML-form-field. To override this name see fieldname. Event-Handling: (see attachOnClick(), attachOnChange()) You can a callback function for certain events onto this component (events are things like onClick, onChange ... aso) Snipit 1) Attaching a callback function:

    1     var mySlider = new Bs_Slider();
    2          mySlider.attachOnChange(yourCallbackFunctionName);
- The function you pass should be able to receive 3 parameters. The componentObj is an instance of this class and allows you to access it the component that triggered the event. newValue is the new value that was set, new position is the new position in pixels.

      1     function yourCallbackFunctionName(componentObj, newValue, newPosition){
      2            // do some stuff.
      3          }
Customized images: Set the path to your image-dir imgDir Then use following methods setup the collorbar and to place the images you intend to use: colorbar setBackgroundImage() setSliderIcon() setArrowIconLeft(), setArrowIconRight() #### Tags:
copyright: | blueshoes.org
author: | andrej arn <at blueshoes dot org>, sam blume <sam at blueshoes dot org>
example: | example not found
example: | example not found
[ Top ] ### Class Variables #### $arrowAmount = 1 [line 180] How much units to slide on an arrow click. If set to 0 then the arrows won't be displayed. Something like 0.5 is possible aswell. #### Tags:
var: | (default is 1)
access: | public
Type: | int
[ Top ] #### $baseZindex = 1000 [line 244] The z-index the slider will use. you may want to change this if you have elements on your page that overlap this slider (floating stuff or so). #### Tags:
var: | (default is 1000)
access: | public
Type: | int
[ Top ] #### $bgColor = [line 367] The background color. hex code or named color. examples: 'blue', 'green', '#000000' #### Tags:
access: | public
Type: | string
- [ Top ] #### $colorbar = [line 236] If and how the colorbar feature should be used. If it's a string then it will be interpreted as a css class. If it's an array (hash) (or object with vars) the keys will be used to generate style settings. You can achieve the same results using both ways, except for 'widthDifference'. You can use both (array with css class as elemenet of the array) to set additional css properties. I can't think of any, but maybe you do.
       if you give it an array, it can have these settings:
         KEY               DEFAULT
         cssClass          -nothing-
         color             'orange' if cssClass is not set, otherwise -nothing-
         height            -nothing-
         widthDifference   0
         offsetLeft        -nothing-
         offsetTop         -nothing-

       coments:
         color:
           if you don't see the colorbar, you prolly have a cssClass defined
           but neither there a color defined not in the array ('color' element).
         widthDifference:
           the width of the colorbar is always from the left side to where the
           handle (slider) is. so the left side of the slider bar is colored.
           it may be (depending on your design) that you need to have the color
           bar a little bit larger or smaller. you can set an amound of pixels
           here, it may even be negative.
         offsetLeft:
           if you use a cssclass, you can specify something like left:5px;
           if you use arrows, you have to take the width of the left arrow
           into account. if you use offsetLeft, you don't. this is done for you.
anyway play with the values until you get what you want. So if you want to use a css class and want to specify a widthDifference, do something like

    1     arr = new Array()
    2        arr['cssClass'] = 'yourClass';
    3        arr['widthDifference'] = -5;
and you're done. On the other hand it's handy if you don't have to create a css class and make sure it always ships with your file. well, enough of comments for this one. #### Tags:
var: | (array or string)
access: | public
Type: | mixed
[ Top ] #### $direction = 0 [line 129] The slider direction (horizontal/vertical)
       0 = horizontally (default)
       1 = vertically (currently not implemented)
#### Tags:
var: | direction
todo: | implement vertically
access: | public
Type: | int
[ Top ] #### $fieldName = [line 109] When submitting the form, you'll receive the value under this name. In other words you'll receive the data back to the server as if you had placed

    1     <input type=text name="[the fieldName]" id="[the fieldName]"  value="[the value]">
into your HTML-form. Note: If not set the field name will be genarated as instanceName +"_value" #### Tags:
since: | bs4.4 (before there was a bug and the field 'undefined' was used for all silders.)
access: | public
Type: | string
[ Top ] #### $height = 20 [line 146] The height of the sliding part in pixel. This is not the full height. it excludes the input field and the push buttons. #### Tags:
var: | (default is 20 pixel)
access: | public
Type: | int
[ Top ] #### $imgDir = '/_bsJavascript/components/slider/img/' [line 292] The base path for the image folder. Examples: (NOTE: The path has to end with a slash.) 'http://www.domain.com/foo/' <= with domain '/my/image/path/' <= absolute path without domain '../some/path/' <= relative path Default is: '/_bsJavascript/components/slider/img/' Check this folder and the other folders around there for other styles. #### Tags:
access: | public
Type: | string
[ Top ] #### $inputTextFieldEvent = 'over' [line 475] If useInputField is set to 3 we toggle. but when? default is onMouseOver (over) but it can be set to 'click' (onClick). #### Tags:
var: | ('over' or 'click')
see: | Bs_Slider::$useInputField
access: | public
Type: | string
[ Top ] #### $maxVal = 100 [line 160] The highest possible value. #### Tags:
var: | (default is 100)
access: | public
Type: | int
[ Top ] #### $minVal = 0 [line 153] The lowest possible value. It may be lower than 0 afaik :-) #### Tags:
var: | (default is 0)
access: | public
Type: | int
[ Top ] #### $moveX = 0 [line 256] If you want to move the whole slider object with everything on the x-axis then set a value here. example: -5 means move the whole thing 5 pixel to the left. example: 10 means move the whole thing 10 pixel to the right. #### Tags:
since: | bs4.3
see: | Bs_Slider::$moveY
access: | public
Type: | int
[ Top ] #### $moveY = 0 [line 268] If you want to move the whole slider object with everything on the y-axis then set a value here. example: -5 means move the whole thing 5 pixel up the page. example: 10 means move the whole thing 10 pixel down the page. #### Tags:
since: | bs4.3
see: | Bs_Slider::$moveX
access: | public
Type: | int
[ Top ] #### $styleContainerClass = [line 345] Use to set a CSS class name for the slider container. #### Tags:
access: | public
Type: | string
[ Top ] #### $styleValueFieldClass = 'smalltxt spanSliderField' [line 352] Use to set a CSS class name for the value input field. #### Tags:
access: | public
Type: | string
[ Top ] #### $styleValueTextClass = 'smalltxt spanSliderText' [line 359] Use to set a CSS class name for the value text span. #### Tags:
access: | public
Type: | string
[ Top ] #### $useInputField = 2 [line 465] Should we display the input field (with value) to the right?
     0 = no
     1 = show as text (not implemented yet, will be shown as #2)
     2 = show as input field (changable). this is the default.
     3 = show as text, onclick becomes an input field. (not all browsers support that, but
         it's fancy :)
The trick is to keep it invisible if set to false. we need it because it's the holder of the internal value. could be recoded, if you want to... #### Tags:
var: | useInputField
see: | Bs_Slider::$inputTextFieldEvent
access: | public
Type: | int
[ Top ] #### $valueDefault = 0 [line 171] The default value (when the slider gets initialized). Note: Can initially have alower or higher value than minVal/maxVal. This is a feature. You can detect if the used has set any value this way. Only values in the range of minVal - maxVal can be set and are displayed. #### Tags:
access: | public
Type: | int
[ Top ] #### $valueInterval = 1 [line 445] The step (interval) of the values.
     Examples: 0, 1, 2, 3 ...     has an interval of 1
               0, 0.5, 1, 1.5 ... has an interval of 0.5
with the current rounding it can go down to 2 digits after the dot, like 3.51. #### Tags:
var: | (int or real, whatever)
access: | public
Type: | number
[ Top ] #### $width = 100 [line 138] The width of the sliding part in pixel. Note: This is not the full width. It excludes the input field and the push buttons. #### Tags:
var: | (default is 100 pixel)
access: | public
Type: | int
[ Top ] #### $_constructor = [line 1554]
Type: | mixed
[ Top ] ### Class Methods ### method attachEvent [line 887]
`void attachEvent( string trigger, function yourEvent)`
Attaches an event like onChange, onMouseOver, onClickCaption ... a.s.o. Supported events are: 'onChange' #### Tags:
see: | _attachedEvents
access: | public
#### Parameters:
string | trigger | trigger (for example 'onChange')
function | yourEvent | A globalFunctionName (No string)
[ Top ] ### method attachOnArrow [line 957]
`void attachOnArrow( function functionName)`
Attache a global JS-fuction that will be called. #### Tags:
access: | public
#### Parameters:
function | functionName | func (not a string!)
[ Top ] ### method attachOnChange [line 938]
`void attachOnChange( function functionName)`
Attache a global JS-fuction that will be called. #### Tags:
access: | public
#### Parameters:
function | functionName | functionName (not a string!)
[ Top ] ### method attachOnInputBlur [line 963]
`void attachOnInputBlur( function functionName)`
Attache a global JS-fuction that will be called. #### Tags:
access: | public
#### Parameters:
function | functionName | func (not a string!)
[ Top ] ### method attachOnInputChange [line 960]
`void attachOnInputChange( function functionName)`
Attache a global JS-fuction that will be called. #### Tags:
access: | public
#### Parameters:
function | functionName | func (not a string!)
[ Top ] ### method attachOnSlideEnd [line 947]
`void attachOnSlideEnd( function functionName)`
Attache a global JS-fuction that will be called. #### Tags:
access: | public
#### Parameters:
function | functionName | functionName (not a string!)
[ Top ] ### method attachOnSlideMove [line 944]
`void attachOnSlideMove( function functionName)`
Attache a global JS-fuction that will be called. #### Tags:
access: | public
#### Parameters:
function | functionName | functionName (not a string!)
[ Top ] ### method attachOnSlideStart [line 941]
`void attachOnSlideStart( function functionName)`
Attache a global JS-fuction that will be called. #### Tags:
access: | public
#### Parameters:
function | functionName | functionName (not a string!)
[ Top ] ### method draw [line 871]
`void draw( string tagId)`
DEPRECATED. Use drawInto() #### Tags:
see: | Bs_Slider::drawInto()
deprecated: | use drawInto()
#### Parameters:
string | tagId | tagId (id of the span tag.)
[ Top ] ### method drawInto [line 858]
`void drawInto( string tagId)`
Renders the checkbox component and places it into the page. #### Tags:
access: | public
#### Parameters:
string | tagId | tagId Id of the tag. (Use <div> or <span> to hold the ID)
[ Top ] ### method fireEvent [line 916]
`void fireEvent( string trigger)`
Fires the events for the trigger specified. (used internally, but feel free to trigger events yourself...) #### Tags:
access: | public
#### Parameters:
string | trigger | trigger (for example 'onClickCaption')
[ Top ] ### method getSliderPos [line 1101]
`int getSliderPos( )`
Returns the current slider relative position in pixel. #### Tags:
access: | public
[ Top ] ### method getValue [line 1092]
`double getValue( )`
Returns the current silder value. #### Tags:
access: | public
[ Top ] ### method hasEventAttached [line 905]
`bool hasEventAttached( string trigger)`
Tells if an event is attached for the trigger specified. #### Tags:
access: | public
#### Parameters:
string | trigger | trigger
[ Top ] ### method onChangeByApi [line 1253]
`void onChangeByApi( string val)`
DEPRECATED use setValue(), this method name was confusing. Use this to set a new value. --sam the name is confusing, it's a set-function --andrej: yes, true. I have added setValue(). Note: The value you set is left "as is", thus it is *not* rounded to the next grid. "Grid rounding" will occure on change (see onChangeByArrow, onChangeByInput, ...). #### Tags:
access: | public
#### Parameters:
string | val | val (new value)
[ Top ] ### method onChangeByArrow [line 1197]
`void onChangeByArrow( bool leftOrRight)`
#### Tags:
access: | public
#### Parameters:
bool | leftOrRight | leftOrRight (false=left, true=right. as with politics :)
[ Top ] ### method onChangeByClick [line 1137]
`void onChangeByClick( object event event)`
If a browser does not support that way of changing the slider value, nothing gets done. #### Tags:
access: | public
#### Parameters:
object event | event | (the event object)
[ Top ] ### method onChangeByInput [line 1168]
`void onChangeByInput( string val, bool isBlur)`
Fires when the user inputs a new value into the input field. #### Tags:
access: | public
#### Parameters:
string | val | val (new value)
bool | isBlur | isBlur (if it's a onChange event set to false, on an onBlur event set to true.)
[ Top ] ### method render [line 638]
`void render( string tagId)`
Render function. #### Tags:
access: | public
#### Parameters:
string | tagId | tagId (ID of the element in that we render the slider.)
[ Top ] ### method setArrowIconLeft [line 982]
`void setArrowIconLeft( string imgName, int width, int height)`
Sets an image to be used by the slider #### Tags:
see: | Bs_Slider::$imgDir
access: | public
#### Parameters:
string | imgName | imgName (on path)
int | width | width if image in pixel
int | height | height if image in pixel
[ Top ] ### method setArrowIconRight [line 987]
`void setArrowIconRight( string imgName, int width, int height)`
Sets an image to be used by the slider #### Tags:
see: | Bs_Slider::$imgDir
access: | public
#### Parameters:
string | imgName | imgName (on path)
int | width | width if image in pixel
int | height | height if image in pixel
[ Top ] ### method setBackgroundImage [line 1001]
`void setBackgroundImage( string src, string repeat)`
Sets a background image. #### Tags:
access: | public
#### Parameters:
string | src | src
string | repeat | repeat (something like 'no-repeat')
[ Top ] ### method setDisabled [line 1050]
`void setDisabled( bool b)`
Disables (or re-enables) the whole slider. if the param b is not specified, the current disabled mode will be toggled (inverted). #### Tags:
status: | experimental (or still at work)
since: | bs4.4
access: | public
#### Parameters:
bool | b | b (true=disabled, false=enabled)
[ Top ] ### method setDisplay [line 1020]
`void setDisplay( int display)`
How the slider should be seen in the browser.
       (rtfm about css)
       0 = display:none
       1 = visibility:hidden
       2 = display:block
#### Tags:
see: | _display
access: | public
#### Parameters:
int | display | display
[ Top ] ### method setSliderIcon [line 977]
`void setSliderIcon( string imgName, int width, int height)`
Sets an image to be used by the slider #### Tags:
see: | Bs_Slider::$imgDir
access: | public
#### Parameters:
string | imgName | imgName (on path)
int | width | width if image in pixel
int | height | height if image in pixel
[ Top ] ### method setValue [line 1224]
`void setValue( string val)`
Sets a new value. #### Tags:
access: | public
#### Parameters:
string | val | val (new value)
[ Top ] ### method updateHandle [line 1395]
`void updateHandle( int newPos)`
Slides to new relative position, in other words "moves the handle". #### Tags:
access: | public
#### Parameters:
int | newPos | newPos in pixel
[ Top ] ### method updateValueField [line 1416]
`void updateValueField( mixed val)`
Updates the value of the input field. #### Tags:
see: | Bs_Slider::updateValueText()
access: | public
#### Parameters:
mixed | val | val (string or number)
[ Top ] ### method updateValueText [line 1429]
`void updateValueText( mixed val)`
Updates the value of the text box. #### Tags:
see: | Bs_Slider::updateValueField()
access: | public
#### Parameters:
mixed | val | val (string or number)
[ Top ] Documentation generated on Mon, 29 Dec 2003 22:18:28 +0100 by phpDocumentor 1.2.3