Allgemeine Hinweise zur Erstellung dieses Assistentenformulars

Question

Ich mache ein Assistentenformular mit ungefähr 5 Schritten, in dem Sie ein Produkt erstellen, indem Sie bei jedem Schritt Elemente aus verschiedenen Kategorien auswählen. In jedem Schritt wird dem Benutzer eine Liste mit mehreren Elementen angezeigt, die jeweils einen Objektnamen, ein kleines Vorschaubild und ein Kontrollkästchen zur Auswahl haben. Beim Mouseover eines einzelnen Artikels möchte ich ein größeres Bild und Produktdetails in einem Bereich "Weitere Informationen" anzeigen, der in jedem Schritt des Assistenten vorhanden ist.

Also meine erste Vermutung ist, alle Elemente in eine Sammlung von irgendeiner Art zu laden, und dann zur Laufzeit, je nach dem aktuellen Schritt, würde ich irgendwie den entsprechenden HTML in die Artikelliste DIV injizieren (ich würde habe die Item-ID, den Namen, die Beschreibung, smallimageurl, largeimageurl auf meiner Item JavaScript-Klasse) und verknüpfe dann eine mouseover-Funktion mit all diesen Elementen, die das größere Bild und die zugehörigen Informationen im Div. More Info erscheinen lassen.

Scheint dies ein vernünftiger Ansatz oder bin ich weg von der Basis? Ich kann sehen, wie ich in bestimmten Schritten eine andere UI haben möchte ... sollte also eine Person diese verschiedenen UI-Elemente zur Entwurfszeit in separaten Divs erstellen und sie dann entsprechend anzeigen?

Alle Hinweise oder Links zu guten Artikel, die Sie wäre genial erlebt habe ....

Answer 1

Warum das Rad neu erfinden, wenn Sie wizard plugin verwenden können.

Answer 2

Ich landete mit einfachen Schiebern gehen, ohne besonders guten Grund: http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding

Es ist ganz nett, aber ich bin nicht sicher, ob es aktuellen Schritt als Anzeige nächste/vorherige Tasten zur gleichen Zeit unterstützt (scheint der eine oder andere zu sein).

Also werde ich meinen Code hier posten, falls es jemandem hilft.
Grundsätzlich, über den Mauszeiger über einen Radio-Button oder ein Kontrollkästchen, lade ich die "Zusätzliche Informationen" für dieses Element in eine Informations Div. Zu Demonstrationszwecken lade ich nur ein zufälliges Bild, aber das Laden eines kontextabhängigen Bildes wäre wahrscheinlich eine geringfügige Änderung. (Ich muss herausfinden, wie alle meine Radio- und Checkbox-Elemente in Objekt-Arrays mit den Eigenschaften .label, .additionalInfo und .imageURL definiert sind und sie zur Laufzeit passend laden, aber das ist eine Übung für einen anderen Tag).

<link href="Scripts/easyslider1.7/css/screen.css" rel="stylesheet" type="text/css" /> 
<script src="Scripts/easyslider1.7/js/jquery.js" type="text/javascript"></script> 
<script src="Scripts/easyslider1.7/js/easySlider1.7.js" type="text/javascript"></script> 
<script src="Scripts/jquery.lorem.js" type="text/javascript"></script> 

<script type="text/javascript"> 
     $(document).ready(function() { 
      $("#slider").easySlider({ 
       prevId: 'prevBtn', 
       prevText: 'Previous', 
       nextId: 'nextBtn', 
       nextText: 'Next', 
       controlsShow: true, 
       controlsBefore: '', 
       controlsAfter: '', 
       controlsFade: true, 
       firstId: 'firstBtn', 
       firstText: 'First', 
       firstShow: false, 
       lastId: 'lastBtn', 
       lastText: 'Last', 
       lastShow: false, 
       vertical: false, 
       speed: 200, 
       auto: false, 
       pause: 2000, 
       continuous: false, 
       numeric: true, 
       numericId: 'controls' 
      }); 

      // set hover event on the **label** accompanying any radiobutton or checkbox: 
      // todo: is it possible to attach this to the actual radiobutton at the same time? How??? 
      $(":radio, :checkbox").next().hover(function() { 
       // SET THE EXTRA INFO TITLE TO THE TEXT OF THE RADIO/CHECKBOX LABEL: 
       $('#extraInfoDetail').html(this.innerHTML);   //innerHTML or innerText would work (i think) 

       // SET THE DETAIL ITEM INFO, JUST USING LORUM IPSUM (for demo purposes): 
       $('#extraInfoLongText').lorem({ type: 'paragraphs', amount: '2', ptags: true }); 

       // JUST SOME RANDOM NUMBER TO DISPLAY AN ARBITRARY IMAGE: 
       var randomNum = Math.floor(Math.random() * 3) + 1; 
       var imagesrc 
       imagesrc = "~/../Images/" + randomNum + ".jpg"; //todo: wtf is up wit this weird notation?? 
       $('#extraInfoImage').attr({ 'src': imagesrc }); 
      }, 
       // CLEAR EVERYTHING OUT AFTER HOVER OFF: 
      function() { 
       $('#extraInfoDetail').html(''); 
      } 
     ); 
     }); 
    </script> 

... die relevanten HTML:

 <div id="extraInfo" style="width:400px; float: left;"> 
      <div id="extraInfoTitle" style="background-color:Yellow; font-size:20px">ITEM DETAILS</div> 
      <div id="extraInfoDetail" style="background-color:Fuchsia; font-size:20px"></div> 
      <img id="extraInfoImage" src="Images/marc-faber.jpg" alt="" /><br /> 
      <div id="extraInfoLongText"></div> 
     </div>