基于jQuery HTML5添加到购物车代码。这是一款支持选择颜色跟样式的添加购物车代码。效果图如下：
在线预览 源码下载
实现的代码。
html代码：
<header> <h1>Quick Add to Cart</h1> </header> <a href="#0" class="cd-cart"> <span>0</span> </a> <ul class="cd-gallery"> <li> <div class="cd-single-item"> <a href="#0"> <ul class="cd-slider-wrapper"> <li><img src='/images/loading.gif' data-original="img/thumb-1.jpg" ></li> <li class="selected"><img src='/images/loading.gif' data-original="img/thumb-2.jpg" ></li> <li><img src='/images/loading.gif' data-original="img/thumb-3.jpg" ></li> </ul> </a> <div class="cd-customization"> <div class="color selected-2" data-type="select"> <ul> <li class="color-1">color-1</li> <li class="color-2 active">color-2</li> <li class="color-3">color-3</li> </ul> </div> <div class="size" data-type="select"> <ul> <li class="small active">Small</li> <li class="medium">Medium</li> <li class="large">Large</li> </ul> </div> <button class="add-to-cart"> <em>Add to Cart</em> <svg x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32"> <path stroke-dasharray="19.79 19.79" stroke-dashoffset="19.79" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11" /> </svg> </button> </div> <!-- .cd-customization --> <button class="cd-customization-trigger">Customize</button> </div> <!-- .cd-single-item --> <div class="cd-item-info"> <b><a href="#0">Product Name</a></b> <em>$9.99</em> </div> <!-- cd-item-info --> </li> <li> <div class="cd-single-item"> <a href="#0"> <ul class="cd-slider-wrapper"> <li class="selected"><img src='/images/loading.gif' data-original="img/thumb-1.jpg" ></li> <li><img src='/images/loading.gif' data-original="img/thumb-2.jpg" ></li> <li><img src='/images/loading.gif' data-original="img/thumb-3.jpg" ></li> </ul> </a> <div class="cd-customization"> <div class="color" data-type="select"> <ul> <li class="color-1 active">color-1</li> <li class="color-2">color-2</li> <li class="color-3">color-3</li> </ul> </div> <div class="size" data-type="select"> <ul> <li class="small active">Small</li> <li class="medium">Medium</li> <li class="large">Large</li> </ul> </div> <button class="add-to-cart"> <em>Add to Cart</em> <svg x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32"> <path stroke-dasharray="19.79 19.79" stroke-dashoffset="19.79" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11" /> </svg> </button> </div> <!-- .cd-customization --> <button class="cd-customization-trigger">Customize</button> </div> <!-- .cd-single-item --> <div class="cd-item-info"> <b><a href="#0">Product Name</a></b> <em>$9.99</em> </div> <!-- cd-item-info --> </li> <li> <div class="cd-single-item"> <a href="#0"> <ul class="cd-slider-wrapper"> <li><img src='/images/loading.gif' data-original="img/thumb-1.jpg" ></li> <li><img src='/images/loading.gif' data-original="img/thumb-2.jpg" ></li> <li class="selected"><img src='/images/loading.gif' data-original="img/thumb-3.jpg" ></li> </ul> </a> <div class="cd-customization"> <div class="color selected-3" data-type="select"> <ul> <li class="color-1">color-1</li> <li class="color-2">color-2</li> <li class="color-3 active">color-3</li> </ul> </div> <div class="size" data-type="select"> <ul> <li class="small active">Small</li> <li class="medium">Medium</li> <li class="large">Large</li> </ul> </div> <button class="add-to-cart"> <em>Add to Cart</em> <svg x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32"> <path stroke-dasharray="19.79 19.79" stroke-dashoffset="19.79" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11" /> </svg> </button> </div> <!-- .cd-customization --> <button class="cd-customization-trigger">Customize</button> </div> <!-- .cd-single-item --> <div class="cd-item-info"> <b><a href="#0">Product Name</a></b> <em>$9.99</em> </div> <!-- cd-item-info --> </li> <li> <div class="cd-single-item"> <a href="#0"> <ul class="cd-slider-wrapper"> <li class="selected"><img src='/images/loading.gif' data-original="img/thumb-1.jpg" ></li> <li><img src='/images/loading.gif' data-original="img/thumb-2.jpg" ></li> <li><img src='/images/loading.gif' data-original="img/thumb-3.jpg" ></li> </ul> </a> <div class="cd-customization"> <div class="color" data-type="select"> <ul> <li class="color-1 active">color-1</li> <li class="color-2">color-2</li> <li class="color-3">color-3</li> </ul> </div> <div class="size" data-type="select"> <ul> <li class="small active">Small</li> <li class="medium">Medium</li> <li class="large">Large</li> </ul> </div> <button class="add-to-cart"> <em>Add to Cart</em> <svg x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32"> <path stroke-dasharray="19.79 19.79" stroke-dashoffset="19.79" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11" /> </svg> </button> </div> <!-- .cd-customization --> <button class="cd-customization-trigger">Customize</button> </div> <!-- .cd-single-item --> <div class="cd-item-info"> <b><a href="#0">Product Name</a></b> <em>$9.99</em> </div> <!-- cd-item-info --> </li> <li> <div class="cd-single-item"> <a href="#0"> <ul class="cd-slider-wrapper"> <li><img src='/images/loading.gif' data-original="img/thumb-1.jpg" ></li> <li class="selected"><img src='/images/loading.gif' data-original="img/thumb-2.jpg" ></li> <li><img src='/images/loading.gif' data-original="img/thumb-3.jpg" ></li> </ul> </a> <div class="cd-customization"> <div class="color selected-2" data-type="select"> <ul> <li class="color-1">color-1</li> <li class="color-2 active">color-2</li> <li class="color-3">color-3</li> </ul> </div> <div class="size" data-type="select"> <ul> <li class="small active">Small</li> <li class="medium">Medium</li> <li class="large">Large</li> </ul> </div> <button class="add-to-cart"> <em>Add to Cart</em> <svg x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32"> <path stroke-dasharray="19.79 19.79" stroke-dashoffset="19.79" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11" /> </svg> </button> </div> <!-- .cd-customization --> <button class="cd-customization-trigger">Customize</button> </div> <!-- .cd-single-item --> <div class="cd-item-info"> <b><a href="#0">Product Name</a></b> <em>$9.99</em> </div> <!-- cd-item-info --> </li> <li> <div class="cd-single-item"> <a href="#0"> <ul class="cd-slider-wrapper"> <li class="selected"><img src='/images/loading.gif' data-original="img/thumb-1.jpg" ></li> <li><img src='/images/loading.gif' data-original="img/thumb-2.jpg" ></li> <li><img src='/images/loading.gif' data-original="img/thumb-3.jpg" ></li> </ul> </a> <div class="cd-customization"> <div class="color" data-type="select"> <ul> <li class="color-1 active">color-1</li> <li class="color-2">color-2</li> <li class="color-3">color-3</li> </ul> </div> <div class="size" data-type="select"> <ul> <li class="small active">Small</li> <li class="medium">Medium</li> <li class="large">Large</li> </ul> </div> <button class="add-to-cart"> <em>Add to Cart</em> <svg x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32"> <path stroke-dasharray="19.79 19.79" stroke-dashoffset="19.79" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11" /> </svg> </button> </div> <!-- .cd-customization --> <button class="cd-customization-trigger">Customize</button> </div> <!-- .cd-single-item --> <div class="cd-item-info"> <b><a href="#0">Product Name</a></b> <em>$9.99</em> </div> <!-- cd-item-info --> </li> </ul> <!-- cd-gallery --> <script src='/images/loading.gif' data-original="js/jquery-2.1.4.js"></script> <script src='/images/loading.gif' data-original="js/main.js"></script> <!-- Resource jQuery -->
via：http://www.w2bc.com/article/59196
原标题：基于jQuery HTML5添加到购物车代码
关键词：HTML
我知道了 