2
I Use This!
Activity Not Available

Project Summary

IntroductionA progressive enhancement to form elements. It provides a simpler alternative with the following advantages:

Easier for users to understand and interact with than regular form elements. Users know how to interact with it sans instruction. Doesn't require user to Ctrl-Click or Shift-Click multiple elements. Instead users of your form can add or remove elements individually, without risk of losing those that have already been selected. Selected elements are always visible (within the confines of your interface) while unselected elements are always hidden (within a regular ). Unlike regular option elements, those on asmSelect are optionally sortable with drag and drop (this part requires jQuery UI). asmSelect hides, maintains and updates the original so that no changes are required to existing code. If a user does not have javascript, then of course the regular form element is used instead. If the original form element is modified by some other jQuery or javascript code, the change will be reflected in the asmSelect as well. Try a Live Example Article about the advantages and disadvantages of this approach and others RequirementsjQuery 1.2.6 or newer An HTML/XHTML document that contains one or more form elements. UsageInclude jquery, asmSelect, and css in document head:

Use a jQuery selector in your document ready function:
$(document).ready(function() {
$("select[multiple]").asmSelect();
});
If desired, you can specify options when you call the plugin:

$(document).ready(function() {
$("select[multiple]").asmSelect({
sortable: true,
animate: true,
addItemTarget: 'top'
});
});
To optionally set a label inside the select, set the title attribute:

...

OptionsThe following options may be specified using the format in the example directly above this section.

Primary OptionslistType: Specify what type of list will be created as part of the asmSelect. Allowed values: 'ol' or 'ul' Default: 'ol' sortable: May the user drag and drop to sort the list of elements they have selected? Allowed values: true or false Default: false Note: In order to use this option, you must have jQuery-UI Draggables, Droppables, and Sortables enabled. highlight: Show a quick highlight of what item was added or removed? Allowed values: true or false Default: false animate: Animate the adding or removing of items from the list? Allowed values: true or false Default: false hideWhenAdded: Stop showing in select after item has been added? Allowed values: true or false Default: false Note: Only functional in Firefox 3 at this time. addItemTarget: Where to place new selected items that are added to the list. Allowed values: 'top' or 'bottom' Default: 'bottom' debugMode: Keeps original select multiple visible so that you can monitor live changes made to it when debugging. Default: false Text LabelsremoveLabel: Text used for the remove link of each list item. Default: 'remove' highlightAddedLabel: Text that precedes highlight of item added. Default: 'Added: ' highlightRemovedLabel: Text that precedes highlight of item removed. Default: 'Removed: ' Modifiable CSS ClassescontainerClass: Class for container that wraps the entire asmSelect. Default: 'asmContainer' selectClass: Class for the newly created . Default: 'asmSelect' listClass: Class for the newly created list of listType (ol or ul). Default: 'asmList'

listSortableClass: Another class given to the list when sortable is active. Default: 'asmListSortable'

listItemClass: Class given to the list items. Default: 'asmListItem' listItemLabelClass: Class for the label text that appears in list items. Default: 'asmListItemLabel' removeClass: Class given to the remove link in each list item. Default: 'asmListItemRemove'

highlightClass: Class given to the highlight . Default: 'asmHighlight'

Known IssuesIn Firefox (all versions), if your form has an asmSelect that precedes radio buttons or checkboxes, then you should set Firefox's autocomplete to off. Otherwise, if the user manually reloads the page containing the form, it's possible for radio/checkbox values to be wrong. This is not an issue with asmSelect, but rather a general issue with Firefox and dynamic form fields. See this issue report for more information The animating of adding/removing items is not as smooth in IE6/IE7 as it is in other browsers. There appears to be an issue with jQuery slide effects on list items with IE, so hopefully this will not be an issue forever. If you don't like the animation behavior in IE, I suggest setting animate to false. (false is the default) In Safari 3 and Firefox 2, the 'add item' animation is not as smooth as in Firefox 3, though the removing is. Improvements need to be made here for more consistent animations across different browsers. The hideWhenAdded option only works in Firefox 3 at this time. All other browsers continue to show the added items, but they are greyed out (disabled) and not selectable. This may in fact be preferable since the disabled items are placeholders. In Internet Explorer, there is a slight gap between items that is not present in other browsers. Should be an easy fix with CSS, but haven't found it yet. In Internet Explorer 6 (IE6), when dealing with a larger list of items, IE6 will sometimes do some odd scrolling within the select after an item is selected. Also in IE6, when the list is sortable, the screen will flash every time you add an item. This appears to be getting triggered by the jQuery UI sortable("refresh") function that asmSelect calls. TODOAdd user definable callback functions for add and remove Make it possible for a selection in one asmSelect to alter the available options in another multiple select or regular select form field. Set a limit for max number of selected items. When the list is sortable, the items will take on a new look with something tactile to make it more obvious that they can be dragged. Please let me know if you have any other suggestions. Please NoteDisclaimer - This is a beta version, and as such is not intended for production use yet. If you come across any bugs or issues, or if you see room for improvement in the way it works, or the underlying code, please contact me. As of July 15th, 2008, asmSelect has been confirmed to work properly with Firefox 2 & 3, Safari 3, IE6, IE7, and Opera 9.5. There are some issues with IE6. See Known Issues above. Copyright 2008, 2009 by Ryan Cramer

Tags

No tags have been added

In a Nutshell, jquery-asmselect...

 No code available to analyze

Open Hub computes statistics on FOSS projects by examining source code and commit history in source code management systems. This project has no code locations, and so Open Hub cannot perform this analysis

Is this project's source code hosted in a publicly available repository? Do you know the URL? If you do, click the button below and tell us so that Open Hub can generate statistics! It's fast and easy - try it and see!

Add a code location

MIT License
Permitted

Commercial Use

Modify

Distribute

Sub-License

Private Use

Forbidden

Hold Liable

Required

Include Copyright

Include License

These details are provided for information only. No information here is legal advice and should not be used as such.

All Licenses

This Project has No vulnerabilities Reported Against it

Did You Know...

  • ...
    Black Duck offers a free trial so you can discover if there are open source vulnerabilities in your code
  • ...
    check out hot projects on the Open Hub
  • ...
    in 2016, 47% of companies did not have formal process in place to track OS code
  • ...
    learn about Open Hub updates and features on the Open Hub blog

 No code available to analyze

Open Hub computes statistics on FOSS projects by examining source code and commit history in source code management systems. This project has no code locations, and so Open Hub cannot perform this analysis

Is this project's source code hosted in a publicly available repository? Do you know the URL? If you do, click the button below and tell us so that Open Hub can generate statistics! It's fast and easy - try it and see!

Add a code location

Community Rating

Be the first to rate this project
Click to add your rating
   Spinner
Review this Project!
Sample ohloh analysis