Gmail Style Message Inbox Design with jQuery & CSS

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

• Add Star / Unstar Messages
• Delete Single Message
• Delete Multiple Messages
• Mark as Read
• Mark as Unread

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.

Image may be NSFW.
Clik here to view.

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!

View Live Demo & Download