Conseils sur la manière générale d'utiliser ce formulaire de l'assistant

Question

Je crée un formulaire d'assistant avec environ 5 étapes où vous construisez un produit en choisissant des éléments de différentes catégories à chaque étape. À chaque étape, l'utilisateur recevra une liste de plusieurs éléments, chacun avec un nom d'élément, une petite image d'aperçu et une case à cocher à sélectionner. Au passage de la souris sur un élément individuel, je souhaite afficher une image plus grande et des détails sur le produit dans une zone "Plus d'infos" qui existe à chaque étape de l'assistant. Donc, ma première conjecture est de charger tous les éléments dans une collection de quelque sorte, et puis au moment de l'exécution, en fonction de l'étape actuelle, je voudrais injecter le html approprié dans la liste des éléments DIV (je voudrais avoir l'identifiant de l'élément, le nom, la description, smallimageurl, largeimageurl sur ma classe javascript), puis attacher une fonction mouseover à tous les éléments qui feraient apparaître l'image plus grande et les informations d'accompagnement dans la div More Info.

Est-ce que cela ressemble à une approche raisonnable ou suis-je loin de la base? Je peux voir comment dans certaines étapes je peux vouloir une interface utilisateur différente ... ainsi une personne devrait-elle construire ces différents éléments de l'interface utilisateur au moment du design en div séparés et les afficher en conséquence?

Les pointeurs ou des liens vers de bons articles que vous avez rencontrés serait génial ....

Answer 1

Pourquoi réinventer la roue si vous pouvez utiliser wizard plugin.

Answer 2

Je fini par aller avec curseur facile, car sans raison valable: http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding

Il est très agréable, mais je ne suis pas sûr si elle prend en charge les boutons suivant/précédent en même temps que l'affichage étape en cours (semble être l'un ou l'autre).

Donc, je posterai mon code ici au cas où cela aiderait quelqu'un.
Fondamentalement, en survolant un bouton radio ou une case à cocher, je charge les "Infos supplémentaires" pour cet élément dans un div informationnel. À des fins de démonstration, je charge simplement une image aléatoire, mais charger une image contextuelle appropriée serait probablement un changement mineur. (J'ai besoin de comprendre comment définir tous mes éléments de radio et de case à cocher dans les tableaux d'objets avec les propriétés .label, .additionalInfo et .imageURL et les charger de manière appropriée à l'exécution, mais c'est un exercice pour un autre jour).

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

... le code html correspondant:

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