diff --git a/README.md b/README.md index 4b45752..b7f3692 100755 --- a/README.md +++ b/README.md @@ -16,3 +16,6 @@ A jQuery plugin that turns a bootstrap dropdown component into a compact multi-s `$('.mything').dropdownCheckboxes();` All of the config is in the markup. See the example for details. + + +Original project is at [creativecirclemedia/dropdown-checkboxes](https://github.com/creativecirclemedia/dropdown-checkboxes) \ No newline at end of file diff --git a/bower.json b/bower.json index bdbb12f..1b8b7ed 100755 --- a/bower.json +++ b/bower.json @@ -7,6 +7,7 @@ ], "authors": [ "Creative Circle " + "Andy Jarrett " ], "license": "BSD-2-Clause", "homepage": "https://github.com/creativecirclemedia/dropdown-checkboxes", diff --git a/example.html b/example.html index f568ebc..29ca15e 100755 --- a/example.html +++ b/example.html @@ -1,19 +1,21 @@ - - - - - - - - - dropdown-checkboxes - - - - - + + + + + + + + + dropdown-checkboxes + + + + + + + - + Scrollable menu
-
    +
      +
    • + + + +
    • - +
    • - +
    • - +
    • - +
    • - +
      • -
    • - - +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • +
@@ -95,57 +121,60 @@

dropdown-checkboxes



- + - + - + -
+
- - - - - + + + + + + + diff --git a/src/dropdownCheckboxes.css b/src/dropdownCheckboxes.css index d5f344f..b0c0997 100755 --- a/src/dropdownCheckboxes.css +++ b/src/dropdownCheckboxes.css @@ -14,4 +14,10 @@ display: inline-block; margin: 6px 0 0 0; font-size: 90% +} + +.scrollable-menu { + height: auto; + max-height: 200px; + overflow-x: hidden; } \ No newline at end of file diff --git a/src/dropdownCheckboxes.js b/src/dropdownCheckboxes.js index 3671adc..f8eea4c 100755 --- a/src/dropdownCheckboxes.js +++ b/src/dropdownCheckboxes.js @@ -41,7 +41,13 @@ // Clear button dropdown.find('button.clear').click(function(){ - $(this).closest('.dropdownCheckboxes').find('input[type=checkbox]').prop('checked',false); + $(this).closest('.dropdownCheckboxes').find('input[type=checkbox]').prop('checked',false).trigger("change"); + $(this).dropdownCheckboxes('eval'); + }); + + // Select All button + dropdown.find('button.selectall').click(function(){ + $(this).closest('.dropdownCheckboxes').find('input[type=checkbox]').prop('checked',true).trigger("change"); $(this).dropdownCheckboxes('eval'); }); @@ -86,7 +92,7 @@ if( $(this).hasClass('save') || $(this).hasClass('close-dropdown') ){ $(this).closest(".dropdown-menu").prev().dropdown("toggle"); } - + // Done return this; @@ -105,6 +111,6 @@ return dropdownMethods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 )); }else if( typeof methodOrOptions === 'object' || ! methodOrOptions ) { return dropdownMethods.init.apply(this,arguments); - } // Skip error + } // Skip error }; })( jQuery ); \ No newline at end of file diff --git a/src/dropdownCheckboxes.min.css b/src/dropdownCheckboxes.min.css index 2eeb0b7..950bbcd 100755 --- a/src/dropdownCheckboxes.min.css +++ b/src/dropdownCheckboxes.min.css @@ -1 +1,2 @@ .dropdownCheckboxes .btn-default{max-width:150px;overflow:hidden;text-overflow:ellipsis}.dropdownCheckboxes ul.dropdown-menu li{font-size:80%;margin:1px 10px}.dropdownCheckboxes ul.dropdown-menu label{font-weight:normal}.dropdownCheckboxes ul.dropdown-menu button{display:inline-block;margin:6px 0 0 0;font-size:90%} + .scrollable-menu {height: auto; max-height: 200px; overflow-x: hidden; } \ No newline at end of file diff --git a/src/dropdownCheckboxes.min.js b/src/dropdownCheckboxes.min.js index 8c6f22c..e2c90a0 100644 --- a/src/dropdownCheckboxes.min.js +++ b/src/dropdownCheckboxes.min.js @@ -1 +1,4 @@ -(function($){var dropdownMethods={init:function(options){$(this).find(".dropdown-menu li").click(function(e){e.stopPropagation()});var dropdowns=$(this);dropdowns.each(function(i){var dropdown=$(this);dropdown.addClass("dropdownCheckboxes");dropdown.data("default-label",dropdown.find(".dropdown-toggle").html().trim());dropdown.append($("",{type:"hidden",class:"hidden-input",name:dropdown.data("name"),value:""}));dropdown.find("input[type=checkbox]").click(function(){$(this).dropdownCheckboxes("eval")});dropdown.find("button.save").click(function(){$(this).dropdownCheckboxes("eval")});dropdown.find("button.clear").click(function(){$(this).closest(".dropdownCheckboxes").find("input[type=checkbox]").prop("checked",false);$(this).dropdownCheckboxes("eval")});dropdown.dropdownCheckboxes("eval")});return this},eval:function(){if($(this).hasClass("dropdownCheckboxes")){var container=$(this)}else{var container=$(this).closest(".dropdownCheckboxes")}var labels=[];var values=[];container.find("input[type=checkbox]:checked").each(function(item){labels.push($(this).closest("label").text().trim());values.push($(this).val())});if(values.length>200){container.find(".dropdown-toggle").html(labels.length+" selected")}else if(values.length>0){container.find(".dropdown-toggle").html(labels.join(", "))}else{container.find(".dropdown-toggle").html(container.data("default-label"))}container.find("input.hidden-input").val(JSON.stringify(values));if($(this).hasClass("save")||$(this).hasClass("close-dropdown")){$(this).closest(".dropdown-menu").prev().dropdown("toggle")}return this},apply:function(){return this},cancel:function(){return this}};$.fn.dropdownCheckboxes=function(methodOrOptions){if(dropdownMethods[methodOrOptions]){return dropdownMethods[methodOrOptions].apply(this,Array.prototype.slice.call(arguments,1))}else if(typeof methodOrOptions==="object"||!methodOrOptions){return dropdownMethods.init.apply(this,arguments)}}})(jQuery); +(function(a){var e={init:function(c){a(this).find(".dropdown-menu li").click(function(a){a.stopPropagation()});a(this).each(function(b){b=a(this);b.addClass("dropdownCheckboxes");b.data("default-label",b.find(".dropdown-toggle").html().trim());b.append(a("",{type:"hidden","class":"hidden-input",name:b.data("name"),value:""}));b.find("input[type=checkbox]").click(function(){a(this).dropdownCheckboxes("eval")});b.find("button.save").click(function(){a(this).dropdownCheckboxes("eval")});b.find("button.clear").click(function(){a(this).closest(".dropdownCheckboxes").find("input[type=checkbox]").prop("checked", +!1).trigger("change");a(this).dropdownCheckboxes("eval")});b.find("button.selectall").click(function(){a(this).closest(".dropdownCheckboxes").find("input[type=checkbox]").prop("checked",!0).trigger("change");a(this).dropdownCheckboxes("eval")});b.dropdownCheckboxes("eval")});return this},eval:function(){var c=a(this).hasClass("dropdownCheckboxes")?a(this):a(this).closest(".dropdownCheckboxes"),b=[],d=[];c.find("input[type=checkbox]:checked").each(function(c){b.push(a(this).closest("label").text().trim()); +d.push(a(this).val())});200