From affdb8bcd97275393c251eef86d8b2013abee7d8 Mon Sep 17 00:00:00 2001 From: Leborgne Date: Thu, 13 Mar 2014 15:47:49 +0100 Subject: [PATCH 1/2] Enabled/disable This one add enable and disable function --- Enable/desable | 379 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 379 insertions(+) create mode 100644 Enable/desable diff --git a/Enable/desable b/Enable/desable new file mode 100644 index 0000000..72d554b --- /dev/null +++ b/Enable/desable @@ -0,0 +1,379 @@ +//Title: Custom DropDown plugin by PC +//Documentation: http://designwithpc.com/Plugins/ddslick +//Author: PC +//Website: http://designwithpc.com +//Twitter: http://twitter.com/chaudharyp + +(function ($) { + + $.fn.ddslick = function (method) { + if (methods[method]) { + return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); + } else if (typeof method === 'object' || !method) { + return methods.init.apply(this, arguments); + } else { + $.error('Method ' + method + ' does not exists.'); + } + }; + + var methods = {}, + + //Set defauls for the control + defaults = { + data: [], + keepJSONItemsOnTop: false, + width: 260, + height: null, + background: "#eee", + selectText: "", + defaultSelectedIndex: null, + truncateDescription: true, + imagePosition: "left", + showSelectedHTML: true, + clickOffToClose: true, + embedCSS: true, + onSelected: function () { } + }, + + ddSelectHtml = '
', + ddOptionsHtml = '', + + //CSS for ddSlick + ddslickCSS = ''; + + //Public methods + methods.init = function (userOptions) { + //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'); + } + + //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 + if (!data) { + + var ddSelect = [], ddJson = options.data; + + //Get data from HTML select options + obj.find('option').each(function () { + var $this = $(this), thisData = $this.data(); + ddSelect.push({ + text: $.trim($this.text()), + value: $this.val(), + selected: $this.is(':selected'), + description: thisData.description, + imageSrc: thisData.imagesrc //keep it lowercase for HTML5 data-attributes + }); + }); + + //Update Plugin data merging both HTML select data and JSON data for the dropdown + if (options.keepJSONItemsOnTop) + $.merge(options.data, ddSelect); + 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; + + //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.imageSrc ? ' ' : '') + + (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.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); + From 59b6a08e14acf630eec43e017a5ced3b7f51fcb5 Mon Sep 17 00:00:00 2001 From: Leborgne Date: Thu, 13 Mar 2014 16:00:56 +0100 Subject: [PATCH 2/2] Update jquery.ddslick.js --- jquery.ddslick.js | 90 +++++++++++++++++++++++++++++------------------ 1 file changed, 55 insertions(+), 35 deletions(-) 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); +