Skip to content
Lorenzo Stanco edited this page Jul 29, 2014 · 5 revisions

For an usage example see HowTo or a complete Demo.

FancySelect

Implements:

  • Options
  • Events

Syntax and options:

var myFancySelect = new FancySelect(element, options);
$(element).fancySelect(options); // Equivalent example
  • element: A <select> DOM element or ID.
  • options: (object) Options for the class. They are all listed below.
    • showText: If TRUE (default) keeps text in the dropdown menu.
    • showImages: If TRUE (default) show images in the dropdown menu.
    • className: A class name for CSS styling, default 'fancy-select'.
    • autoHide: If TRUE auto-hide the dropdown menu when user clicks outside.
    • autoScrollWindow: If TRUE auto-scroll browser window when FancySelect is out of viewport.
    • animateFade: If TRUE (default) animate the dropdown menu appearance.
    • legacyEvents: If TRUE fires “change” event for the original <select> element.
    • relativeTo: An element id or element reference for dropdown positioning, default document.body.
    • fx: An object for additional Fx options (default {'duration': 'short'}).

Events:

  • show: The dropdown menu appears.
  • hide: The dropdown menu disappears.
  • attach: FancySelect just replaced the <select> DOM element.
  • detach: The <select> DOM element is back.

Methods:

  • attach(): Replace the <select> DOM element with FancySelect.
  • detach(): Bring the <select> DOM element back.
  • select(value): Select a value.
  • show(): Show the dropdown menu.
  • hide(): Hide the dropdown menu.
  • toggle(): Show/hide the dropdown menu.

Elements

Methods:

  • fancySelect(options): Creates a new instance of FancySelect on elements.

Element

Methods:

  • fancySelect(options): Creates a new instance of FancySelect on the element.
  • fancySelectShow(): Show the FancySelect dropdown on the element.
  • fancySelectHide(): Hide the FancySelect dropdown on the element.
  • fancySelectToggle(): Toggles the FancySelect dropdown on the element.

Properties:

  • fancySelect: Retrieves the FancySelect instance of the element.
var myFancySelect = $('mySelect').get('fancySelect'); // Get instance