jQuery List Page Enhancer
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.
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
- Systems Development
- Design & Branding
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 See live Demo
Source
