Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added a Select All button #1

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open

Added a Select All button #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a62220b
Added a Select All option and expanded the example page
andyj Oct 9, 2018
3e5bc98
minified javascript
andyj Oct 9, 2018
63c148d
cleaning up a global find/replace
andyj Oct 9, 2018
3234e32
typo
andyj Oct 9, 2018
7ebeddd
Added scrollable menu
andyj Oct 9, 2018
dcb5631
minified css (by hand)
andyj Oct 9, 2018
eae2058
prop('checked') does not take care of the 'change' event generation. …
andyj Oct 10, 2018
d9962f0
Added a reference to the original project in the README
andyj Oct 10, 2018
257bbf0
Updated the CDN URLs to the latest version
andyj Oct 10, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
1 change: 1 addition & 0 deletions bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
],
"authors": [
"Creative Circle <[email protected]>"
"Andy Jarrett <[email protected]>"
],
"license": "BSD-2-Clause",
"homepage": "https://github.com/creativecirclemedia/dropdown-checkboxes",
Expand Down
181 changes: 105 additions & 76 deletions example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<title>dropdown-checkboxes</title>

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="./src/dropdownCheckboxes.min.css">

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<script src="//code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<title>dropdown-checkboxes</title>

<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="./src/dropdownCheckboxes.css">
<!-- For production use the minified CSS -->
<!-- <link rel="stylesheet" href="./src/dropdownCheckboxes.min.css"> -->

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
Expand All @@ -22,65 +24,89 @@

<body>

<HR>
<HR>

<div class='container'>

<h1>dropdown-checkboxes</h1><BR>

<form class='myform'>


<!--
<!--

When initializing, a hidden input is created within the div, with the "data-name" value as the
When initializing, a hidden input is created within the div, with the "data-name" value as the
name of the input. That way, these can be used as any other form input.

When the values are saved, the value of the hidden is set to a JSON array of all ticked checkbox values.

Note that the checkboxes can be pre-checked on pageload, and the initializer will activate the UI appropriately.

-->

Scrollable menu
<div class="dropdown cq-dropdown" data-name='statuses'>
<button class="btn btn-default btn-sm dropdown-toggle" type="button" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Status
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdown1">
<ul class="dropdown-menu scrollable-menu" aria-labelledby="dropdown1">
<li class='text-center'>
<button type='button' class='btn btn-xs btn-default selectall close-dropdown' value='Select All'>Select all and close</button>
<button type='button' class='btn btn-xs btn-default clear close-dropdown' value='Clear'>Clear and Close</button>
<button type='button' class='btn btn-xs btn-default save' value='Save'>Save and Close</button>
</li>
<li>
<label class="radio-btn">
<input type="checkbox" value='new' checked>
New
</label>
<label class="radio-btn">
<input type="checkbox" value='new' checked>
New
</label>
</li>
<li>
<label class="radio-btn">
<input type="checkbox" value='pending'>
Pending
</label>
<label class="radio-btn">
<input type="checkbox" value='pending'>
Pending
</label>
</li>
<li>
<label class="radio-btn">
<input type="checkbox" value='hold'>
Hold
</label>
<label class="radio-btn">
<input type="checkbox" value='hold'>
Hold
</label>
</li>
<li>
<label class="radio-btn">
<input type="checkbox" value='published' checked>
Published
</label>
<label class="radio-btn">
<input type="checkbox" value='published' checked>
Published
</label>
</li>
<li>
<label class="radio-btn">
<input type="checkbox" value='spiked' checked>
Spiked
</label>
<label class="radio-btn">
<input type="checkbox" value='new' checked>
New
</label>
</li>
<li class='text-center'>
<button type='button' class='btn btn-xs btn-default clear close-dropdown' value='Clear'>Clear</button>
<button type='button' class='btn btn-xs btn-default save' value='Save'>Save</button>
<li>
<label class="radio-btn">
<input type="checkbox" value='pending'>
Pending
</label>
</li>
<li>
<label class="radio-btn">
<input type="checkbox" value='hold'>
Hold
</label>
</li>
<li>
<label class="radio-btn">
<input type="checkbox" value='published' checked>
Published
</label>
</li>
<li>
<label class="radio-btn">
<input type="checkbox" value='spiked' checked>
Spiked
</label>
</li>
</ul>
</div>
Expand All @@ -95,57 +121,60 @@ <h1>dropdown-checkboxes</h1><BR>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdown1">
<li>
<label class="radio-btn">
<input type="checkbox" value='news' checked>
News
</label>
<label class="radio-btn">
<input type="checkbox" value='news' checked>
News
</label>
</li>
<li>
<label class="radio-btn">
<input type="checkbox" value='sports'>
Sports
</label>
<label class="radio-btn">
<input type="checkbox" value='sports'>
Sports
</label>
</li>
<li>
<label class="radio-btn">
<input type="checkbox" value='opinion'>
Opinion
</label>
<label class="radio-btn">
<input type="checkbox" value='opinion'>
Opinion
</label>
</li>
<li>
<label class="radio-btn">
<input type="checkbox" value='life' checked>
Life
</label>
<label class="radio-btn">
<input type="checkbox" value='life' checked>
Life
</label>
</li>
<li class='text-center'>
<button type='button' class='btn btn-xs btn-default clear close-dropdown' value='Clear'>Clear</button>
<button type='button' class='btn btn-xs btn-default save' value='Save'>Save</button>
<button type='button' class='btn btn-xs btn-default selectall' value='Select All'>Select all</button>
<button type='button' class='btn btn-xs btn-default clear' value='Clear'>Clear</button>
<button type='button' class='btn btn-xs btn-default save' value='Save'>Save and Close</button>
</li>
</ul>
</div>

<BR>

</form>
</form>

<button type='button' class='btn btn-default btn-sm' onClick=" console.log( $('.myform').serialize() ) ">
Console log current form values
</button>
<button type='button' class='btn btn-default btn-sm' onClick=" console.log( $('.myform').serialize() ) ">
Console log current form values
</button>

</div>
</div>

<BR><HR>
<BR><HR>

</div>
<script>
$(function(){
$('.cq-dropdown').dropdownCheckboxes();
});
</script>
<script src="./src/dropdownCheckboxes.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</div>
<script>
$(function(){
$('.cq-dropdown').dropdownCheckboxes();
});
</script>
<script src="./src/dropdownCheckboxes.js"></script>
<!-- For production use the minified JS -->
<!-- <script src="./src/dropdownCheckboxes.min.js"></script> -->
<script src="//stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

</html>

Expand Down
6 changes: 6 additions & 0 deletions src/dropdownCheckboxes.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
12 changes: 9 additions & 3 deletions src/dropdownCheckboxes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});

Expand Down Expand Up @@ -86,7 +92,7 @@
if( $(this).hasClass('save') || $(this).hasClass('close-dropdown') ){
$(this).closest(".dropdown-menu").prev().dropdown("toggle");
}

// Done
return this;

Expand All @@ -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 );
1 change: 1 addition & 0 deletions src/dropdownCheckboxes.min.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 4 additions & 1 deletion src/dropdownCheckboxes.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.