I am invoking a
js library file name selection.
js to a static page using the below.
var selectionobj = new Selection('grid1',{selectedClassName:'GridColor',o nSelect:test()});
where
- grid1 is a element name
- selectedClassName is an ooption value
- onSelect an event handler
- GridColor is CSS class name and test() is function.
- test() is function
The code is
<html>
<head>
<title>Selection Grid</title>
<link rel='stylesheet' type='text/css' href='css/selection.css'>
<script type='text/javascript' src='
js/prototype.
js'></script>
<script type='text/javascript' src='
js/selection.
js'></script>
<script type='text/javascript'>
$(grid1).observe('click', function(event){
var selectionobj = new Selection('grid1',{selectedClassName:'GridColor',o nSelect:test()});
})
</script>
</head>
<body>
<div class='Layout' id='GridLayout'>
<div class='GridBox' id='grid1' name='grid1'>
hai
</div>
</div>
</body>
</html>
so onSelected the element it should adds a css class and onDeselected it removes the css class.
select select function is
_select : function ( element, event )
//-----------------------------------
{
// is the element presently selected?
if ( !element._selected )
{
// if not ...
// are there any elements selected?
if ( this._selectedCount > 0 )
{
// if so ...
// are mutliple selections pemited?
if ( this.options.multiple )
{
// if so ...
// is there no selection limit or, if there is a limit, are we
// currently below it?
if ( !this.options.limit ||
this._selectedCount << this.options.limit )
{
// if so ...
// is there no specified onSelect handler or, if it was specified,
// did it return true?
if ( typeof this.options.onSelect != 'function' ||
this.options.onSelect( event, element ) )
{
// if so ...
// select the element
element._deselected = false;
element._selected = true;
this._setElementClassName ( element );
// are there any other selected elements?
if ( !this._selectCount )
// if not, mark all other elements as 'deselected'
this._setDeselected ();
// increment the selection count
this._selectedCount++;
// invoke the selected handler, if specified
if ( typeof this.options.onSelected == 'function' )
this.options.onSelected( element );
}
}
}
// otherwise, mutliple selections are not permited ...
else
{
// is there no specified onSelect handler or, if it was specified,
// did it return true?
if ( typeof this.options.onSelect != 'function' ||
this.options.onSelect( event, element ) )
{
// if so ...
// clear the selection
this.clear ( true );
// select the element
element._deselected = false;
element._selected = true;
this._setElementClassName ( element );
// mark all other elements as 'deselected'
this._setDeselected ();
// increment the selection count
this._selectedCount++;
// invoke the selected handler, if specified
if ( typeof this.options.onSelected == 'function' )
this.options.onSelected( element );
}
}
}
// otherwise, there is no current selection
else
{
// is there no specified onSelect handler or, if it was specified,
// did it return true?
if ( typeof this.options.onSelect != 'function' ||
this.options.onSelect( event, element ) )
{
// if so ...
// select the element
element._deselected = false;
element._selected = true;
this._setElementClassName ( element );
// mark all other elements as 'deselected'
this._setDeselected ();
// increment the selection count
this._selectedCount++;
// invoke the selected handler, if specified
if ( typeof this.options.onSelected == 'function' )
this.options.onSelected( element );
}
}
}
// otherwise, the clicked on element is currently selected.
else
{
// is there no specified onDeselect handler or, if it was specified,
// did it return true?
if ( typeof this.options.onDeselect != 'function' ||
this.options.onDeselect( event, element ) )
{
// if so ...
// select the element
element._selected = false;
// increment the selection count
this._selectedCount--;
// are there any other selected elements?
if ( this._selectCount )
// if so, mark this element as deselected
element._deselected = true;
else
// if not, reset all deselected elements
this._resetDeselected ();
// set the elements class name
this._setElementClassName ( element );
// invoke the selected handler, if specified
if ( typeof this.options.onSelected == 'function' )
this.options.onDeselected( element );
}
}
},
//
// Actually deselect the element
//
_deselect: function ( element, event )
//------------------------------------
{
var element = $( element );
// is there no specified onDeselect handler or, if it was specified,
// did it return true?
if ( typeof this.options.onDeselect != 'function' ||
this.options.onDeselect( event, element ) )
{
// if so ...
// select the element
element._selected = false;
// increment the selection count
this._selectedCount--;
// are there any other selected elements?
if ( this._selectCount )
// if so, mark this element as deselected
element._deselected = true;
else
// if not, reset all deselected elements
this._resetDeselectedClassName ();
// set the elements class name
this._setElementClassName ( element );
// invoke the selected handler, if specified
if ( typeof this.options.onSelected == 'function' )
this.options.onDeselected( element );
}
},
and the css file is
.Layout{
border: 1px solid blue;
width: 385px;
height: 383px;
padding-bottom:5px;
}
.GridRows{
width: 300px
height: 30px;
}
.GridBox{
border: 1px solid red;
width: 30px;
height: 30px;
margin: 4px;
float: left;
}
.GridColor{
width: 30px;
height: 30px;
margin: 4px;
float: left;
border: 1px solid green;
}
Kindly help me to invoke the
js correctly
Invoking selection.js library file in static page
