jQuery Linkselect Plug-in v1.5 released!

Posted by Dan on Dec 23, 2011 @ 3:06 PM

Today a new version of the jQuery Linkselect Plug-in was released. The new version under went a ton of changes from the previous version and includes a much better CSS skinning mechanism (see the Linkselect Example.)

The coolest new feature is probably the "placeholder" support, which allows you to specify an <option /> element in your <select /> box to use as a label/placeholder. The "placeholder" <option /> tag uses the <option /> tag as the title of the dropdown menu that's always visible, but still selectable. Here's an example:

Here's a list of all the changes:

  • Revised CSS naming structure to make it to have multiple visual styles of linkselect elements on the same page. The changes in v1.5 are not backwards compatible, so you will need to update your CSS in order to upgrage to v1.5. You can either replace you existing CSS files with one included in the zip file, or you can modify your existing CSS files to match the new naming syntax (which for the most part is just changing the camel casing from "linkselectLink" to "linkselect-link", "linkselectLinkOpen" to "linkselect-link-open", etc. Also, all CSS classes now using the prefix "linkselect-" by default.
  • Added new "style" option. This replaces all the previous class* options. The default style is "linkselect" and is simply used as the prefix used for all the CSS classes. You can create custom linkselect skins by just copying one of the included CSS files and changing the prefix to match your style option value.
  • Added "text" API call to return the label of the currently selected option.
  • Added "destroy" API call to destroy a linkselect element and return to original select element.
  • Changed the "replaceOptions" API to add a new "includeFilter" argument. The API change is backwards compatible.
  • jQuery.delegate() is now used to monitor event changes
  • Changed <li /> elements to use "data-" attributes for custom attributes
  • Changed <li /> elements to use "data-value" for storing selectable value instead of the "rel" attribute.
  • Fixed issue with Chrome not correctly accepting focus when the linkselect element was clicked.
  • Events related to closing/resizing of the open linkselect element are now registered/unregistered when the menu opens. This helps improve performance when there are many linkselect elements on the page as it reduces the document.click events that fire to see if the menu should be closed.
  • Added ability to use both "name" and "id" attributes on a select element with different values.
  • Added new "placeholder" functionality. You can now give an option element a class of "placeholder" to have it used as a selectable title for the linkselect element. This allows you to use a "Please select..." option element in your select and have it used as the title of the linkselect. Users will be able to select this option, just like any other option element.
  • Fixed various positioning bugs.
Categories: JavaScript, HTML/ColdFusion

Comments for this entry have been disabled.