简要教程
这是一款使用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) { //... } });
以上就是HTML5响应式分步定制商品模板的内容,更多相关内容请关注PHP中文网(www.php.cn)!