| javascript_components

# Class: Bs_FlipFlop Source Location: /components/flipflop/Bs_FlipFlop.class.js.php
### Class Overview
A "better" multiple select field. #### Author(s): andrej arn <at blueshoes dot org> #### Copyright: blueshoes.org | ### Variables $buttonDeselect $buttonDeselectAll $buttonSelect $buttonSelectAll $captionLineClass $fieldAvailableCssClass $fieldSelectedCssClass $hiddenFieldName $maxSelectedNumber $maxSelectedWarning $moveOnClick $moveOnDblClick $showCaptionLine $textAvailable $textAvailableCssClass $textSelected $textSelectedCssClass $_constructor | ### Methods alertMaxSelectionWarning attachEvent convertField deselectAll deselectSelected fireEvent getDisabled getValue hasEventAttached howManySelected maxSelectionReached moveAvailableOptionToSelected moveSelectedOptionToAvailable onClickAvailable onClickSelected onDblClickAvailable onDblClickSelected selectAll selectSelected setDisabled setOptions setRenderOrientation _constructor
### Inherited Variables | ### Inherited Methods
### Class Details [line 31] A "better" multiple select field. website: http://www.blueshoes.org/en/javascript/flipflop/
     PHP developers note:
       your field name needs to end with the [] brackets. read:
       http://www.php.net/manual/en/faq.html.php#faq.html.select-multiple
       "How do I get all the results from a select multiple HTML tag?"
Includes (+Dependences):

    1     <script type="text/javascript" src="/_bsJavascript/core/lang/Bs_Misc.lib.js"></script>
    2        <script type="text/javascript" src="/_bsJavascript/core/form/Bs_FormFieldSelect.class.js"></script>
    3        <script type="text/javascript" src="/_bsJavascript/components/flipflop/Bs_FlipFlop.class.js"></script>
    4        <script type="text/javascript" src="/_bsJavascript/components/toolbar/Bs_Button.class.js"></script>
#### Tags:
copyright: | blueshoes.org
author: | andrej arn <at blueshoes dot org>
[ Top ] ### Class Variables #### $buttonDeselect = [line 61] reference to the 'de-select' button. #### Tags:
var: | of Bs_Button)
access: | public
Type: | object (instance
[ Top ] #### $buttonDeselectAll = [line 68] reference to the 'de-select-all' button. #### Tags:
var: | of Bs_Button)
access: | public
Type: | object (instance
[ Top ] #### $buttonSelect = [line 47] reference to the 'select' button. #### Tags:
var: | of Bs_Button)
access: | public
Type: | object (instance
[ Top ] #### $buttonSelectAll = [line 54] reference to the 'select-all' button. #### Tags:
var: | of Bs_Button)
access: | public
Type: | object (instance
[ Top ] #### $captionLineClass = [line 130] the css class for the this.showCaptionLine feature. #### Tags:
see: | var showCaptionLine
access: | public
Type: | mixed
[ Top ] #### $fieldAvailableCssClass = [line 75] the css class name to use for the 'available' select field. #### Tags:
var: | fieldAvailableCssClass
access: | public
Type: | string
[ Top ] #### $fieldSelectedCssClass = [line 82] the css class name to use for the 'selected' select field. #### Tags:
var: | fieldSelectedCssClass
access: | public
Type: | string
[ Top ] #### $hiddenFieldName = [line 193] name of the hidden form field. the method convertField() uses the field name of the field you convert. don't set it here. if it does not end with the [] brackets already, they will be added. multiple fields in php need that. #### Tags:
var: | hiddenFieldName
access: | public
Type: | string
[ Top ] #### $maxSelectedNumber = [line 160] you can limit the number of selectable options, for example 3. then no more than 3 options can be in the selected list at a time. #### Tags:
var: | maxSelectedNumber
see: | var this.maxSelectedWarning, this.maxSelectionReached();
access: | public
Type: | int
[ Top ] #### $maxSelectedWarning = 'No more than __maxSelectedNumber__ options can be selected.' [line 170] the error message for this.maxSelectedNumber. the string '__maxSelectedNumber__' is a placeholder for the number specified in this.maxSelectedNumber. #### Tags:
var: | maxSelectedWarning
see: | var this.maxSelectedNumber, this.maxSelectionReached();
access: | public
Type: | string
[ Top ] #### $moveOnClick = false [line 151] if the elements should be moved on a single click. moving means from available to selected and vice versa. #### Tags:
var: | moveOnClick
see: | var moveOnDblClick
access: | public
Type: | bool
[ Top ] #### $moveOnDblClick = true [line 140] if the elements should be moved on a double click. moving means from available to selected and vice versa. #### Tags:
var: | moveOnDblClick
see: | var moveOnClick
access: | public
Type: | bool
[ Top ] #### $showCaptionLine = false [line 123] if your select field is too small to show the full captions of the options (width), you can enable this feature. it will show the full caption of the last selected option (of both fields, 'available' and 'selected') below the fields. have a look at the examples. #### Tags:
see: | var captionLineClass
access: | public
Type: | mixed
[ Top ] #### $textAvailable = 'Available:' [line 89] the caption above the 'available' field. #### Tags:
var: | textAvailable
access: | public
Type: | string
[ Top ] #### $textAvailableCssClass = [line 97] css class name for the this.textAvailable string. #### Tags:
var: | textAvailableCssClass
see: | var textAvailable
access: | public
Type: | string
[ Top ] #### $textSelected = 'Selected:' [line 104] the caption above the 'selected' field. #### Tags:
var: | textSelected
access: | public
Type: | string
[ Top ] #### $textSelectedCssClass = [line 112] css class name for the this.textSelected string. #### Tags:
var: | textAvailableCssClass
see: | var textSelected
access: | public
Type: | string
[ Top ] #### $_constructor = [line 807]
Type: | mixed
[ Top ] ### Class Methods ### method alertMaxSelectionWarning [line 648]
`void alertMaxSelectionWarning( )`
alerts the "max selection reached" warning. no more options can be selected, unless others are dropped. [ Top ] ### method attachEvent [line 762]
`void attachEvent( string trigger, mixed yourEvent)`
attaches an event. the following triggers can be used: 'onBeforeChange' 'onAfterChange' the onXXXChange events fire when the wheel is used, a button (up/down) is clicked, cursor up or down is pushed. but they do NOT fire when you use the api methods setValue(), increase() and decrease(). because then you already know what's happening. the events will be executed in the order they were registered. if an onBeforeXXX event you've attached returns bool FALSE, it will stop executing any other attached events in that queue, and it will quit. example: if you attach an onBeforeChange event, and your code returns FALSE, the change won't be done at all. examples: myObj.attachEvent('onBeforeChange', myFunction); then your function myFunction() receives one param, it is a reference to this object (myObj). myObj.attachEvent('onBeforeChange', "if (true) return false;"); this is an example with code attached that will be evaluated. #### Tags:
see: | var this._attachedEvents
access: | public
#### Parameters:
string | trigger | trigger
mixed | yourEvent | yourEvent (string (of code) or function)
[ Top ] ### method convertField [line 282]
`void convertField( string elementId)`
replaces the existing select field specified with the flipflop fields. #### Tags:
access: | public
#### Parameters:
string | elementId | elementId
[ Top ] ### method deselectAll [line 482]
`void deselectAll( )`
moves all items of the 'selected' field to the 'available' field. #### Tags:
access: | public
[ Top ] ### method deselectSelected [line 472]
`void deselectSelected( )`
moves the selected items of the 'selected' field to the 'available' field. #### Tags:
access: | public
[ Top ] ### method fireEvent [line 790]
`void fireEvent( string trigger)`
fires the events for the trigger specified. #### Parameters:
string | trigger | trigger
[ Top ] ### method getDisabled [line 697]
`bool getDisabled( )`
disables/enables the field. #### Tags:
since: | bs4.5
see: | Bs_FlipFlop::setDisabled(), var _disabled
access: | public
[ Top ] ### method getValue [line 409]
`array getValue( )`
returns an array with the keys of the selected elements as vector. #### Tags:
return: | (vector)
access: | public
[ Top ] ### method hasEventAttached [line 780]
`bool hasEventAttached( string trigger)`
tells if any event is attached for the trigger specified. #### Tags:
access: | public
#### Parameters:
string | trigger | trigger
[ Top ] ### method howManySelected [line 661]
`int howManySelected( )`
tells how many options are currently selected. #### Tags:
return: | (0-n)
access: | public
[ Top ] ### method maxSelectionReached [line 638]
`bool maxSelectionReached( )`
tells if the this.maxSelectedNumber is reached already. #### Tags:
see: | vars this.maxSelectedNumber, this.maxSelectedWarning
access: | public
[ Top ] ### method moveAvailableOptionToSelected [line 493]
`bool moveAvailableOptionToSelected( string optionValue)`
moves the option specified from the 'available' field to the 'selected' field. #### Tags:
access: | public
#### Parameters:
string | optionValue | optionValue (the .value attribute of the option you want to move)
[ Top ] ### method moveSelectedOptionToAvailable [line 509]
`bool moveSelectedOptionToAvailable( string optionValue)`
moves the option specified from the 'selected' field to the 'available' field. #### Tags:
access: | public
#### Parameters:
string | optionValue | optionValue (the .value attribute of the option you want to move)
[ Top ] ### method onClickAvailable [line 520]
`void onClickAvailable( )`
fires on a single click on the 'available' select field. [ Top ] ### method onClickSelected [line 530]
`void onClickSelected( )`
fires on a single click on the 'selected' select field. [ Top ] ### method onDblClickAvailable [line 540]
`void onDblClickAvailable( )`
fires on a double click on the 'available' select field. [ Top ] ### method onDblClickSelected [line 550]
`void onDblClickSelected( )`
fires on a double click on the 'selected' select field. [ Top ] ### method selectAll [line 462]
`void selectAll( )`
moves all items of the 'available' field to the 'selected' field. #### Tags:
access: | public
[ Top ] ### method selectSelected [line 452]
`void selectSelected( )`
moves the selected items of the 'available' field to the 'selected' field. #### Tags:
access: | public
[ Top ] ### method setDisabled [line 673]
`void setDisabled( bool disabled)`
disables/enables the field. #### Tags:
since: | bs4.5
see: | Bs_FlipFlop::getDisabled(), var _disabled
access: | public
#### Parameters:
bool | disabled | disabled
[ Top ] ### method setOptions [line 421]
`? setOptions( array options)`
#### Tags:
since: | bs4.5
access: | public
#### Parameters:
array | options | options (hash)
[ Top ] ### method setRenderOrientation [line 623]
`void setRenderOrientation( mixed upDown)`
how to render the fields. default is left-to-right. if true then top-to-bottom will be done. #### Tags:
var: | upDown
see: | var this._renderTopToBottom
access: | public
[ Top ] ### method _constructor [line 244]
`void _constructor( )`
constructor. [ Top ] Documentation generated on Mon, 29 Dec 2003 22:18:23 +0100 by phpDocumentor 1.2.3