当前位置：首页 > 网站模板 > 后台模板

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

分类：后台模板日期：2024-05-14 点击(1) 评论(0)

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

简介

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

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

```html
<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">
            
          </ul>
        </section>
      </li>
      
    </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时才会被显示出来。

```html
.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方法来处理各种事件。

```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) {
       //...
    }
});  
```

web299.com

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

简介

设计团队博客css网站模板

无人机数码商店网站模板

移动版猎豹安全浏览器官网html5动画引导页

微信小程序的手势密码

白色简约布局html5模板

响应式商品展示和商品信息比较网格布局界面