jQuery drop-down selector
Overview
Dropdown is a Javascript/CSS-powered simulation of the in-built , but more tangible. It can work either as a navigation tool or as a form field. In the case of the latter, a value is submitted to the server once the form is submitted, just as you'd expect with a real element.
Example 1 - navigation
Where would you like to navigate to? (try all three options)
Here's the code behind this example:
1new Dropdown({
2 mode: 'nav',
3 data: [
4 {text: 'Select a site...'},
5 {
6 url: 'http://www.google.com',
7 click: function() {
8 return confirm("Are you sure you want to go to Google?");
9 },
10 text: 'Google'
11 },
12 {
13 url: 'http://www.yahoo.co.uk',
14 text: 'Yahoo!'
15 },
16 {
17 url: 'https://mitya.co.uk',
18 text: "Mitya's website"
19 }]
20});
Example 2 - form field
Dropdown can also be used as a fancy alternative to a select form field. Like its genuine counterpart, it will send a value to the server once the form is submitted.
Click to get the value of the selected 'option'
Here's the code behind this example:
1new Dropdown({
2 mode: 'form',
3 data: [{text: 'Select an animal...'}, {val: 1, text: 'dog'}, {val: 2, text: 'cat'}, {val: 3, text: 'platipus'}],
4 fieldName: 'animal'
5});
Usage & params
In your page, call new Dropdown(data), where 'data' is an object of parameters including:
mode (str) - either 'nav' or 'form', depending on whether you want a navigational tool or a form field
cssClass (str) - the name of a CSS class to apply to further style the drop-down, in addition to any styling specified in the config section of the script itself
appendTo (str) - a jQuery selector string targeting the element you wish to append to the dropdown to. To write the dropdown in place, i.e. via document.write(), omit this param.
data (array) - a multi-dimensional array holding an object for each link (in nav mode) or option (in form mode), each of which has parameters depending on the current mode:
In nav mode:
-- url (string) - the URL to go to when the link is clicked
-- text (string) - the link text for the link
--- img (string) - an image that should appear with the option (positioned and sized in CSS)
-- click (func) - a function to be invoked when the link is clicked (like with all event callbacks, set this up to receive one argument if you want to access the event object inside the function)
-- disabled (bool, default: false) - if true, the link will look disabled and will not respond if clicked
In form field mode
-- val (string) - the option's value (if null, the option's text will be used as the value)
-- text (string) - the option's text
--- img (string) - an image that should appear with the option (works same as in 'nav' mode)
-- click (func) - a function to be invoked when the link is clicked (works same as in 'nav' mode)
Notes
Columns
By default, the script will sort your drop-down into two columns of links if you feed it more than 5 links. You can change this minimum value by updating the line in the script that begins this.numCols =...
Navigation mode: HREFs vs. click events
In the majority of cases when using Dropdown in navigation mode, you won't want to give an item both a HREF and a click callback. One exception might be as per example 1 above, where navigation to the URL depends on some Javascript which should be evaluated first). If you do, and for this reason, note that the click callback will fire before the browser is asked to follow the HREF.
Comments (11)
Gareth, at 22/09/'10 14:36, said:
Gareth, at 22/09/'10 15:21, said:
Paul, at 23/10/'10 21:23, said:
Mitya, at 24/10/'10 11:13, said:
gubagu, at 10/12/'10 22:07, said:
Mitya, at 10/12/'10 23:41, said:
raghib.suleman, at 7/01/'11 10:17, said:
Michael Eaton, at 29/08/'11 19:45, said:
Mitya, at 30/08/'11 10:21, said:
Jambu, at 16/11/'11 16:39, said:
Mitya, at 25/11/'11 12:26, said: