HTML5响应式分步定制商品模板

这是一款使用jQuery和CSS3制作的HTML5响应式分步定制商品模板。通过这个模板，用户可以一步一步的定制自己所需要的商品。最后的步骤会给出商品的价格和描述信息。

使用方法

HTML结构

该模板的HTML结构分为3个部分：header.main-header用于作为顶部导航，div.cd-builder-steps用于商品定制步骤，footer.cd-builder-footer用于底部导航和一些描述信息。

<div class="cd-product-builder">
 <header class="main-header">
 <h1>Product Builder</h1>
 
 <nav class="cd-builder-main-nav disabled">
 <ul>
 <li class="active"><a href="#models">Models</a></li>
 <li><a href="#colors">Colors</a></li>
 <li><a href="#accessories">Accessories</a></li>
 <li><a href="#summary">Summary</a></li>
 </ul>
 </nav>
 </header>
 
 <div class="cd-builder-steps">
 <ul>
 <li data-selection="models" class="active builder-step">
 <section class="cd-step-content">
 <header>
 <h1>Select Model</h1>
 <span class="steps-indicator">Step <b>1</b> of 4</span>
 </header>
 
 <a href="#0" class="cd-nugget-info">Article & Downaload</a>
 
 <ul class="models-list options-list cd-col-2">
 <!-- models here -->
 </ul>
 </section>
 </li>
 <!-- additional content will be inserted using ajax -->
 </ul>
 </div>
 
 <footer class="cd-builder-footer disabled step-1">
 <div class="selected-product">
 <img src="img/product01_col01.jpg" alt="Product preview">
 
 <div class="tot-price">
 <span>Total</span>
 <span class="total">$<b>0</b></span>
 </div>
 </div>
 
 <nav class="cd-builder-secondary-nav">
 <ul>
 <li class="next nav-item">
 <ul>
 <li class="visible"><a href="#0">Colors</a></li>
 <li><a href="#0">Accessories</a></li>
 <li><a href="#0">Summary</a></li>
 <li class="buy"><a href="#0">Buy Now</a></li>
 </ul>
 </li>
 <li class="prev nav-item">
 <ul>
 <li class="visible"><a href="#0">Models</a></li>
 <li><a href="#0">Models</a></li>
 <li><a href="#0">Colors</a></li>
 <li><a href="#0">Accessories</a></li>
 </ul>
 </li>
 </ul>
 </nav>
 
 <span class="alert">Please, select a model first!</span>
 </footer>
</div>

CSS样式

界面CSS样式非常简单，只需要注意div.cd-builder-steps用于包裹不同的定制步骤，它里面的子元素是绝对定位的，它们相互重叠在一起，高度和宽度都是100%，默认它们为隐藏状态，只有附加.activeclass时才会被显示出来。

.cd-builder-steps > ul {
 height: 100%;
 overflow: hidden;
}
.cd-builder-steps .builder-step {
 position: absolute;
 z-index: 1;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 overflow: auto;
 visibility: hidden;
 transition: visibility .5s;
}
.cd-builder-steps .builder-step.active {
 position: relative;
 z-index: 2;
 visibility: visible;
}

JavaScript

在JS代码中创建了一个ProductBuilder对象，并使用bindEvents方法来处理各种事件。

function ProductBuilder( element ) {
 this.element = element;
 this.stepsWrapper = this.element.children('.cd-builder-steps');
 //...
 this.bindEvents();
}
 
 
if( $('.cd-product-builder').length > 0 ) {
 $('.cd-product-builder').each(function(){
 //create a productBuilder object for each .cd-product-builder
 new ProductBuilder($(this));
 });
}

当用户选择了一个模型之后，通过Ajax调用获取新的内容。在ul.models-list的每一个列表项中，都带有一个data-model属性，它刚好等于这个新的HTML页面的名字。

$.ajax({
 type : "GET",
 dataType : "html",
 url : modelType+".html",
 beforeSend : function(){
 self.loaded = false;
 },
 success : function(data){
 self.models.after(data);
 self.loaded = true;
 //...
 },
 error : function(jqXHR, textStatus, errorThrown) {
 //...
 }
});