Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views :

Gmail Style Message Inbox Design with jQuery & CSS

/
/

Today I am going to tell how to create Gmail Style Message Inbox Design with jQuery & CSS.  From this design you can able to

This tutorial will bring you exactly look like gmail feature. Designers can easily integrate this code in your existing web projects. I hope everyone will like this tutorial.

Gmail Style Message Inbox with Jquery & CSS
Gmail Style Message Inbox

Jquery Code to Check All/ Uncheck All

jQuery('.checkall').click(function(){
var parentTable = jQuery(this).parents('table');
var ch = parentTable.find('.checkbox');
if(jQuery(this).is(':checked')) {
//check all rows in table
ch.each(function(){
jQuery(this).attr('checked',true);
jQuery(this).parent().addClass('checked'); //used for the custom checkbox style
jQuery(this).parents('tr').addClass('selected'); // to highlight row as selected
});
} else {
//uncheck all rows in table
ch.each(function(){
jQuery(this).attr('checked',false);
jQuery(this).parent().removeClass('checked'); //used for the custom checkbox style
jQuery(this).parents('tr').removeClass('selected');
});
}
});

jQuery Code to Mark Star / Unstar

jQuery('.msgstar').click(function(){
if(jQuery(this).hasClass('starred'))
jQuery(this).removeClass('starred');
else
jQuery(this).addClass('starred');
});

jQuery Code to delete multiple messages

  if(jQuery('.delete').length > 0) {
jQuery('.delete').click(function(){
var c = false;
var cn = 0;
var o = new Array();
jQuery('.mailinbox input:checkbox').each(function(){
if(jQuery(this).is(':checked')) {
c = true;
o[cn] = jQuery(this);
cn++;
}
});
if(!c) {
alert('No selected message');
} else {
var msg = (o.length > 1)? 'messages' : 'message';
if(confirm('Delete '+o.length+' '+msg+'?')) {
for(var a=0;a<cn;a++) {
jQuery(o[a]).parents('tr').remove();
}
}
}
});
}

jQuery Code to Mark as Read

jQuery('.mark_read').click(function(){
var c = false;
var cn = 0;
var o = new Array();
jQuery('.mailinbox input:checkbox').each(function(){
if(jQuery(this).is(':checked')) {
c = true;
o[cn] = jQuery(this);
cn++;
}
});
if(!c) {
alert('No selected message');
} else {
var msg = (o.length > 1)? 'messages' : 'message';
if(confirm('Mark '+o.length+' '+msg+' to read')) {
for(var a=0;a<cn;a++) {
jQuery(o[a]).parents('tr').removeClass('unread');
}
}
}
});

jQuery Code to Mark as Unread

jQuery('.mark_unread').click(function(){
var c = false;
var cn = 0;
var o = new Array();
jQuery('.mailinbox input:checkbox').each(function(){
if(jQuery(this).is(':checked')) {
c = true;
o[cn] = jQuery(this);
cn++;
}
});
if(!c) {
alert('No selected message');
} else {
var msg = (o.length > 1)? 'messages' : 'message';
if(confirm('Mark '+o.length+' '+msg+' to unread')) {
for(var a=0;a<cn;a++) {
jQuery(o[a]).parents('tr').addClass('unread');
}
}
}
});

Please don’t forget to share and subscribe to latest updates of the blog. Also any comments and feedback are all welcome!

Thanks!

  • Facebook
  • Twitter
  • Google+
  • Linkedin