Pages

Monday, February 14, 2011

jQuery Plugin - article box

/**
 * This plugin provide the style for article box
 *
 * @name    : article box
 * @author  : irfanudin ridho
 * @email   : irfan.ub@gmail.com
 * @version : 1.0
 * @date    : February 14, 2011
 */

<script src="jquery-1.5.js"></script>

<div id="rounded">
<h3>Title</h3>
<p>This is the text like looks in the Apple web sites. So anyone who has hope for the beautifullness, please make sure you are also run the commands here.</p>
</div>

<script>
/**
 * The format of the html content is like this
 * <div>
 *  <h3>Title</h3>
 *  <p>Content you want to add</p>
 * </div>
 */

(function($){
 $.fn.shadow = function(){
  $(this).css({'margin':'0px'});
  $(this).children().css({'margin':'0px'});
  $(this).css({'border':'1px solid #aaa','padding':'10px',
    '-moz-box-shadow':'0 0 2px #aaa', '-moz-border-radius':'4px',
    'font-family':'sans-serif',});
  $(this).children('h3').css({'font-size':'14px','padding':'0 0 5px'});
  $(this).children('p').css({'font-size':'12px','color':'#444'}); 
 };
})(jQuery);

$('#rounded').shadow();
</script>

No comments:

Post a Comment