22 |
23 | You will notice the markup just contains form submit buttons. This is so the functionality degrades without javascript. If Javascript is enabled, each submit input will be replaced with an element in the menu drop down. The form will be submitted with the same named action value.
24 |
25 | Then apply the multirowcheckbox plugin to the container:
26 |
27 | $('div.multiRowCheckboxMenu').checkboxMenu();
28 |
29 | If you ID or class the submit buttons inside the container, those IDs/classes will get passed over to the LIs to provide more styling control.
30 |
31 | The plugin can also be used as a simple filter menu without the checkbox for things such as Sort Alphabetically, Filter by Letter etc. To do this, you must just have a input item with a class of selected. See index.html for example.
32 |
33 | Background
34 | ----------
35 |
36 | [Blog post on ok-cool.com](http://www.ok-cool.com/posts/read/475-select-allselect-none-checkbox-menu-plugin-for-jquery/)
37 |
38 | This plugin was built for our fabulous ContactZilla product! [http://contactzilla.com/](http://contactzilla.com/)
39 |
40 | [Example](http://simpleweb.github.com/Multirow-Checkbox-Menu/)
41 |
42 | License
43 | -------
44 | This plugin is licensed under both the GPL and MIT licenses. Choose which ever one suits your project best.
45 |
46 | [](http://contactzilla.com/)
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
3 |
4 |
5 |
6 |
7 | Multi Row Checkbox Menu
8 |
9 |
10 |
11 |
12 |
13 |
14 |
31 |
32 |
33 |
34 |
100 |
101 |
102 |
103 |
--------------------------------------------------------------------------------
/js/jquery.multirowcheckboxmenu.js:
--------------------------------------------------------------------------------
1 | /*
2 | * jQuery Plugin: Multi Row Checkbox Menu
3 | * Version 1.0
4 | *
5 | * Copyright (c) 2010 Tom Holder Simpleweb Ltd (http://simpleweb.co.uk)
6 | * Licensed jointly under the GPL and MIT licenses,
7 | * choose which one suits your project best!
8 | *
9 | * Built for our product ContactZilla (http://contactzilla.com/) - check it out!
10 | *
11 | * Please feel free to use this code in your projects, just respect the license and retain this header.
12 | */
13 | (function($){
14 | function log() {
15 | if (window.console && console.log) {
16 | for (var i = 0, len = arguments.length; i < len; i++) {
17 | console.log(arguments[i]);
18 | }
19 | }
20 | };
21 | $.fn.checkboxMenu = function(options) {
22 |
23 | var defaults = {
24 | buttonSelector: ":submit",
25 | checkboxIDPrefix: "selectAll",
26 | checkboxClasses: "selectAll",
27 | semiSelectClass: "semiSelect",
28 | menuClass: "",
29 | menuLinkClass: "menu",
30 | downClass: "down",
31 | childCheckboxes: "input[type=checkbox]",
32 | removeSelectedItem: true,
33 | menuItemClick: function() { return true; }
34 | };
35 |
36 | var opts = $.extend(defaults, options);
37 | var containerCount = 0;
38 |
39 | return this.each(function(){
40 |
41 | var checkboxMenuContainer = $(this);
42 | checkboxMenuContainer.addClass('jquery-multirow-checkbox-menu-container');
43 |
44 | //UL containing the menu.
45 | var dropdownMenu = $("
")
46 | .appendTo(checkboxMenuContainer)
47 | .addClass(opts.menuClass)
48 | .addClass('jquery-multirow-checkbox-menu');
49 |
50 | var selectedItem = false;
51 |
52 | //If there are input buttons inside the container, these will become the menu items.
53 | if($(opts.buttonSelector, checkboxMenuContainer).length >0) {
54 |
55 |
56 | //Build the menu
57 | //Loop over each submit button in our container and change it in to an LI item.
58 | $(opts.buttonSelector, checkboxMenuContainer).each(function() {
59 |
60 | var submitButton = $(this);
61 | var buttonText = $(this).attr('value');
62 | var itemIsSelected = submitButton.hasClass('selected');
63 | if(itemIsSelected) {
64 | selectedItem = buttonText;
65 | }
66 |
67 | //If selected item, should it be included in menu?
68 | if(!itemIsSelected || !opts.removeSelectedItem) {
69 |
70 | var li = $("