This advanced demo shows how finderSelect can be used as a component to create a file explorer. Make sure to try Ctrl/Cmd+Click, Ctrl+A/Cmd+A & Ctrl+Alt+A/Cmd+Opt+A (Activates only when cursor is over table), Shift+Click, Ctrl/Cmd+Click&Drag and Right Click on the table after you have made a selection.
hello.png | Portable Networks Graphic image | Friday, 24 July 2013 4:59PM | |
hello.png | Portable Networks Graphic image | Friday, 24 July 2013 4:59PM | |
hello.png | Portable Networks Graphic image | Friday, 24 July 2013 4:59PM | |
hello.png | Portable Networks Graphic image | Friday, 24 July 2013 4:59PM | |
hello.png | Portable Networks Graphic image | Friday, 24 July 2013 4:59PM | |
hello.png | Portable Networks Graphic image | Friday, 24 July 2013 4:59PM | |
hello.png | Portable Networks Graphic image | Friday, 24 July 2013 4:59PM | |
hello.png | Portable Networks Graphic image | Friday, 24 July 2013 4:59PM | |
hello.png | Portable Networks Graphic image | Friday, 24 July 2013 4:59PM | |
hello.png | Portable Networks Graphic image | Friday, 24 July 2013 4:59PM | |
hello.png | Portable Networks Graphic image | Friday, 24 July 2013 4:59PM | |
hello.png | Portable Networks Graphic image | Friday, 24 July 2013 4:59PM | |
hello.png | Portable Networks Graphic image | Friday, 24 July 2013 4:59PM | |
hello.png | Portable Networks Graphic image | Friday, 24 July 2013 4:59PM | |
hello.png | Portable Networks Graphic image | Friday, 24 July 2013 4:59PM | |
hello.png | Portable Networks Graphic image | Friday, 24 July 2013 4:59PM | |
hello.png | Portable Networks Graphic image | Friday, 24 July 2013 4:59PM | |
hello.png | Portable Networks Graphic image | Friday, 24 July 2013 4:59PM | |
hello.png | Portable Networks Graphic image | Friday, 24 July 2013 4:59PM | |
hello.png | Portable Networks Graphic image | Friday, 24 July 2013 4:59PM | |
hello.png | Portable Networks Graphic image | Friday, 24 July 2013 4:59PM | |
hello.png | Portable Networks Graphic image | Friday, 24 July 2013 4:59PM | |
hello.png | Portable Networks Graphic image | Friday, 24 July 2013 4:59PM | |
hello.png | Portable Networks Graphic image | Friday, 24 July 2013 4:59PM |
$(function() { var demo1 = $('#demo1').finderSelect({children:"tr",totalSelector:".demo1-count",menuSelector:"#demo1-menu"}); $(".demo1-trash").click(function(){ demo1.finderSelect("selected").remove(); demo1.finderSelect("update"); }); // Opens Preview in Window. Opens with browser only. (There is a 90% chance a popup blocker will stop multiple windows. Working on a better solution) $(".demo1-preview").click(function(){ demo1.finderSelect("selected").each(function(index){ OpenInNewTab($(this).attr('data-url')); }); }); // Opens Edit in Window. Opens using Web Based Pixlr editor. (There is a 90% chance a popup blocker will stop multiple windows. Working on a better solution) $(".demo1-edit").click(function(){ demo1.finderSelect("selected").each(function(){ OpenInNewTab('http://pixlr.com/editor/?image='+$(this).attr('data-url')); }); }); });
finderSelect was design to be easily extended. See the example below to see how the highlighting functions can be overridden to provide new functionality.
$(function() { // Initialise the Demo with the Ctrl Click Functionality as the Default var demo5 = $('#demo5 tbody').finderSelect({enableDesktopCtrlDefault:true}); // Add a hook to the highlight function so that checkboxes in the selection are also checked. demo5.finderSelect('addHook','highlight:before', function(el) { el.find('input').prop('checked', true); }); // Add a hook to the unHighlight function so that checkboxes in the selection are also unchecked. demo5.finderSelect('addHook','unHighlight:before', function(el) { el.find('input').prop('checked', false); }); // Enable Double Click Event. demo5.finderSelect("children").dblclick(function() { alert( "Double Click detected. Useful for linking to detail page." ); }); // Prevent Checkboxes from being triggered twice when click on directly. demo5.on("click", ":checkbox", function(e){ e.preventDefault(); }); // Add Select All functionality to the checkbox in the table header row. $('#demo5').find("thead input[type='checkbox']").change(function () { if ($(this).is(':checked')) { demo5.finderSelect('highlightAll'); } else { demo5.finderSelect('unHighlightAll'); } }); // Add a Safe Zone to show not all child elements have to be active. $(".safezone").on("mousedown", function(e){ return false; }); });
To enable selecting on only tbody rows simply call
# | First Name | Last Name | Username |
---|---|---|---|
1 | Test | Data | Set |
2 | Test | Data | Set |
3 | Test | Data | Set |
4 | Test | Data | Set |
5 | Test | Data | Set |
$(function() { $('#demo2').find('tbody').finderSelect(); });
If you want to use a custom class for highlighting such as using Twitter Bootstrap
# | First Name | Last Name | Username |
---|---|---|---|
1 | Test | Data | Set |
2 | Test | Data | Set |
3 | Test | Data | Set |
4 | Test | Data | Set |
5 | Test | Data | Set |
$(function() { $('#demo3').find('tbody').finderSelect({selectClass:'danger'}); });
This plugin works on all nested elements. The example below shows span tags within a parent div.
$(function() { $('#demo4').finderSelect({selectClass:'label-success'}); });
The following configuration options are available.
Name | Type | Description | Default |
---|---|---|---|
selectClass | string | The Class applied to selected elements. | "selected" |
unSelectClass | string | The Class applied to un-selected elements. | "un-selected" |
currentClass | string | The Class applied to the current selected element. | "selected-current" |
lastClass | string | The Class applied to the last selected element. | "selected-last" |
shiftClass | string | The Class applied to the last shift selected element. | "selected-shift" |
ctrlClass | string | The Class applied to the last ctrl selected element. | "selected-ctrl" |
triggerUpdate | string | The Event omitted whenever finderSelect is updated. | "finderSelectUpdate" |
children | selector string | Manually set the child element selector. Eg "li" for list elements | "selected" |
event | event string | The Event which triggers a selection. | "mousedown" |
cursor | css string | The cursor applied to the finderSelect element | "pointer" |
dragEvent | string | The Event which triggers a drag selection. | "mouseenter" |
enableClickDrag | boolean | Enable/Disable Ctrl + Click + Drag. | true |
enableShiftClick | boolean | Enable/Disable Shift + Click bulk selection. | true |
enableCtrlClick | boolean | Enable/Disable Ctrl + Click Toggle Click. | true |
enableSingleClick | boolean | Enable/Disable The standard Single Click. | true |
enableSelectAll | boolean | Enable/Disable Select All Keyboard Shortcuts. | true |
enableDisableSelection | boolean | Enable/Disable Disabling Text Selection when needed. | true |
enableTouchCtrlDefault | boolean | Enable/Disable Ctrl + Click as the default on touch devices. | true |
enableDesktopCtrlDefault | boolean | Enable/Disable Ctrl + Click as the default. | false |
totalSelector | selector string | The Selector used to update row counts. eg ".demo-count" | false |
menuSelector | string | The Selector used to show the menu elemenet. eg "#demo-menu" | false |
menuXOffset | integer | The X Offset for the menu element | 0 |
menuYOffset | integer | The Y Offset for the menu element | 0 |
The following methods are available.
Name | Parameters | Description | Usage |
---|---|---|---|
highlight | element | Highlights elements | $('#demo').finderSelect('highlight', $('ul')); |
unHighlight | - | UnHighlights elements | $('#demo').finderSelect('unHighlight', $('ul')); |
highlightAll | - | Highlights all child elements. | $('#demo').finderSelect('highlightAll'); |
unHighlightAll | - | UnHighlights all child elements | $('#demo').finderSelect('unHighlightAll'); |
selected | - | Returns all the selected elements. | $('#demo').finderSelect('selected'); |
children | - | Returns all the child elements | $('#demo').finderSelect('children'); |
update | - | Forces an update on element. Useful for when dom changes occur outside finderSelect. | $('#demo').finderSelect('update'); |
addHook | hook, function | Adds a hook to the finderSelect instance. Allows multiple assignment. | $('#demo').finderSelect('addHook','unHighlight:before', function() { /* do something */ }); |
The following hooks are available.
Name | Parameters | Description | Usage |
---|---|---|---|
highlight:before | element, options | Called before the Highlight event | $('#demo').finderSelect('addHook','highlight:before', function(element, options) { /* do something */ }); |
highlight:after | element, options | Called after the Highlight event | $('#demo').finderSelect('addHook','highlight:after', function(element, options) { /* do something */ }); |
unHighlight:before | element, options | Called before the unHighlight event | $('#demo').finderSelect('addHook','unHighlight:before', function(element, options) { /* do something */ }); |
unHighlight:after | element, options | Called after the unHighlight event | $('#demo').finderSelect('addHook','unHighlight:after', function(element, options) { /* do something */ }); |
© Michael Angell 2013