Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

This module has been deprecated and is no longer supported by the module author.

Smart List (gallery-smart-list) on cdn

Last Updated: 01/29/11

Caridy Patino

YUI Contributor

See 11 more by this user.

Created: 03/2/10
Last CDN Push: 03/11/10
Build Tag: gallery-2010.03.11-21
Project: YUI 3
License: YUI BSD
YUI Version: 3.3.0
Free for use.

Smart List will allow you to display a list of elements (not necessarily using UL/LI), and filtering which element should be displayed based on a selector. This component will be the base component for quicksand as well.

The general idea comes from few javascript components:

- Smart Lists - Prototype Extension (by Benjamin Keen)
http://www.benjaminkeen.com/software/smartlists/prototype/

- Quicksand - jQuery Plugin (by @razorjack)
http://razorjack.net/quicksand/

- Few more mosaic components to organize elements using animations.

The plugin was designed as a very basic plugin to handle listing, and on top of it, you can add more features, like Quicksand effects based on YUI Anim, etc.

The supporting version is marked as 3.0, but it requires some new features from YUI 3.1 (or on development head from github prior to the release).

In this example, we plug the smart listing plugin into a node (in this case an UL element), and we apply certain filtering:

1- when a user click on an element with id = buttondisplayall, the list of elements should be refreshed, displaying all the elements

2- when a user click on an element with id = buttondisplayapps, the list of elements should be refreshed, displaying only elements with data-type = app

3- when a user click on an element with id = buttondisplayutils, the list of elements should be refreshed, displaying only elements with a classname = util

Code Sample

<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2010.03.11-21'
}).use('event', 'node', 'gallery-smart-list', function(Y) {
 
    Y.one("#applications").plug(Y.Plugin.SmartList, {
        selector: 'li'
    });
 
    mylist = Y.one("#applications").smartlist;
 
    Y.one('#buttondisplayall').on('click', function(e) {
        mylist.set('filter', ''); // setting filter to empty
    });
 
    Y.one('#buttondisplayapps').on('click', function(e) {
        mylist.set('filter', 'li[data-type=app]');  // setting the filter to display elements with data-type = app
    });
 
    Y.one('#buttondisplayutils').on('click', function(e) {
        mylist.set('filter', 'li[class=util]'); // setting the filter to display elements with class util
    });
 
});

Forum Posts

No forum posts for this module.