').attr('id', obj.attr('id') + '-dd-placeholder');
+ obj.replaceWith(placeholder);
+ obj = placeholder;
+
+ //Add classes and append ddSelectHtml & ddOptionsHtml to the container
+ obj.addClass('dd-container').append(ddSelectHtml).append(ddOptionsHtml);
+
+ // Inherit name attribute from original element
+ obj.find("input.dd-selected-value")
+ .attr("id", $(original).attr("id"))
+ .attr("name", $(original).attr("name"));
+
+ //Get newly created ddOptions and ddSelect to manipulate
+ var ddSelect = obj.find('.dd-select'),
+ ddOptions = obj.find('.dd-options');
+
+ //Set widths
+ ddOptions.css({ width: options.width });
+ ddSelect.css({ width: options.width, background: options.background });
+ obj.css({ width: options.width });
+
+ //Set height
+ if (options.height != null)
+ ddOptions.css({ height: options.height, overflow: 'auto' });
+
+ //Add ddOptions to the container. Replace with template engine later.
+ $.each(options.data, function (index, item) {
+ if (item.selected) options.defaultSelectedIndex = index;
+ ddOptions.append('
' +
+ '' +
+ (item.value ? ' ' + item.text + ' ' : '') +
+ (item.description ? ' ' + item.description + ' ' : '') +
+ ' ' +
+ ' ');
+ });
+
+ //Save plugin data.
+ var pluginData = {
+ settings: options,
+ original: original,
+ selectedIndex: -1,
+ selectedItem: null,
+ selectedData: null
+ }
+ obj.data('ddslick', pluginData);
+
+ //Check if needs to show the select text, otherwise show selected or default selection
+ if (options.selectText.length > 0 && options.defaultSelectedIndex == null) {
+ obj.find('.dd-selected').html(options.selectText);
+ }
+ else {
+ var index = (options.defaultSelectedIndex != null && options.defaultSelectedIndex >= 0 && options.defaultSelectedIndex < options.data.length)
+ ? options.defaultSelectedIndex
+ : 0;
+ selectIndex(obj, index);
+ }
+
+ //EVENTS
+ //Displaying options
+ obj.find('.dd-select').on('click.ddslick', function () {
+ open(obj);
+ });
+
+ //Selecting an option
+ obj.find('.dd-option').on('click.ddslick', function () {
+ selectIndex(obj, $(this).closest('li').index());
+ });
+
+ //Click anywhere to close
+ if (options.clickOffToClose) {
+ ddOptions.addClass('dd-click-off-close');
+ obj.on('click.ddslick', function (e) { e.stopPropagation(); });
+ $('body').on('click', function () {
+ $('.dd-open').removeClass('dd-open');
+ $('.dd-click-off-close').slideUp(50).siblings('.dd-select').find('.dd-pointer').removeClass('dd-pointer-up');
+ });
+ }
+ }
+ });
+ };
+
+ //Public method to select an option by its index
+ methods.select = function (options) {
+ return this.each(function () {
+ if (options.index !== undefined)
+ selectIndex($(this), options.index);
+ if (options.id)
+ selectId($(this), options.id);
+ });
+ }
+
+ //Public method to open drop down
+ methods.open = function () {
+ return this.each(function () {
+ var $this = $(this),
+ pluginData = $this.data('ddslick');
+
+ //Check if plugin is initialized
+ if (pluginData)
+ open($this);
+ });
+ };
+
+ //Public method to close drop down
+ methods.close = function () {
+ return this.each(function () {
+ var $this = $(this),
+ pluginData = $this.data('ddslick');
+
+ //Check if plugin is initialized
+ if (pluginData)
+ close($this);
+ });
+ };
+
+ //Public method to destroy. Unbind all events and restore the original Html select/options
+ methods.destroy = function () {
+ return this.each(function () {
+ var $this = $(this),
+ pluginData = $this.data('ddslick');
+
+ //Check if already destroyed
+ if (pluginData) {
+ var originalElement = pluginData.original;
+ $this.removeData('ddslick').unbind('.ddslick').replaceWith(originalElement);
+ }
+ });
+ }
+
+ //Public method to disable dropdown
+ methods.disable = function () {
+ return this.each(function () {
+ var $this = $(this);
+
+ $this.addClass('dd-disabled');
+ });
+ };
+
+ //Public method to enable a disabled dropdown
+ methods.enable = function () {
+ return this.each(function () {
+ var $this = $(this);
+ if ($this.hasClass('dd-disabled'))
+ $this.removeClass('dd-disabled');
+ });
+ };
+
+ //Private: Select id
+ function selectId(obj, id) {
+
+ var index = obj.find(".dd-option-value[value= '" + id + "']").parents("li").prevAll().length;
+ selectIndex(obj, index);
+
+ }
+
+ //Private: Select index
+ function selectIndex(obj, index) {
+
+ //Get plugin data
+ var pluginData = obj.data('ddslick');
+
+ //Get required elements
+ var ddSelected = obj.find('.dd-selected'),
+ ddSelectedValue = ddSelected.siblings('.dd-selected-value'),
+ ddOptions = obj.find('.dd-options'),
+ ddPointer = ddSelected.siblings('.dd-pointer'),
+ selectedOption = obj.find('.dd-option').eq(index),
+ selectedLiItem = selectedOption.closest('li'),
+ settings = pluginData.settings,
+ selectedData = pluginData.settings.data[index];
+
+ //Highlight selected option
+ obj.find('.dd-option').removeClass('dd-option-selected');
+ selectedOption.addClass('dd-option-selected');
+
+ //Update or Set plugin data with new selection
+ pluginData.selectedIndex = index;
+ pluginData.selectedItem = selectedLiItem;
+ pluginData.selectedData = selectedData;
+
+ //If set to display to full html, add html
+ if (settings.showSelectedHTML) {
+ ddSelected.html(
+ (selectedData.imageSrc ? '
' : '') +
+ (selectedData.text ? '
' + selectedData.text + ' ' : '') +
+ (selectedData.description ? '
' + selectedData.description + ' ' : '')
+ );
+
+ }
+ //Else only display text as selection
+ else ddSelected.html(selectedData.text);
+
+ //Updating selected option value
+ ddSelectedValue.val(selectedData.value);
+
+ //BONUS! Update the original element attribute with the new selection
+ pluginData.original.val(selectedData.value);
+ obj.data('ddslick', pluginData);
+
+ //Close options on selection
+ close(obj);
+
+ //Adjust appearence for selected option
+ adjustSelectedHeight(obj);
+
+ //Callback function on selection
+ if (typeof settings.onSelected == 'function') {
+ settings.onSelected.call(this, pluginData);
+ }
+ }
+
+ //Private: Close the drop down options
+ function open(obj) {
+ if (!obj.hasClass('dd-disabled')) {
+ var $this = obj.find('.dd-select'),
+ ddOptions = $this.siblings('.dd-options'),
+ ddPointer = $this.find('.dd-pointer'),
+ wasOpen = ddOptions.is(':visible');
+
+ //Close all open options (multiple plugins) on the page
+ $('.dd-click-off-close').not(ddOptions).slideUp(50);
+ $('.dd-pointer').removeClass('dd-pointer-up');
+ $this.removeClass('dd-open');
+
+ if (wasOpen) {
+ ddOptions.slideUp('fast');
+ ddPointer.removeClass('dd-pointer-up');
+ $this.removeClass('dd-open');
+ }
+ else {
+ $this.addClass('dd-open');
+ ddOptions.slideDown('fast');
+ ddPointer.addClass('dd-pointer-up');
+ }
+
+ //Fix text height (i.e. display title in center), if there is no description
+ adjustOptionsHeight(obj);
+ }
+ }
+
+ //Private: Close the drop down options
+ function close(obj) {
+ //Close drop down and adjust pointer direction
+ obj.find('.dd-select').removeClass('dd-open');
+ obj.find('.dd-options').slideUp(50);
+ obj.find('.dd-pointer').removeClass('dd-pointer-up').removeClass('dd-pointer-up');
+ }
+
+ //Private: Adjust appearence for selected option (move title to middle), when no desripction
+ function adjustSelectedHeight(obj) {
+
+ //Get height of dd-selected
+ var lSHeight = obj.find('.dd-select').css('height');
+
+ //Check if there is selected description
+ var descriptionSelected = obj.find('.dd-selected-description');
+ var imgSelected = obj.find('.dd-selected-image');
+ if (descriptionSelected.length <= 0 && imgSelected.length > 0) {
+ obj.find('.dd-selected-text').css('lineHeight', lSHeight);
+ }
+ }
+
+ //Private: Adjust appearence for drop down options (move title to middle), when no desripction
+ function adjustOptionsHeight(obj) {
+ obj.find('.dd-option').each(function () {
+ var $this = $(this);
+ var lOHeight = $this.css('height');
+ var descriptionOption = $this.find('.dd-option-description');
+ var imgOption = obj.find('.dd-option-image');
+ if (descriptionOption.length <= 0 && imgOption.length > 0) {
+ $this.find('.dd-option-text').css('lineHeight', lOHeight);
+ }
+ });
+ }
+
+})(jQuery);
+
diff --git a/jquery.ddslick.js b/jquery.ddslick.js
index 2cdfbb5..72d554b 100644
--- a/jquery.ddslick.js
+++ b/jquery.ddslick.js
@@ -1,4 +1,4 @@
-//Title: Custom DropDown plugin by PC
+//Title: Custom DropDown plugin by PC
//Documentation: http://designwithpc.com/Plugins/ddslick
//Author: PC
//Website: http://designwithpc.com
@@ -31,7 +31,7 @@
imagePosition: "left",
showSelectedHTML: true,
clickOffToClose: true,
- embedCSS: true,
+ embedCSS: true,
onSelected: function () { }
},
@@ -61,18 +61,18 @@
//Preserve the original defaults by passing an empty object as the target
//The object is used to get global flags like embedCSS.
var options = $.extend({}, defaults, userOptions);
-
+
//CSS styles are only added once.
- if ($('#css-ddslick').length <= 0 && options.embedCSS) {
- $(ddslickCSS).appendTo('head');
- }
+ if ($('#css-ddslick').length <= 0 && options.embedCSS) {
+ $(ddslickCSS).appendTo('head');
+ }
//Apply on all selected elements
return this.each(function () {
//Preserve the original defaults by passing an empty object as the target
//The object is used to save drop-down's corresponding settings and data.
var options = $.extend({}, defaults, userOptions);
-
+
var obj = $(this),
data = obj.data('ddslick');
//If the plugin has not been initialized yet
@@ -98,7 +98,7 @@
else options.data = $.merge(ddSelect, options.data);
//Replace HTML select with empty placeholder, keep the original
- var original = obj, placeholder = $('
').attr('id', obj.attr('id') + '-dd-placeholder');
obj.replaceWith(placeholder);
obj = placeholder;
@@ -173,7 +173,7 @@
ddOptions.addClass('dd-click-off-close');
obj.on('click.ddslick', function (e) { e.stopPropagation(); });
$('body').on('click', function () {
- $('.dd-open').removeClass('dd-open');
+ $('.dd-open').removeClass('dd-open');
$('.dd-click-off-close').slideUp(50).siblings('.dd-select').find('.dd-pointer').removeClass('dd-pointer-up');
});
}
@@ -184,7 +184,7 @@
//Public method to select an option by its index
methods.select = function (options) {
return this.each(function () {
- if (options.index!==undefined)
+ if (options.index !== undefined)
selectIndex($(this), options.index);
if (options.id)
selectId($(this), options.id);
@@ -228,13 +228,31 @@
}
});
}
-
- //Private: Select id
+
+ //Public method to disable dropdown
+ methods.disable = function () {
+ return this.each(function () {
+ var $this = $(this);
+
+ $this.addClass('dd-disabled');
+ });
+ };
+
+ //Public method to enable a disabled dropdown
+ methods.enable = function () {
+ return this.each(function () {
+ var $this = $(this);
+ if ($this.hasClass('dd-disabled'))
+ $this.removeClass('dd-disabled');
+ });
+ };
+
+ //Private: Select id
function selectId(obj, id) {
-
- var index = obj.find(".dd-option-value[value= '" + id + "']").parents("li").prevAll().length;
- selectIndex(obj, index);
-
+
+ var index = obj.find(".dd-option-value[value= '" + id + "']").parents("li").prevAll().length;
+ selectIndex(obj, index);
+
}
//Private: Select index
@@ -271,7 +289,7 @@
);
}
- //Else only display text as selection
+ //Else only display text as selection
else ddSelected.html(selectedData.text);
//Updating selected option value
@@ -295,30 +313,31 @@
//Private: Close the drop down options
function open(obj) {
-
- var $this = obj.find('.dd-select'),
+ if (!obj.hasClass('dd-disabled')) {
+ var $this = obj.find('.dd-select'),
ddOptions = $this.siblings('.dd-options'),
ddPointer = $this.find('.dd-pointer'),
wasOpen = ddOptions.is(':visible');
- //Close all open options (multiple plugins) on the page
- $('.dd-click-off-close').not(ddOptions).slideUp(50);
- $('.dd-pointer').removeClass('dd-pointer-up');
- $this.removeClass('dd-open');
-
- if (wasOpen) {
- ddOptions.slideUp('fast');
- ddPointer.removeClass('dd-pointer-up');
+ //Close all open options (multiple plugins) on the page
+ $('.dd-click-off-close').not(ddOptions).slideUp(50);
+ $('.dd-pointer').removeClass('dd-pointer-up');
$this.removeClass('dd-open');
- }
- else {
- $this.addClass('dd-open');
- ddOptions.slideDown('fast');
- ddPointer.addClass('dd-pointer-up');
- }
- //Fix text height (i.e. display title in center), if there is no description
- adjustOptionsHeight(obj);
+ if (wasOpen) {
+ ddOptions.slideUp('fast');
+ ddPointer.removeClass('dd-pointer-up');
+ $this.removeClass('dd-open');
+ }
+ else {
+ $this.addClass('dd-open');
+ ddOptions.slideDown('fast');
+ ddPointer.addClass('dd-pointer-up');
+ }
+
+ //Fix text height (i.e. display title in center), if there is no description
+ adjustOptionsHeight(obj);
+ }
}
//Private: Close the drop down options
@@ -357,3 +376,4 @@
}
})(jQuery);
+