/** * Dropdown class * Creates customly styleable dropdown from a -element to customize * @param object options for customizing the layout and behaviour of the dropdown * */ function Dropdown(elSelect, options){ this.cleanupOrphans(); if(typeof(elSelect) == 'object' && elSelect.tagName == 'SELECT' && jQuery.data(elSelect).hasDropDown != true) { jQuery.data(elSelect, 'hasDropDown', true); this.options = { itemsWithoutScroll : 20, // max items to show without vert. scrollbar dropdownEffect : '', // optional effect for opening dropdown, 'slide' or 'fade' effectDuration : 300, // duration of optional effect, in ms cssClassPrefix : 'customdd' // optional alternative prefix for css class, handy if you need different styles in one site }; jQuery.extend(this.options, options); // declare variables this.blnListOpen = false; // declare 'constants' this.EL_SELECT = jQuery(elSelect); this.EL_DROPDOWN = jQuery(''); this.ARR_LIST_ITEMS = []; this.INT_LIST_HEIGHT = 0; this.EL_TOGGLER = jQuery('
'); this.initialize(); } else { return false; } }; Dropdown.prototype = { /** * The init/controller function */ initialize: function() { this.EL_SELECT.hide(); this.createDropdown(); this.setStyles(); this.addEvents(); // this is executed already in case no 'load' event is triggered, for example with AJAX-calls this.positionList(); this.INT_LIST_HEIGHT = this.getListHeight(); jQuery(window).load(jQuery.proxy(function(){ this.positionList(); this.INT_LIST_HEIGHT = this.getListHeight(); }, this)); }, /** * Creates and injects new DOM elements, based on given on screen and * a