jquery-selection-organizer
A jQuery plugin that organizes selectable elements by separating the selected elements from the unselected ones. This plugin can be used for any container that contains elements that are intended to be selectable by the user.
Getting Started
-
Either by downloading the latest source and including the script:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <!-- be sure to include after jQuery --> <script src="dist/jquery.selection-organizer.min.js"></script>
-
Either by using NPM (
npm install jquery-selection-organizer
) and requiring the module:var $ = require("jquery"); // be sure to require after jQuery require("jquery-selection-organizer");
-
Either by using bower:
bower install jquery-selection-organizer
Documentation
-
How to Initialize:
// how it will look var organizer = $(".container").selectionOrganizer({..settings..}); // actual example var organizer = $(".container").selectionOrganizer({ selector: "li", animationProperties: { finish: {"height": "toggle"} }, classSelected: "unordered-list-selected", callback: function($target) { console.log("toggled element: " + $target); } });
-
How to Change Settings After Initializing:
// how it will look var organizer = $(".container").selectionOrganizer({..settings..}); organizer.settings.field = value; // actual example var organizer = $(".container").selectionOrganizer({sendToEnd: false}); organizer.settings.sendToEnd = true;
-
Available Settings Fields:
- selector: selector for elements that will be organized by the plugin
- default:
".selection-organizer-child"
- default:
- classSelected: class name that will be added to the selected elements
- default:
"selection-organizer-selected"
- default:
- showAnimation
true
: turns on animationsfalse
: turns off animations- default:
true
- animationProperties: any jQuery-compatible animation property value
- default:
{opacity: "toggle"}
- default:
- animationDuration: any jQuery-compatible animation duration value
- default:
300
- default:
- sendToEnd
true
: sends selected elements to end of containerfalse
: sends selected elements to front of container- default:
false
- callback: callback function that will be called with the selected child's jQuery object after the selection is made
- default: function($target) {}
- selector: selector for elements that will be organized by the plugin
Examples
If you want to try out examples or interact with the plugin, check out the live demo page.
Issues
If you discover any bugs or happen to come up with ideas that you wish to have implemented, feel free to create an issue on GitHub at:
https://github.com/dhchoi/jquery-selection-organizer/issues
License
Licensed under the ISC license.