diff --git a/README b/README index 0a88fc1..5fa76d0 100644 --- a/README +++ b/README @@ -1,8 +1,5 @@ -ddSlick -Author: Prashant Chaudhary (http://designwithpc.com) -Plugin Demo & Documentation: http://designwithpc.com/Plugins/ddSlick - A free light weight jQuery plugin that allows you to create a custom drop down with images and description. +Plugin Demo & Documentation: http://designwithpc.com/Plugins/ddSlick About this plugin: @@ -11,8 +8,12 @@ Allows JSON to populate the drop down options. Converts your HTML select element to ddSlick. Uses Minimum css and no external stylesheets to download. Supports callback functions on selection. +Inherit onchange attribute from original element +Trigger onchange for hidden input Works as good even without images or description! Why is this plugin useful: -With traditional drop downs i.e. using you are limited to only text and value. But with this easily configurable jquery plugin, you can now create a custom drop down that can very well include images, a short description, along with your usual text and value. Take a look at the following demos in action. \ No newline at end of file +With traditional drop downs i.e. using you are limited to only text and value. But with this easily configurable jquery plugin, you can now create a custom drop down that can very well include images, a short description, along with your usual text and value. Take a look at the following demos in action. + +Author: Prashant Chaudhary (http://designwithpc.com) diff --git a/examples/data.js b/examples/data.js new file mode 100644 index 0000000..b4d2aad --- /dev/null +++ b/examples/data.js @@ -0,0 +1,36 @@ +var ddData = [ + { + text: "Facebook", + value: 1, + selected: false, + description: "Description with Facebook", + imageSrc: "http://i.imgur.com/XkuTj3B.png" + }, + { + text: "Twitter", + value: 2, + selected: false, + description: "Description with Twitter", + imageSrc: "http://i.imgur.com/8ScLNnk.png" + }, + { + text: "LinkedIn", + value: 3, + selected: false, + description: "Description with LinkedIn", + imageSrc: "http://i.imgur.com/aDNdibj.png" + }, + { + text: "Foursquare", + value: 4, + selected: false, + description: "Description with Foursquare", + imageSrc: "http://i.imgur.com/kFAk2DX.png" + } +]; +var ddBasic = [ + { text: "Facebook", value: 1, }, + { text: "Twitter", value: 2, }, + { text: "LinkedIn", value: 3, }, + { text: "Foursquare", value: 4, } +]; diff --git a/examples/index.html b/examples/index.html new file mode 100644 index 0000000..b16b8d8 --- /dev/null +++ b/examples/index.html @@ -0,0 +1,95 @@ + + + + TODO supply a title + + + + + + + +

basic

+ +

create/destroy

+ +

get selected

+ +

set selected

+ +

callback function

+ +

default selection

+ +

image right

+ +

truncated

+ +

no image

+ + + + + diff --git a/jquery.ddslick.js b/jquery.ddslick.js index 2cdfbb5..4cd72ea 100644 --- a/jquery.ddslick.js +++ b/jquery.ddslick.js @@ -1,8 +1,13 @@ -//Title: Custom DropDown plugin by PC -//Documentation: http://designwithpc.com/Plugins/ddslick -//Author: PC -//Website: http://designwithpc.com -//Twitter: http://twitter.com/chaudharyp +/** + * original by Prashant Chaudhary + * github : https://github.com/prashantchaudhary + * website : http://designwithpc.com/Plugins/ddSlick + * source : https://github.com/prashantchaudhary/ddslick + * + * comments by creator regarding licensing https://github.com/prashantchaudhary/ddslick/issues/39 + * https://web.archive.org/web/20180109091745/https://github.com/prashantchaudhary/ddslick/issues/39 + * + */ (function ($) { @@ -98,7 +103,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; @@ -108,6 +113,7 @@ // Inherit name attribute from original element obj.find("input.dd-selected-value") .attr("id", $(original).attr("id")) + .attr("onchange", $(original).attr("onchange")) .attr("name", $(original).attr("name")); //Get newly created ddOptions and ddSelect to manipulate @@ -165,7 +171,7 @@ //Selecting an option obj.find('.dd-option').on('click.ddslick', function () { - selectIndex(obj, $(this).closest('li').index()); + selectIndex(obj, $(this).closest('li').index(), true); }); //Click anywhere to close @@ -238,7 +244,7 @@ } //Private: Select index - function selectIndex(obj, index) { + function selectIndex(obj, index, changed = false) { //Get plugin data var pluginData = obj.data('ddslick'); @@ -290,6 +296,11 @@ //Callback function on selection if (typeof settings.onSelected == 'function') { settings.onSelected.call(this, pluginData); + } + + //Trigger change + if (changed) { + ddSelectedValue.trigger('change'); } } diff --git a/jquery.ddslick.min.js b/jquery.ddslick.min.js index 6a7191f..5759bc2 100644 --- a/jquery.ddslick.min.js +++ b/jquery.ddslick.min.js @@ -1 +1 @@ -(function(e){e.fn.ddslick=function(l){if(c[l]){return c[l].apply(this,Array.prototype.slice.call(arguments,1))}else{if(typeof l==="object"||!l){return c.init.apply(this,arguments)}else{e.error("Method "+l+" does not exists.")}}};var c={},d={data:[],keepJSONItemsOnTop:false,width:260,height:null,background:"#eee",selectText:"",defaultSelectedIndex:null,truncateDescription:true,imagePosition:"left",showSelectedHTML:true,clickOffToClose:true,embedCSS:true,onSelected:function(){}},i='
',a='',b='';c.init=function(l){var l=e.extend({},d,l);if(e("#css-ddslick").length<=0&&l.embedCSS){e(b).appendTo("head")}return this.each(function(){var p=e(this),q=p.data("ddslick");if(!q){var n=[],o=l.data;p.find("option").each(function(){var w=e(this),v=w.data();n.push({text:e.trim(w.text()),value:w.val(),selected:w.is(":selected"),description:v.description,imageSrc:v.imagesrc})});if(l.keepJSONItemsOnTop){e.merge(l.data,n)}else{l.data=e.merge(n,l.data)}var m=p,s=e('
');p.replaceWith(s);p=s;p.addClass("dd-container").append(i).append(a);var n=p.find(".dd-select"),u=p.find(".dd-options");u.css({width:l.width});n.css({width:l.width,background:l.background});p.css({width:l.width});if(l.height!=null){u.css({height:l.height,overflow:"auto"})}e.each(l.data,function(v,w){if(w.selected){l.defaultSelectedIndex=v}u.append('
  • '+(w.value?' ':"")+(w.imageSrc?' ':"")+(w.text?' ":"")+(w.description?' '+w.description+"":"")+"
    • ")});var t={settings:l,original:m,selectedIndex:-1,selectedItem:null,selectedData:null};p.data("ddslick",t);if(l.selectText.length>0&&l.defaultSelectedIndex==null){p.find(".dd-selected").html(l.selectText)}else{var r=(l.defaultSelectedIndex!=null&&l.defaultSelectedIndex>=0&&l.defaultSelectedIndex':"")+(t.text?'":"")+(t.description?''+t.description+"":""))}else{r.html(t.text)}n.val(t.value);u.original.val(t.value);q.data("ddslick",u);k(q);g(q);if(typeof o.onSelected=="function"){o.onSelected.call(this,u)}}function f(p){var o=p.find(".dd-select"),m=o.siblings(".dd-options"),l=o.find(".dd-pointer"),n=m.is(":visible");e(".dd-click-off-close").not(m).slideUp(50);e(".dd-pointer").removeClass("dd-pointer-up");if(n){m.slideUp("fast");l.removeClass("dd-pointer-up")}else{m.slideDown("fast");l.addClass("dd-pointer-up")}h(p)}function k(l){l.find(".dd-options").slideUp(50);l.find(".dd-pointer").removeClass("dd-pointer-up").removeClass("dd-pointer-up")}function g(o){var n=o.find(".dd-select").css("height");var m=o.find(".dd-selected-description");var l=o.find(".dd-selected-image");if(m.length<=0&&l.length>0){o.find(".dd-selected-text").css("lineHeight",n)}}function h(l){l.find(".dd-option").each(function(){var p=e(this);var n=p.css("height");var o=p.find(".dd-option-description");var m=l.find(".dd-option-image");if(o.length<=0&&m.length>0){p.find(".dd-option-text").css("lineHeight",n)}})}})(jQuery); +!function(e){e.fn.ddslick=function(t){return d[t]?d[t].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof t&&t?void e.error("Method "+t+" does not exists."):d.init.apply(this,arguments)};var d={},t={data:[],keepJSONItemsOnTop:!1,width:260,height:null,background:"#eee",selectText:"",defaultSelectedIndex:null,truncateDescription:!0,imagePosition:"left",showSelectedHTML:!0,clickOffToClose:!0,embedCSS:!0,onSelected:function(){}};function i(e,d,t=!1){var i=e.data("ddslick"),n=e.find(".dd-selected"),s=n.siblings(".dd-selected-value"),l=(e.find(".dd-options"),n.siblings(".dd-pointer"),e.find(".dd-option").eq(d)),a=l.closest("li"),c=i.settings,r=i.settings.data[d];e.find(".dd-option").removeClass("dd-option-selected"),l.addClass("dd-option-selected"),i.selectedIndex=d,i.selectedItem=a,i.selectedData=r,c.showSelectedHTML?n.html((r.imageSrc?'':"")+(r.text?'":"")+(r.description?''+r.description+"":"")):n.html(r.text),s.val(r.value),i.original.val(r.value),e.data("ddslick",i),o(e),function(e){var d=e.find(".dd-select").css("height"),t=e.find(".dd-selected-description"),i=e.find(".dd-selected-image");t.length<=0&&i.length>0&&e.find(".dd-selected-text").css("lineHeight",d)}(e),"function"==typeof c.onSelected&&c.onSelected.call(this,i),t&&s.trigger("change")}function n(d){var t=d.find(".dd-select"),i=t.siblings(".dd-options"),n=t.find(".dd-pointer"),o=i.is(":visible");e(".dd-click-off-close").not(i).slideUp(50),e(".dd-pointer").removeClass("dd-pointer-up"),t.removeClass("dd-open"),o?(i.slideUp("fast"),n.removeClass("dd-pointer-up"),t.removeClass("dd-open")):(t.addClass("dd-open"),i.slideDown("fast"),n.addClass("dd-pointer-up")),function(d){d.find(".dd-option").each(function(){var t=e(this),i=t.css("height"),n=t.find(".dd-option-description"),o=d.find(".dd-option-image");n.length<=0&&o.length>0&&t.find(".dd-option-text").css("lineHeight",i)})}(d)}function o(e){e.find(".dd-select").removeClass("dd-open"),e.find(".dd-options").slideUp(50),e.find(".dd-pointer").removeClass("dd-pointer-up").removeClass("dd-pointer-up")}d.init=function(d){var o=e.extend({},t,d);return e("#css-ddslick").length<=0&&o.embedCSS&&e('').appendTo("head"),this.each(function(){var o=e.extend({},t,d),s=e(this);if(!s.data("ddslick")){var l=[];o.data;s.find("option").each(function(){var d=e(this),t=d.data();l.push({text:e.trim(d.text()),value:d.val(),selected:d.is(":selected"),description:t.description,imageSrc:t.imagesrc})}),o.keepJSONItemsOnTop?e.merge(o.data,l):o.data=e.merge(l,o.data);var a=s,c=e("
    ").attr("id",s.attr("id")+"-dd-placeholder");s.replaceWith(c),(s=c).addClass("dd-container").append('
    ').append('
      '),s.find("input.dd-selected-value").attr("id",e(a).attr("id")).attr("onchange",e(a).attr("onchange")).attr("name",e(a).attr("name"));l=s.find(".dd-select");var r=s.find(".dd-options");r.css({width:o.width}),l.css({width:o.width,background:o.background}),s.css({width:o.width}),null!=o.height&&r.css({height:o.height,overflow:"auto"}),e.each(o.data,function(e,d){d.selected&&(o.defaultSelectedIndex=e),r.append('
    • '+(d.value?' ':"")+(d.imageSrc?' ':"")+(d.text?' ":"")+(d.description?' '+d.description+"":"")+"
      • ")});var p={settings:o,original:a,selectedIndex:-1,selectedItem:null,selectedData:null};if(s.data("ddslick",p),o.selectText.length>0&&null==o.defaultSelectedIndex)s.find(".dd-selected").html(o.selectText);else{var f=null!=o.defaultSelectedIndex&&o.defaultSelectedIndex>=0&&o.defaultSelectedIndex