Created: 7th Oct 2012
By: Sike
Contact
Thank you for purchasing. And I appreciate if you can rate my item in the download section of codecanyon, thanks!
<script src="js/jquery-1.8.2.min.js"></script> <script src="js/jquery.pricetable.min.js"></script>
<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">
<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.
$(document).ready(function(){ $('#priceTable1').priceTable(); });That is it.
$('#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.
<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.
<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.
<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.
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.
jQuery, animate.css are open source.