blueshoes php application framework and cms            javascript_components
[ class tree: javascript_components ] [ index: javascript_components ] [ all elements ]

Class: Bs_Slider

Source Location: /components/slider/Bs_Slider.class.js.php

Class Overview


A Slider Component.


Author(s):

Copyright:

  • blueshoes.org

Variables

Methods


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:

  1. Have a look at the example (see example link below)
  2. Create a function in the HTML-header called init(). Place the javascript code that instanciates and inits this component into init().
  3. Place an 'onLoad' in your body-tag: e.g. <body onLoad="init();">
  4. 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:




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