|
|||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Announcements
Want a new Job?
Chapters
Services
Feature Zones
|
Note: This is an unedited contribution. If this article is inappropriate,
needs attention or copies someone else's work without reference then please
Report This Article
Introduction
BackgroundAs you know in the HTML Constructor
var Arguments = {
Base: _Base, //Base reference where ListBox to be displayed.
Rows: _Rows, //No. of visible items.
Width: _Width, // Width of the ListBox.
NormalItemColor: _NormalItemColor, // Normal item color.
NormalItemBackColor: _NormalItemBackColor, // Normal item back color.
AlternateItemColor: _AlternateItemColor, // Alternate item color.
AlternateItemBackColor: _AlternateItemBackColor, // Alternate item back color.
SelectedItemColor: _SelectedItemColor, // Selected item color.
SelectedIItemBackColor: _SelectedIItemBackColor, // SelectedI item back color.
HoverItemColor: _HoverItemColor, // Hover item color.
HoverItemBackColor: _HoverItemBackColor, // Hover item back color.
HoverBorderdColor: _HoverBorderdColor, // Hover borderd color.
ClickEventHandler: _ClickEventHandler // Reference of the click event handler.
};
Example: var Arguments = {
Base: document.getElementById('base'),
Rows: 6,
Width: 300,
NormalItemColor: 'Black',
NormalItemBackColor: '#ffffff',
AlternateItemColor: 'Black',
AlternateItemBackColor: '#E0E0E0',
SelectedItemColor: '#ffffff',
SelectedIItemBackColor: '#E6A301',
HoverItemColor: '#ffffff',
HoverItemBackColor: '#2259D7',
HoverBorderdColor: 'orange',
ClickEventHandler: CheckBoxOnClick
};
You can asign each property of the var Arguments = {
Base: null,
Rows: null,
Width: null,
NormalItemColor: null,
NormalItemBackColor: null,
AlternateItemColor: null,
AlternateItemBackColor: null,
SelectedItemColor: null,
SelectedIItemBackColor: null,
HoverItemColor: null,
HoverItemBackColor: null,
HoverBorderdColor: null,
ClickEventHandler: null
};
Properties & their default values have been tabulated below:
Methods
Note: The LBItem is an var LBItem = {
IsSelected: _IsSelected, // true/false.
Text: _Text, // Item Text.
Value: _Value, // Item Value.
ItemIndex: _ItemIndex // Item Index.
};
Property
Event
The local anonymous method that responds to the var EventHandlerName = function(Sender, EventArgs) {}
where var EventArgs = {
Text: _Text, // Item Text.
Value: _Value, // Item Value.
ItemIndex: _ItemIndex // Item Index.
};
Using the ControlAdd the reference of the ListBox.js file in your web page as: <script type="text/javascript" src="JS/ ListBox.js"></script>
Create an <div id="base"></div>
Now Create a <script type="text/javascript"> var oListBox; window.onload = function() { var Arguments = { Base: document.getElementById('base'), Rows: 3, Width: 300, NormalItemColor: null, NormalItemBackColor: null, AlternateItemColor: null, AlternateItemBackColor: null, SelectedItemColor: null, SelectedIItemBackColor: null, HoverItemColor: null, HoverItemBackColor: null, HoverBorderdColor: null, ClickEventHandler: OnClick }; oListBox = new ListBox(Arguments); oListBox.AddItem('CodeProject.com','http://www.codeproject.com'); oListBox.AddItem('yahoo.com','http://www.yahoo.com/'); oListBox.AddItem('microsoft.com','http://www.microsoft.com/en/us/default.aspx'); oListBox.AddItem('asp.net','http://www.asp.net'); oListBox.AddItem('cricinfo.com','http://www.cricinfo.com/'); oListBox.AddItem('AOL','http://www.aol.com/'); oListBox.AddItem('STPL','http://stpl.biz'); } </script> In the above code, First an Argument ClickEventListener: OnClick
Where var OnClick = function(Sender, EventArgs)
{
//Code
}
Example: var OnClick = function(Sender, EventArgs)
{
var Message = new Array();
Message.push('IsSelected: ' + Sender.checked.toString());
Message.push('Text: ' + EventArgs.Text);
Message.push('Value: ' + EventArgs.Value);
Message.push('Index: ' + EventArgs.ItemIndex);
document.getElementById('DivMessage').innerHTML = Message.join('<br />');
}
This method will gets called when you will Invoke the window.onunload = function(){oListBox.Dispose(); }
ConclusionSo this is my approach to develop custom Browser CompatibilityI have tested this control on a number of web browsers.
|
||||||||||||||||||||||||||||||||||||||||||||||||||||