简要教程
这是一款使用jQuery和CSS3制作的HTML5响应式分步定制商品模板。通过这个模板，用户可以一步一步的定制自己所需要的商品。最后的步骤会给出商品的价格和描述信息。
使用方法
HTML结构
该模板的HTML结构分为3个部分：header.main-header用于作为顶部导航，div.cd-builder-steps用于商品定制步骤，footer.cd-builder-footer用于底部导航和一些描述信息。
Product Builder
Article & Downaload Select Model
Step 1 of 4
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方法来处理各种事件。
发卡宝是一个专业的软件卡密等虚拟商品在线交易平台,拥有多种兑换方式,费率低,结算快,正规企业平台一直稳定运营,24小时不间断提供自动发卡服务。【模板说明】试用版自带一套模板（响应式）【环境支持】PHP环境 / 200M或以上空间大小 / 开启父路径 / 设置index.php为默认首页 / 目录写入权限需要开启【数据库】MySQL【安装步骤】将文件上传至空间目录，运行“http://域名/inst
立即学习“前端免费学习笔记（深入）”；
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）！
