JavaScript
Article

jQuery List Page Enhancer

By Sam Deering

Introduction

Basic client list pages are kind of dull looking. The design above would be the final result for this tutorial, we will also try to add a service list, and map those two lists together. Pointing to a service will show clients that bought that service while pointing to a client will show services bought by that client. Mapping those two together would be possible with the help of jQuery.
jQuery-List-Page-Enhancer.jpg

The HTML

We will use HTML 5 tags that will be tailored for modern browsers. There are few tags and a doctype that need to be changed to make it work on every browser though. The structure of the file
would be consisted of two HTML 5 tags: Header and section.

Services

Clients

As you can see, each list item has a various number of classes. Those are used to identify services and as well as to map services to clients viceversa. The class attribute inside anchor tags are used
To emphasize which clients or services are selected.
The CSS
We are going to use rounded corners for this tutorial.

/* reset basic styling and set rounded corners */
*
{ margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-size:inherit; }
.all-rounded,
ul.services li a,
ul.clients li a
{ border-radius:9px; -moz-border-radius:9px; -webkit-border-radius: 9px; }
.btlft-rounded
{ border-bottom-left-radius:9px; -moz-border-radius-bottomleft:9px; -webkit-border-bottom-left-radius:9px; }
.btrght-rounded
{ border-bottom-right-radius:9px; -moz-border-radius-bottomright:9px; -webkit-border-bottom-right-radius:9px; }
.top-rounded
{ border-top-left-radius:9px; -moz-border-radius-topleft:9px; -webkit-border-top-left-radius:9px;
border-top-right-radius:9px; -moz-border-radius-topright:9px; -webkit-border-top-right-radius:9px; }

/* styling of the general structure: size, position and alike */
header
{ display:block; width:801px; height:40px; margin:0px auto; margin-top:100px; border:1px solid #888;  border-bottom:none; }
header h1, header h2
{ display:block; margin:0px; padding:0px; }
header h1
{ width:200px; float:left; }
section
{ display:block; width:803px; margin:0px auto; margin-bottom:50px; overflow:auto; }
ul
{ display:block; float:left; list-style:none; padding-bottom:15px; }
ul.services
{ width:200px; }
ul.clients
{ width:600px; }

/* visual styling: colors, font size etc */
header
{ background:#999 url('../images/top.png') repeat-x; }
header h1, header h2
{ font-size:20px; color:#F6F6F6; line-height:40px; text-align:center; }
ul.services
{ background-color:#999; border:1px solid #888; border-right:none; }
ul.clients
{ background-color:#F0F0F0; border:1px solid #888; }

ul.services a, ul.clients a
{ text-decoration:none; }
ul.services li a
{ display:block; color:#F0F0F0; height:23px; line-height:25px; padding:0px 5px; border:1px solid #999; }
ul.services li a:hover
{ color:#222222; line-height:25px; padding:0px 5px; border:1px solid #222222; background:#999 url('../images/hover_services.png'); }
ul.services li ul
{ margin-left:20px; }
ul.services li
{ overflow:hidden; }

ul.clients li a
{ display:block; float:left; width:138px; padding:0px 5px; line-height:25px; height:23px; text-align:center; border:1px solid #F0F0F0; }
ul.clients li a:hover
{ color:#222222; line-height:25px; padding:0px 5px; border:1px solid #222222; background:#999 url('../images/hover_services.png'); }

ul.services li a.selected,
ul.clients li a.selected
{ color:#222222; line-height:25px; padding:0px 5px; border:1px solid #222222; background:#999 url('../images/hover_services.png'); }

The jQuery

Now, we would make the two columns the same height.

// resize column for same height
var servicesHeight = $('.services').height(); // get height of services ul
var clientsHeight = $('.clients').height(); // get height of clients ul
// check who's bigger and set height accordingly
if(servicesHeight>clientsHeight) $('.clients').height(servicesHeight);
   else $('.services').height(clientsHeight);

This next block of code will create the behavior necessary when clicking on services.

// if services on the left are clicked
$(‘.services a’).click(function(){
$(‘.selected’).attr(‘class’,”); // a service is clicked, make any, if selected, as not selected
// when we click one service we need to emphasize that it is selected
$(this).attr(‘class’,’selected’); // set current link as selected

// get the services classes
var classesString = $(this).parent().attr(‘class’);
var classes = classesString.split(‘ ‘); // now classes contains all class attributes of the service clicked
// loop through all classes
for(var i=0;i < classes.length;i++) { // set selected to all clients that have such a service $('.clients li.'+classes[i]+' a').attr('class','selected'); } }); [/cc] When clicking a client the same process will happen but does the job exactly the other way. We would first get the class attribute of the client to check out the services bought and then loop trough those services and set them as selected. [js] // if clients on the right are clicked $('.clients li a').click(function(){ $('.selected').attr('class',''); // a client is clicked, make any, if selected, as not selected // when we click one client we need to emphasize that it is selected $(this).attr('class','selected'); // set current link as selected // get the client's classes var classesString = $(this).parent().attr('class'); var classes = classesString.split(' '); // now classes contains all class attributes of the client clicked // loop through all classes for(var i=0;i < classes.length;i++) { // set selected to all services that were bought by the client $('.services li.'+classes[i]+' a').attr('class','selected'); } }); [/js] See live Demo
Source

No Reader comments

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in JavaScript, once a week, for free.