你的位置:首页 > Java教程

[Java教程]基于jQuery HTML5添加到购物车代码


基于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="img/thumb-1.jpg" alt="Preview image"></li>            <li class="selected"><img src="img/thumb-2.jpg" alt="Preview image"></li>            <li><img src="img/thumb-3.jpg" alt="Preview image"></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="img/thumb-1.jpg" alt="Preview image"></li>            <li><img src="img/thumb-2.jpg" alt="Preview image"></li>            <li><img src="img/thumb-3.jpg" alt="Preview image"></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="img/thumb-1.jpg" alt="Preview image"></li>            <li><img src="img/thumb-2.jpg" alt="Preview image"></li>            <li class="selected"><img src="img/thumb-3.jpg" alt="Preview image"></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="img/thumb-1.jpg" alt="Preview image"></li>            <li><img src="img/thumb-2.jpg" alt="Preview image"></li>            <li><img src="img/thumb-3.jpg" alt="Preview image"></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="img/thumb-1.jpg" alt="Preview image"></li>            <li class="selected"><img src="img/thumb-2.jpg" alt="Preview image"></li>            <li><img src="img/thumb-3.jpg" alt="Preview image"></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="img/thumb-1.jpg" alt="Preview image"></li>            <li><img src="img/thumb-2.jpg" alt="Preview image"></li>            <li><img src="img/thumb-3.jpg" alt="Preview image"></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="js/jquery-2.1.4.js"></script>  <script src="js/main.js"></script> <!-- Resource jQuery -->

via:http://www.w2bc.com/article/59196