GrassHopperPebbles.com Demos

JQuery Plugins

imList 1.0 - Self Option

The following example shows how to use the imList plugin with the display.type option set to "self". The 'self' uses regular expressions to display content. Using this type of list can be a bit complex, but once you play around with it, you will see how flexible it is. The key to using 'self' option is first knowing how you want your page layed out. To create the layout in the example below, I first created a template (in a separate html file) and tweeked the css styles until it was layed out as I wanted. I then copied the template onto the page and plugged in the db fields so that it could be used with the plugin.

The data returned from the server should be Json object. The example below uses the following data:

[{"member_id": "1", "name": "Jack O\'neal", "address": "225 Cheyenne Mountain", "city": "Colorado Springs", "state_abbrev": "CO", "dir_name": "images/", "img_name": "joneil.jpg", "thumb_width": "150px", "thumb_height": "100px", "avg_rating": "4", member_music: [ { "music_cat_id":"3", "music_desc":"Blues" }, { "music_cat_id":"5", "music_desc":"Country" }, { "music_cat_id":"21", "music_desc":"Biker" }, { "music_cat_id":"10", "music_desc":"Rock" }, { "music_cat_id":"14", "music_desc":"R&B" }, { "music_cat_id":"19", "music_desc":"Classics" }]}, {"member_id": "2", "name": "Samantha Carter", "address": "226 Cheyenne Mountain", "city": "Colorado Springs", "state_abbrev": "CO", "dir_name": "images/", "img_name": "scarter.jpg", "thumb_width": "150px", "thumb_height": "100px", "avg_rating": "4", member_music: [ { "music_cat_id":"3", "music_desc":"Blues" }, { "music_cat_id":"1", "music_desc":"80s Music" }, { "music_cat_id":"7", "music_desc":"House" }, { "music_cat_id":"10", "music_desc":"Rock" }, { "music_cat_id":"14", "music_desc":"R&B" }]}, {"member_id": "3", "name": "Daniel Jackson", "address": "227 Cheyenne Mountain", "city": "Colorado Springs", "state_abbrev": "CO", "dir_name": "images/", "img_name": "djackson.jpg", "thumb_width": "150px", "thumb_height": "100px", "avg_rating": "4", member_music: [ { "music_cat_id":"3", "music_desc":"Blues" }, { "music_cat_id":"6", "music_desc":"Dance" }, { "music_cat_id":"7", "music_desc":"House" }, { "music_cat_id":"10", "music_desc":"Rock" }, { "music_cat_id":"14", "music_desc":"R&B" }, { "music_cat_id":"15", "music_desc":"Reggae" }]}, {"member_id": "4", "name": "Teal\'c of Chulak", "address": "228 Cheyenne Mountain", "city": "Colorado Springs", "state_abbrev": "CO", "dir_name": "images/", "img_name": "tealc.jpg", "thumb_width": "150px", "thumb_height": "100px", "avg_rating": "4", member_music: [ { "music_cat_id":"3", "music_desc":"Blues" }, { "music_cat_id":"6", "music_desc":"Dance" }, { "music_cat_id":"7", "music_desc":"House" }, { "music_cat_id":"10", "music_desc":"Rock" }, { "music_cat_id":"13", "music_desc":"Karoake" }, { "music_cat_id":"14", "music_desc":"R&B" }]}, {"member_id": "5", "name": "Cameron Mitchell", "address": "229 Cheyenne Mountain", "city": "Colorado Springs", "state_abbrev": "CO", "dir_name": "images/", "img_name": "cmitchell.jpg", "thumb_width": "150px", "thumb_height": "100px", "avg_rating": "4", member_music: [ { "music_cat_id":"3", "music_desc":"Blues" }, { "music_cat_id":"16", "music_desc":"Mash-up" }, { "music_cat_id":"7", "music_desc":"House" }, { "music_cat_id":"10", "music_desc":"Rock" }, { "music_cat_id":"14", "music_desc":"R&B" }]}, {"member_id": "6", "name": "Vala Mal Doran", "address": "230 Cheyenne Mountain", "city": "Colorado Springs", "state_abbrev": "CO", "dir_name": "images/", "img_name": "vala.jpg", "thumb_width": "150px", "thumb_height": "100px", "avg_rating": "4", member_music: [ { "music_cat_id":"3", "music_desc":"Blues" }, { "music_cat_id":"6", "music_desc":"Dance" }, { "music_cat_id":"7", "music_desc":"House" }, { "music_cat_id":"10", "music_desc":"Rock" }, { "music_cat_id":"15", "music_desc":"Reggae" }, { "music_cat_id":"14", "music_desc":"R&B" }]}]

View the source code for this page to view how to use the plugin. For documentation about the imList plugin, view the blog post.

Tags

, , , , ,