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 개체를 생성하고 바인딩이벤트 메서드를 사용하여 다양한 이벤트를 처리합니다.

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의 각 목록 항목에는 이 새 HTML 페이지의 이름과 정확히 동일한 data-model 속성이 있습니다.

$.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)를 참고해주세요!