Using Dropdown as a fancy form field
Not before time, I've updated my Dropdown plugin for jQuery. It now supports a new 'form field' mode, meaning you can use Dropdown as a fancy alternative to a element, rather than just as a navigation tool.
As you'd expect of a real , it submits a value to the server once the form is submitted.
It does this by creating a hidden field, whose value is updated every time an 'option' in the dropdown is selected. The name of this hidden field (i.e. the name of the value that should be sent to the server on submit) is denoted a parameter at set-up. Here's an example of using Dropdown in form field mode:
1new Dropdown({
2 mode: 'form',
3 data: [{val: 1, text: 'dog'}, {val: 2, text: 'cat'}, {val: 3, text: 'platipus'}],
4 startText: 'Select an option...',
5 fieldName: 'animal'
6});
Head over here to download, get usage info or view a demo.
post a commentjQuery drop-down selector
UI / UX developers have long wished the built-in was a little more tangible, rather than a bunch of options that have no meaning until you set up some Javascript to detect and act on their selection.
Dropdown is a simulation of the in-built , except with links, not options, and allowing you to specify the behaviour of each link (callback? disabled?) and precisely how the drop-down looks.
Head over here to download, get usage info or view a demo.
You call it by running dropdown(linkData), where 'linkData' is an array containing objects that hold data about each link, like so:
1dropdown([
2 {url: 'http://www.yahoo.co.uk', text: 'Yahoo!'],
3 {text: 'Bing', click: function() {
4 alert("Sorry - we're not going to Bing right now");
5 }},
6 {url: 'http://www.google.co.uk', text: 'Google', disabled: true}
7]);
As with everything I write, it's just one file. No dependent HTML or CSS - everything's DOM-scripted by the scirpt and styled within it, too.
post a comment
