jQuery Plugin - Button V2

/**

 * This plugin provide service to render a button

 * so that it will look more appealing

 *

 * @type    : jQuery Plugin

 * @author  : irfanudin ridho

 * @email   : irfan.ub@gmail.com

 * @version : 2.0

 * @date    : February 25, 2011

 */

(function($){

$.fn.button = function(){

    $(this).addClass('button');
   
    $(this).mouseover(function(){
        $(this).addClass('button-hover');
    });
   
    $(this).mouseout(function(){
        $(this).removeClass('button-hover');
    });
   
    $(this).mousedown(function(){
        $(this).addClass('button-down');
    });

    $(this).mouseup(function(){
        $(this).removeClass('button-down');
    });
   
    $(this).mouseout(function(){
        $(this).removeClass('button-down');
    });
   
 }
})(jQuery);

The css file:

.button { background: #aaf; padding: 5 10px; 

          font: 14px sans-serif; font-weight: bold; 

          color: white; -moz-border-radius: 5px; 

          border: 1px solid #aaf; }
.button-hover { background: #88f; cursor: pointer; }
.button-down { background: #51f; } 

jQuery Plugin - Button

/**

 * This plugin render the button looks like more appealing

 *

 * @type    : jQuery pluggin

 * @author  : irfanudin ridho

 * @email   : irfan.ub@gmail.com

 * @version : 1.0

 * @date    : February 25, 2011

 */

(function($){

$.fn.button = function(){

    $(this).addClass('button');
   
    $(this).mouseover(function(){
        $(this).addClass('button-hover');
    });
   
    $(this).mouseout(function(){
        $(this).removeClass('button-hover');
    });
   
 }
})(jQuery);

This is the css file:

.button { background: #aaf; padding: 5 10px; 

          font: 14px sans-serif; font-weight: bold; 

          color: white; -moz-border-radius: 5px; 

          border: 1px solid #aaf; }
.button-hover { background: #88f; cursor: pointer; }

jQuery Plugin - Histogram

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


<div id="chart">
<div id="inner">
 <div id="left">a

 </div>

 <div id="right">
  <div id="main">  
    <div id="one" class="bar">    
     <div class="center"></div>        
    </div>
    <div id="two" class="bar">    
     <div class="center"></div>    
    </div>
    <div id="three" class="bar">    
     <div class="center"></div>    
    </div>
    <div id="four" class="bar">    
     <div class="center"></div>   
    </div>
    <div style="clear: both"></div>
  
   </div><!-- End of main -->
  <div id="bottom">
  
  </div><!-- End of bottom -->


 </div><!-- End of right -->
 <div style="clear:both"></div>

</div><!-- End of inner -->
</div><!-- End of char -->

<style>
div,body, html  { margin: 0px; padding: 0px; }
#inner { border: 1px solid #aaa; height: 200px; width: 400px; padding: 2px;  }
#left { width: 30px; height: 100%; float: left; border-right: 1px solid #aaa; opacity: 1;}
#right { height: 100%;  }
#main { background: azure; width: 100%; height: 90%;  }
#bottom {  width: 100%; height: 10%; border-top: 1px solid #aaa; margin: 1 0 0px;   }

.bar { float: left; width: 20%; height: 100%; position: relative; }
.center { width: 30%; height: 80%; background: blue; position: absolute; bottom: 0px; left: 30%;}
#one .center { height: 40%; }
#two .center { height: 60%; }
#three .center { height: 70%; }
#four .center { height: 30%; }
</style>

<script>

/**

 * A plugin for horizontal histogram of jQuery

 * 

 * @author  : irfanudin ridho

 * @email   : irfan.ub@gmail.com

 * @date    : February 16, 2010

 * @version : alpha

 */

(function($){

    $.fn.histogram = function(){

       // the code goes here

    };

});

</script>

jQuery Plugin - article image

<script>

/**

 * An Article Image

 *

 * @author   : irfanudin ridho

 * @email    : irfan.ub@gmail.com

 * @version  : 2.0

 * @date    : February 15, 2011

 *

 * The structure of the html content should like this:

 * <div id="some_id">

 *  <img src="some_path"/>

 *  <h1>Title</h1>

 *  <p>Some Text Placed Here</p>

 * </div>

 */

(function($){

    $.fn.articleImage = function(){

        $(this).find('img').attr('align','left');
        $(this).find('h3,p').addClass('jq-all-box')
        $(this).addClass('jq-all-box');
        $(this).addClass('jq-page');
        $(this).find('img').addClass('jq-img');
        $(this).find('h3').addClass('jq-h3');
        $(this).find('p').addClass('jq-p');
 
        return this;
   };
})(jQuery);

</script>


<style>

.jq-img { width: 100px; margin: 0 10 10 0px;
          -moz-border-radius: 4px; border: 0px solid #aaa; }  
.jq-all-box { margin: 0px; }
.jq-page { width: 300px; overflow: auto; border: 1px solid #aaa;
           padding: 10px; -moz-border-radius: 4px; 
           -moz-box-shadow: 0 0 2px #aaa; font-family: sans-serif; }
.jq-h3 { font-size: 16px; color: #222; margin: 0 0 5px; }
.jq-p { font-size: 12px; color: #444; }

</style>

jQuery Plugin - article box

<script>
/**

 * @name    : article box

 * @author  : irfanudin ridho

 * @email   : irfan.ub@gmail.com

 * @version : 2.0

 * @date    : February 15, 2011

 *
 * 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).addClass('jq-base').addClass('jq-box');
        $(this).find('h3').addClass('jq-base').addClass('jq-h3');
        $(this).find('p').addClass('jq-base').addClass('jq-p');

        return this;
    };
})(jQuery);

</script>

<style>
.jq-base { margin: 0px; }
.jq-box { border: 1px solid #aaa; padding: 10px; 
          -moz-box-shadow: 0 0 2px #aaa; -moz-border-radius: 4px;
          font-family: sans-serif; }
.jq-h3 { font-size: 14px; padding: 0 0 5px; }
.jq-p { font-size: 12px; color: #444; }
</style>

jQuery Plugin - table

/**

 * This plugin provide stylesheet for table.

 * 

 * @author   : irfanudin ridho

 * @email    : irfan.ub@gmail.com

 * @version  : 1.0

 * @date     : February 15, 2011

 * 

 * The structure of the table is like this

 * <table>

 * <tr><th>Name</th><th>City</th></tr>

 * <tr><td>Lady Gaga</td><td>New York City</td></tr>

 * <tr><td>Luna Maya</td><td>Denpasar</td></tr>

 * </table>

 */

<script>
(function($){
    $.fn.table = function(){
        $(this).addClass('jq-table');
        $(this).find('th').addClass('jq-th');
        $(this).find('td').addClass('jq-td');
        $(this).find('tr:odd').addClass('jq-tr-odd');
        $(this).find('tr:even').addClass('jq-tr-even');
        $(this).find('tr').mouseover(function(){
            $(this).addClass('jq-tr-hover');
        });
        $(this).find('tr').mouseout(function(){
            $(this).removeClass('jq-tr-hover');
        });
        $(this).find('tr:first').addClass('jq-tr-first');
        $(this).find('tr:first').mouseover(function(){
            $(this).removeClass('jq-tr-hover');

        });

        return this;
 };
})(jQuery);

</script>

<style>
.jq-table { width: 100% }
.jq-tr-odd { background: #efe; }
.jq-tr-even { background: #fef; }
.jq-tr-first { background: #ccf; color: #444; }
.jq-tr-hover { background: #af5; }
.jq-td { font: 12px arial; padding: 2 0 2 10px; color: #444; }
.jq-th { text-align: left; padding: 2 0 2 10px; }
</style>

jQuery Plugin - textbox

<script>
/**
 * This plugin can be implemented for textfield, password and
 * textarea tag element
 *

 * @name    : textbox

 * @author  : irfan.ub@gmail.com

 * @version : 1.0

 * @date    : February 15, 2011

 */

(function($){

    $.fn.textbox = function(){

        $(this).addClass('input-text');
        $(this).mouseover(function(){
            $(this).addClass('input-text-hover');
        });
        $(this).mouseout(function(){
            $(this).removeClass('input-text-hover');
        });
        $(this).focusin(function(){
            $(this).addClass('input-text-focus');
        });
        $(this).focusout(function(){
             $(this).removeClass('input-text-focus');
        });

        return this;
    };
})(jQuery);

</script>

<style>

.input-text { border: 1px solid #aaa; -moz-border-radius: 4px;

              padding: 2px; }

.input-text-hover { -moz-box-shadow: 0 0 2px gold; 

                    border: 1px solid #ccc;}

.input-text-focus { -moz-box-shadow: 0 0 2px lime; }

</style>

jQuery Plugin - Image Articles

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

<div id="satu">
<img src="nature.jpg" width="200px;" align="left"/><h3>Nature</h3><p>What we do love here. And we can do more for this one. This is just for the beginning for this one.</p>
</div>

<style>
#satu { width: 300px; overflow: auto; }
#satu img { width: 100px; margin: 0 10 10 0px; -moz-border-radius: 4px; border: 0px solid #aaa; }
#satu, div, h3, p { margin: 0px; }
#satu { border: 1px solid #aaa; padding: 10px; -moz-border-radius: 4px; -moz-box-shadow: 0 0 2px #aaa; font-family: sans-serif; }
#satu h3 { font-size: 16px; color: #222; margin: 0 0 5px; }
#satu p { font-size: 12px; color: #444; }

</style>

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>