Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Added Readme.md

  • Loading branch information...
commit e9ff64db631319219d66485613eada3afc9bb818 1 parent 92f5ff1
@chriskempson authored
Showing with 64 additions and 0 deletions.
  1. +64 −0 README.md
View
64 README.md
@@ -0,0 +1,64 @@
+# Panelsort
+A jQuery plugin for sorting elements through a dynamically generated overview panel. This plugin was written to address the issue of sortable elements with large content. Elements become difficult to sort if they have a large amount of content due to the fact that they may extend past the currently viewable portion of a website. A panel with a representation of the sortable elements resolves this issue.
+
+## Example Usage
+A simple example with a single column and three sortable items.
+
+ <div id="ps-panel"></div>
+ <div id="items">
+ <div class="ps-column">
+ <div id="id-1" class="ps-item">
+ <p>Lorem ipsum dolor sit amet</p>
+ </div>
+ <div id="id-2" class="ps-item">
+ <p>Lorem ipsum dolor sit amet</p>
+ </div>
+ <div id="id-3" class="ps-item">
+ <p>Lorem ipsum dolor sit amet</p>
+ </div>
+ </div>
+ </div>
+
+ <script type="text/javascript">
+ $(document).ready(function() {
+ $("#ps-panel").panelsort();
+ });
+ </script>
+
+# Static Items
+If you would like to make an item static, use the class `ps-static-item` instead of `ps-item`.
+
+# Popup
+This plugin works well inside a popup div. An example of doing this with [jQueryUI Dialog](http://jqueryui.com/demos/dialog/) is as follows:
+
+ $("#ps-panel").dialog({
+ create: function(event, ui) {
+ $(this).panelsort({
+ sortableSettings: {
+ helper: 'clone',
+ appendTo: 'body',
+ zIndex: 1100
+ });
+ }
+ });
+
+# Config Options
+The plugin is setup with the following defaults. Feel free to override them if you wish. Also, note that you can set your own settings for [jQueryUI Sortable](http://jqueryui.com/demos/sortable/) and [jQuery Cookie](https://github.com/carhartl/jquery-cookie) with `sortableSettings` and `cookieSettings`.
+
+ {
+ containerElement: '#ps-items',
+ columnClass: 'ps-column',
+ itemClass: 'ps-item',
+ staticItemClass: 'ps-static-item',
+ titleClass: 'ps-title',
+ cookieName: 'panelsort',
+ sortableSettings: {
+ opacity: 0.8,
+ forcePlaceholderSize: true,
+ revert: 200,
+ placeholder: 'ps-panel-placeholder'
+ },
+ cookieSettings: {
+ expires: 1826 // 5 Years
+ }
+ }
Please sign in to comment.
Something went wrong with that request. Please try again.