Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

A super lightweight implementation of jquery custom selects. Please click the link below for a live demo. Please also see the blog post at http://www.rayui.com/archive/262

branch: master

Merge pull request #14 from shnist/master

Extended plugin with new alignTo option / setting
latest commit 32b63145f9
Ray Brooks authored April 19, 2013
Octocat-spinner-32 assets
Octocat-spinner-32 .gitattributes
Octocat-spinner-32 README.md
Octocat-spinner-32 index.html
README.md

Flyweight jQuery Custom Select

Dual licensed under the MIT or GPL Version 2 licenses.

This plugin implements a flyweight design pattern for jQuery custom select controls. It aims to mimic standard operating system behaviour whilst remaining consistent across platofrm and browser. By only holding one visible control element in memory at one time, it aims to reduce the number of DOM accesses and event binding operations. This can result in significantly reduced page render times on larger forms. It borrows accessibility design patterns from the Filament Group's jQuery UI Selectmenu keyboard navigable ARIA plugin, currently included with jQuery-UI. It requires jQuery 1.4+ to run and this is the only requirement.

Features

  • Lightweight
  • Extremely fast
  • Semantic markup
  • Fully customisable keyboard navigation
  • Fully customisable class names
  • Intelligent typeahead [REMOVED in favour of mimicking OS behaviour]
  • Option group support
  • Enable/disable
  • Graceful destroy, original select maintains state
  • Supports PIE.htc
  • Toggle hide first option element (for Please Select, etc) [REMOVED in favour of mimicking OS behaviour]
  • Togglable tabindex support (on by default)
  • Binds to original select change event
  • Javascript only 8KB compressed (2.5KB GZipped)
  • Works in all tested major browsers (FF 3.6/5.1, Chrome 11/12/15, IE 6/7/8/9)
  • Provides Mobile Webkit and Safari experience consistent with desktop

Todo

  • Label association
  • Rationalise WAI-ARIA roles

Settings

alignTo

Takes a string of the selector for a jQuery object. The left offset of the drop down is recalculated based on the parent's object left offset. The width is increased by the difference between the parent's left offset and the placeholder's original left offset.

$(select).flyweightCustomSelect({'alignTo': '.parent'});

Useful links

Something went wrong with that request. Please try again.