jQuery finderSelect Plugin Examples

Advanced Usage

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.

$(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'));
            });
        });
});

Extending

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;
        });

});

TBODY Only

To enable selecting on only tbody rows simply call

$(function() {
    $('#demo2').find('tbody').finderSelect();
});

Custom Class

If you want to use a custom class for highlighting such as using Twitter Bootstrap

$(function() {
    $('#demo3').find('tbody').finderSelect({selectClass:'danger'});
});

Other Elements

This plugin works on all nested elements. The example below shows span tags within a parent div.

$(function() {
     $('#demo4').finderSelect({selectClass:'label-success'});
});

Configuration Options

The following configuration options are available.

Methods

The following methods are available.

$('#demo').finderSelect('highlight', $('ul'));

$('#demo').finderSelect('unHighlight', $('ul'));

$('#demo').finderSelect('highlightAll');

$('#demo').finderSelect('unHighlightAll');

$('#demo').finderSelect('selected');

$('#demo').finderSelect('children');

$('#demo').finderSelect('update');

$('#demo').finderSelect('addHook','unHighlight:before', function() { /* do something */ });

Hooks

The following hooks are available.

$('#demo').finderSelect('addHook','highlight:before', function(element, options) { /* do something */ });

$('#demo').finderSelect('addHook','highlight:after', function(element, options) { /* do something */ });

$('#demo').finderSelect('addHook','unHighlight:before', function(element, options) { /* do something */ });

$('#demo').finderSelect('addHook','unHighlight:after', function(element, options) { /* do something */ });

© Michael Angell 2013