基于jQueryHTML5添加到购物车代码

基于jQuery HTML5添加到购物车代码。这是一款支持选择颜色跟样式的添加购物车代码。效果图如下：

在线预览源码下载

实现的代码。

html代码：

<header><h1>Quick Add to Cart</h1></header><ahref="#0"class="cd-cart"><span>0</span></a><ulclass="cd-gallery"><li><divclass="cd-single-item"><ahref="#0"><ulclass="cd-slider-wrapper"><li><imgsrc="img/thumb-1.jpg"alt="PReview image"></li><liclass="selected"><imgsrc="img/thumb-2.jpg"alt="Preview image"></li><li><imgsrc="img/thumb-3.jpg"alt="Preview image"></li></ul></a><divclass="cd-customization"><divclass="color selected-2"data-type="select"><ul><liclass="color-1">color-1</li><liclass="color-2 active">color-2</li><liclass="color-3">color-3</li></ul></div><divclass="size"data-type="select"><ul><liclass="small active">Small</li><liclass="medium">Medium</li><liclass="large">Large</li></ul></div><buttonclass="add-to-cart"><em>Add to Cart</em><svgx="0px"y="0px"width="32px"height="32px"viewBox="0 0 32 32"><pathstroke-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><buttonclass="cd-customization-trigger">Customize</button></div><divclass="cd-item-info"><b><ahref="#0">Product Name</a></b><em>$9.99</em></div></li><li><divclass="cd-single-item"><ahref="#0"><ulclass="cd-slider-wrapper"><liclass="selected"><imgsrc="img/thumb-1.jpg"alt="Preview image"></li><li><imgsrc="img/thumb-2.jpg"alt="Preview image"></li><li><imgsrc="img/thumb-3.jpg"alt="Preview image"></li></ul></a><divclass="cd-customization"><divclass="color"data-type="select"><ul><liclass="color-1 active">color-1</li><liclass="color-2">color-2</li><liclass="color-3">color-3</li></ul></div><divclass="size"data-type="select"><ul><liclass="small active">Small</li><liclass="medium">Medium</li><liclass="large">Large</li></ul></div><buttonclass="add-to-cart"><em>Add to Cart</em><svgx="0px"y="0px"width="32px"height="32px"viewBox="0 0 32 32"><pathstroke-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><buttonclass="cd-customization-trigger">Customize</button></div><divclass="cd-item-info"><b><ahref="#0">Product Name</a></b><em>$9.99</em></div></li><li><divclass="cd-single-item"><ahref="#0"><ulclass="cd-slider-wrapper"><li><imgsrc="img/thumb-1.jpg"alt="Preview image"></li><li><imgsrc="img/thumb-2.jpg"alt="Preview image"></li><liclass="selected"><imgsrc="img/thumb-3.jpg"alt="Preview image"></li></ul></a><divclass="cd-customization"><divclass="color selected-3"data-type="select"><ul><liclass="color-1">color-1</li><liclass="color-2">color-2</li><liclass="color-3 active">color-3</li></ul></div><divclass="size"data-type="select"><ul><liclass="small active">Small</li><liclass="medium">Medium</li><liclass="large">Large</li></ul></div><buttonclass="add-to-cart"><em>Add to Cart</em><svgx="0px"y="0px"width="32px"height="32px"viewBox="0 0 32 32"><pathstroke-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><buttonclass="cd-customization-trigger">Customize</button></div><divclass="cd-item-info"><b><ahref="#0">Product Name</a></b><em>$9.99</em></div></li><li><divclass="cd-single-item"><ahref="#0"><ulclass="cd-slider-wrapper"><liclass="selected"><imgsrc="img/thumb-1.jpg"alt="Preview image"></li><li><imgsrc="img/thumb-2.jpg"alt="Preview image"></li><li><imgsrc="img/thumb-3.jpg"alt="Preview image"></li></ul></a><divclass="cd-customization"><divclass="color"data-type="select"><ul><liclass="color-1 active">color-1</li><liclass="color-2">color-2</li><liclass="color-3">color-3</li></ul></div><divclass="size"data-type="select"><ul><liclass="small active">Small</li><liclass="medium">Medium</li><liclass="large">Large</li></ul></div><buttonclass="add-to-cart"><em>Add to Cart</em><svgx="0px"y="0px"width="32px"height="32px"viewBox="0 0 32 32"><pathstroke-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><buttonclass="cd-customization-trigger">Customize</button></div><divclass="cd-item-info"><b><ahref="#0">Product Name</a></b><em>$9.99</em></div></li><li><divclass="cd-single-item"><ahref="#0"><ulclass="cd-slider-wrapper"><li><imgsrc="img/thumb-1.jpg"alt="Preview image"></li><liclass="selected"><imgsrc="img/thumb-2.jpg"alt="Preview image"></li><li><imgsrc="img/thumb-3.jpg"alt="Preview image"></li></ul></a><divclass="cd-customization"><divclass="color selected-2"data-type="select"><ul><liclass="color-1">color-1</li><liclass="color-2 active">color-2</li><liclass="color-3">color-3</li></ul></div><divclass="size"data-type="select"><ul><liclass="small active">Small</li><liclass="medium">Medium</li><liclass="large">Large</li></ul></div><buttonclass="add-to-cart"><em>Add to Cart</em><svgx="0px"y="0px"width="32px"height="32px"viewBox="0 0 32 32"><pathstroke-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><buttonclass="cd-customization-trigger">Customize</button></div><divclass="cd-item-info"><b><ahref="#0">Product Name</a></b><em>$9.99</em></div></li><li><divclass="cd-single-item"><ahref="#0"><ulclass="cd-slider-wrapper"><liclass="selected"><imgsrc="img/thumb-1.jpg"alt="Preview image"></li><li><imgsrc="img/thumb-2.jpg"alt="Preview image"></li><li><imgsrc="img/thumb-3.jpg"alt="Preview image"></li></ul></a><divclass="cd-customization"><divclass="color"data-type="select"><ul><liclass="color-1 active">color-1</li><liclass="color-2">color-2</li><liclass="color-3">color-3</li></ul></div><divclass="size"data-type="select"><ul><liclass="small active">Small</li><liclass="medium">Medium</li><liclass="large">Large</li></ul></div><buttonclass="add-to-cart"><em>Add to Cart</em><svgx="0px"y="0px"width="32px"height="32px"viewBox="0 0 32 32"><pathstroke-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><buttonclass="cd-customization-trigger">Customize</button></div><divclass="cd-item-info"><b><ahref="#0">Product Name</a></b><em>$9.99</em></div></li></ul><scriptsrc="js/jquery-2.1.4.js"></script><scriptsrc="js/main.js"></script>

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