 |
 |
 |
 |
 |
 |
Free PHP Scripts
DbCon
vegUI Tutorial 12 - The Selector Widget
written by vegu on 22 Dec, 2006 04:05:18
A live example of this tutorial can be found here.All the image files used in this tutorial can be downloaded here.
API Documentation: The VegUISelector Element
A selector is another element that lets the user select a value out of multiple values. The user skips through the values by going either one step forward or one step back in the list using two arrow buttons.
The vegUI selector is one of the lesser complicated elements so this tutorial should be pretty short :)
As always we start by creating the element
Code: JavascriptSelector = Manager.get_new(VUI_SELECTOR);
The selector is made up of 3 child elements.
- Btn1
- The button that selects the previous item
- Btn2
- The button that selects the next item
- Label
- The text display that displays the currently selected item
Before we proceed to set up the child elements lets setup the selector itself by calling its set() or set_selector() method.
Code: JavascriptSelector.set(100,18,50,50);
Definition: VegUISelector.set_selector()
The first two arguments are width and height of the selector and argument three and four are it's x and y position.
We set up the buttons as we would set up any other button. First we define the css classes we will use for the buttons.
Code: CSS.btn_goleft_0 { background-image: url('btn_arrow_left_0.gif'); }
.btn_goleft_1 { background-image: url('btn_arrow_left_1.gif'); }
.btn_goright_0 { background-image: url('btn_arrow_right_0.gif'); }
.btn_goright_1 { background-image: url('btn_arrow_right_1.gif'); }Then we setup the buttons
Code: JavascriptSelector.Btn1.set(0,0,18,18,'btn_goleft_0', 'btn_goleft_1');
Selector.Btn2.set(0,0,18,18,'btn_goright_0', 'btn_goright_1');
Lastly we style the selector by assigning a css class to it and the label child element. First we add these css classes to our css code.
Code: CSS.selector {
background-color: #838383;
}
.selector_label {
color: #fff;
font: bold 10px Verdana, Arial, Helvetica;
} Code: JavascriptSelector.Label.T.className = 'selector_label';
Selector.T.className = 'selector';
If we would build and load the page now the text of the label child would be hugging the left button , we dont want that so lets move it a tad in order to simulate a padding.
Code: JavascriptSelector.Label.T.x = 10;
Selector.Label.T.y = 3;
Before we can build our selector we should add some items to it, we do that by filling its Items property - which is an array - with items. Items are added in [value, name] pairs. Like this:
Code: JavascriptSelector.Items = [
['#b2b2b2', 'Normal'],
['#9d9d9d', 'Dark'],
['#838383', 'Darker']
];
In this example the item labeled 'Normal' will be the one on the beginning of the selection list and the item labeled 'Darker' will be the one on the end of the selection list. Lets get interactive while were add it and define the selector's onchange function to change the background color of our manager element to the currently selected color.
Code: JavascriptSelector.event_add('onchange', function(a) {
Manager.Css.backgroundColor = a[0].value;
});Okay, now were ready to build our selector element :)
Code: JavascriptManager.build_element(Selector);
Thats pretty much all there is to the selector element, told you this would be a short one ;)
Next Up: The Property Set element
Related Posts
Your Comment
Comments
No comments yet.
