PRODUCT DETAILS

Price: $19.99

Rating:

Author: DWBooster
Web: www.DWBooster.com

ADD TO CART AND CONTINUE:

PURCHASE & DOWNLOAD:

Preferred payment method:

Facebook-like selector widget

Facebook-like selector widget improves usability of ordinary multi-select input controls replacing them with new fancy facebook like selector, user friendly, with auto complete.

In ordinary multi-select form controls, if users need to select multiple items, then they have to click holding down the CTRL key (for Windows, the command buttonn for Mac). That can get annoying for users, especially with long list of selectable items.

Ordinary HTML select controls also are known to cause layout issues, for example if you need to put a layered div over a select, you will realize that Microsoft Internet Explorer 6 and lower will still display the select box.

With Facebook-like selector, the select control is turned into user-friendly, functional, searchable, and autocompletable widget.

Demo Video Tutorial Support Service

FEATURES

Facebook-like selector Dreamweaver Extension offers the following features:

Allows attaching a widget to forms select controls
The widget can be attached to existing select controls in previously designed forms, so is not required to create new select or have to add the select options again.

On the user side, the selector widget offers these useful features:

Search within available options, very useful if there are a lots of them.
The select control is replaced with an auto-complete input control.
Selected options are displayed in the control and can be removed in an easy way, by clicking on the cross, or just with backspace key using the keyboard.
Fully customizable via CSS.
Fancy and user-friendly.

See it in action in the following demo:

Select countries from the list, start typing in the control:

Tips:

Start typing the name of the country, and see how the suggestions appears below the input control.
Selected items can be unselected by clicking on the cross, or with the backspace key using the keyboard.
The options are accommodated inside the control if there are too many selected.
The replaced select control continues with it's normal behavior, so when the form is submitted the selected values can be read in the server side the same way the select control options are read.

REQUIREMENTS

Adobe Dreamweaver CS3 and later versions: Adobe Dreamweaver CS4, Adobe Dreamweaver CS5, Adobe Dreamweaver CS6, ...
The extension uses the new advanced features added to Dreamweaver CS3, so it does not work with older versions of Dreamweaver.

INSTALLATION AND USE

Extension installation

To install Facebook-like Selector Widget Extension, just execute the file .MXP that you receive, or use the Adobe Extension Manager software that comes with your Dreamweaver version.

Once the extension is installed, is required to restart Dreamweaver.

The extension adds an object to the Insert Bar and to the Insert menu under the Forms caregory of your Dreamweaver installation.

Applying the Multiselect widget to form fields

To apply the Multiselect Widget to a select control follow this steps:

Select a select control box in the design view of the document. Note that you may have previously designed the control, with their respective options.
With the control selected, go to Insert > Forms > Multiselect Widget in the Insert Bar or Insert Menu.
Upload to your live website all assets generated by the extension.

After insertion, you will see an outline around the select cotrol in the Dreamweaver design view, with a unique name assigneed to the widget and displayed in the label.The extension adds automatically all the code required to generate the Multiselect widget.

SCREEN SHOTS

- click image to enlarge -