“jQuery CSS3 Price Table Plugin” Documentation by “Sike”

---

“jQuery CSS3 Price Table Plugin”

---

Table of Contents

1. Usage
2. source and deploy Folder
3. Credits
4. Features

---

A) Usage - top

• Import the required Javascript, on the bottom of the page

  <script src="js/jquery-1.8.2.min.js"></script> 
  <script src="js/jquery.pricetable.min.js"></script>       
  

  and the CSS, on the top of the page.

  <link href="css/reset.css" rel="stylesheet" type="text/css">
  <link href="css/pricetable.css" rel="stylesheet" type="text/css">
  <link href="css/animate.css" rel="stylesheet" type="text/css">     
  

• HTML Structure

  <ul class="priceTable greenStyle" id="priceTable1">	
  	<li class="priceItem">
  		<ul>
  			<li class="header">Basic</li>
  			<li>Sub description</li>
  			<li data-animate="tada"><span class="price">$12</span>/mo</li>
  			<li>Unlimited bandwidth</li>			
  			<li>Max size of file: 100M</li>
  			<li><span class="strong green">5 GB</span> Storage</li>
  			<li>24/7 Free Support</li>			
  			<li class="button"><a href="#">Hello Button</a></li>			
  		</ul>		
  	</li>
  	<li class="priceItem active">
  		<ul class="badge">
  			<li class="header">Recommand</li>
  			<li data-animate="rotateIn">Pre defined animation</li>
  			<li><span class="price">$150</span>/year</li>
  			<li>Unlimited bandwidth</li>
  			<li>Max size of file: 500M</li>
  			<li><span class="strong blue">10 GB</span> Storage</li>
  			<li>24/7 Free Support</li>			
  			<li class="button"><a href="#">Sign Up</a></li>			
  		</ul>				
  	</li>
  	<li>...</li>
  	<li>...</li>
  	...
  </ul>
  
  

  Please make sure the list is nested properly.
• Basic plugin setup:

  $(document).ready(function(){
  	$('#priceTable1').priceTable();
  });	
  

  That is it.
• How to customize the global animation?
  You can customize the global animation when embed the plugin:

  $('#priceTable1').priceTable({
  	easeIn: 'fadeInLeft'
  });
  

  Now the defined global animation is fadeIn from left, fadeInLeft. And all the available animation you can find in the selection of the demo page.
• How to customize each row's animation?
  You can use the data-animate to control the animation of each row:

  <li data-animate="bounceInDown">Unlimited bandwidth</li>
  <li data-animate="bounceInUp">Max size of file: Unlimited</li>
  

  Now the animation of 2 above rows are bounceInDown and bounceInUp.
• How to customize the color style of the price table?
  Just add the color style class to the root of the price table.

  <ul class="priceTable greenStyle" id="priceTable1">
  	<li class="priceItem">
      	...
  	</li>
  	<li class="priceItem">
      	...
  	</li>	
  </ul>
  

  The buttons and badget(optional) will be green here. The available color style are: greenStyle, redStyle, blueStyle, pinkStyle, greyStyle, blackStyle, darkBlueStyle, lightBlueStyle.
• How to add the badget?
  Just add the class="badget" to the list you want to add a badget:

  <li class="priceItem active">
  	<ul class="badge">
  		<li>...</li>	
  		<li>...</li>				
  		...
  	</ul>
  </li>
  

  The layered png of the badge are in the layered_png of source folder, you can edit it there.

---

B) The source and deploy Folder - top

You only have to upload the files in the deploy folder. The deploy folder contains the minified javascript. You can just update the content in the index.html by your own ones.

Please don't upload the files in the source folder. The source folder contains the original javascript source, so please don't upload the javascript files in this folder. Thanks.

---

C)Credits - top

jQuery, animate.css are open source.

---

D)Features: - top

• CSS3 driven animation.
• Different color choice.
• Optional badge, the layered png of the badge are included.
• Optional animation transition of each rows.

---

Sike

Go To Table of Contents

---