HTML5-responsive, Schritt-für-Schritt-angepasste Produktvorlage

Kurzes Tutorial

Dies ist eine HTML5-responsive Schritt-für-Schritt-maßgeschneiderte Produktvorlage, die mit jQuery und CSS3 erstellt wurde. Mithilfe dieser Vorlage können Benutzer die von ihnen benötigten Produkte Schritt für Schritt anpassen. Im letzten Schritt erhalten Sie den Preis und die Beschreibung des Artikels.

Verwendung

HTML-Struktur

Die HTML-Struktur dieser Vorlage ist in drei Teile unterteilt: header.main-header wird als obere Navigation verwendet, div.cd-builder -steps wird für Produktanpassungsschritte verwendet und footer.cd-builder-footer wird für die untere Navigation und einige Beschreibungsinformationen verwendet.

<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-Stil

Der CSS-Stil der Schnittstelle ist sehr einfach. Beachten Sie, dass div.cd-builder-steps verwendet wird, um verschiedene Anpassungsschritte darin einzuschließen sind absolut positioniert, sie überlappen sich, die Höhe und Breite betragen 100 %, sie sind standardmäßig ausgeblendet und werden nur angezeigt, wenn .activeclass angehängt ist.

.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

Erstellt ein ProductBuilder-Objekt im JS-Code und verwendet die bindEvents-Methode, um verschiedene Ereignisse zu verarbeiten.

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));
  });
}

Nachdem der Benutzer ein Modell ausgewählt hat, erhalten Sie neue Inhalte über einen Ajax-Aufruf. Jedes Listenelement in ul.models-list verfügt über ein Datenmodellattribut, das genau dem Namen dieser neuen HTML-Seite entspricht.

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

Das Obige ist der Inhalt der responsiven, Schritt-für-Schritt-angepassten Produktvorlage. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).