jQuery UI List



jQuery UI List

This is a plugin based on jQuery UI using the widget and themes framework.
It is about showing up a list of items to the user.
Features:
  • customizable template for list items;
  • customizable trigger action on list item click;
  • customizable post-processing on list items for additional functionality, like creating jQuery buttons inside list-items
Motivation started from the need of displaying a user list on an administration interface. I made this list to display the users and added a simplified templating engine to render each line as part of the interface.

USAGE

Usage follows the jQuery UI paradigm: all commands are made by adding parameters to the single function jQuery.list().
The basic markup for the plugin is:


Header (write whatever fits you)
    Footer (write whatever fits you)

    the UL element should be kept empty, as it will be overwritten.
    The methods accepted are:


    jQuery('#your-list').list();
    jQuery('#your-list').list('destroy');
    jQuery('#your-list').list('fill',array);

    Where array can either be simply an arrays of strings or numbers, or an array of objects.


    ['item1, 'item2', 'item3']
    or
    [{text:'item1'}
    ,{text:'item2'}
    ,{text:'item3'}
    ]
    or, if you customize the listTemplate (see below), any number of properties with names different from 'text':
    [{label:'item1', value:'banana'}
    ,{label:'item2', value:'orange'}
    ,{label:'item3', value:'grape'}
    ]

    To customize the listTemplate, you must send it on plugin initialization. This is the default:
    '
  • #{text}

    • '
    The plugin will look for the object properties in each array element, and look for a variable with the same name on the template. The third data array example above is useable with the following template:

    jQuery.list({
    listTemplate: '
  • #{label}:#{value}

    • '
    });


    As is common with all jQuery UI plugins, you can send the data right in the initialization:


    jQuery('#your-list').list(
    {
    listTemplate: '
  • #{label}:#{value}

    • '
    , data: [
    {label:'item1', value:'banana'}
    ,{label:'item2', value:'orange'}
    ,{label:'item3', value:'grape'}
    ]
    }
    );


    TODO

    • add option to have pager functionality on the footer.
    • add array-like manipulation methods:
      • pop
      • push
      • slice
      • splice
      • sort
      • reverse
      • shift
      • unshift

    Download it here.
    Assinar: Postagens (Atom)