[Tutorial JS]Foloseste un meniu ca sa generezi un altul

#1 de Maffw
Nume Tutorial:Foloseste un meniu ca sa generezi un altul
Descriere:Foloseste un meniu ca sa generezi un altul
Download:Nu necesita
Autor:Anonim
Sursa (Link-ul oficial):
tutorialeonline
Propria parere:Util.
Tutorialul:
Scopul acestui tutorial este acela de a înţelege principiul de funcţionare al meniurilor. Înţelegându-l veţi putea crea apoi meniuri duble, triple etc.
Primul meniu, cel cu subiecte este un meniu regular prescris în pagină. Cel de-al doilea meniu este un meniu regular care, iniţial afişează ce anume trebue să faci pentru ca el să fie populat: "Poţi selecta o pagină numai după ce ai selectat subiectul". Utilizatorul selectează un subiect în primul meniu iar cel de-al doilea meniu este populat automat (fără refresh) cu numele paginilor ( în cazul nostru 4, pentru lizibilitatea şi înţelegerea codului ).
Când utilizatorul selectează o opţiune în primul meniu, acesta apelează o funcţie numită "IdMenu(this.selectedIndex)":

Cod: Selectaţi tot

<select name="select1" onChange="ldMeniu(this.selectedIndex);">
Acest select apelează funcţia atunci când valoarea iniţială a fost schimbată şi îi spune care opţiune a fost selectată. Pentru aceasta foloseşte "selectedIndex" care, după cum sugerează şi numele returnează un număr unic pentru un select în baza 0.
Funcţia apelată este următoarea:
Cod:

Cod: Selectaţi tot

 function ldMeniu(Subiect) {
    Indx=Subiect;
    with (document.form2.select2) {
Secvenţa de mai sus pur şi simplu introduce o variabilă numită "Indx". De asemenea stabileşte ce opţiune a fost selectată. Funcţia foloseşte o structură "with" pentru a-i spune JavaScript- ului la ce ne referim "document.form2.select2".
Următoarea secvenţă de cod este folosită pentru a înlătura toate opţiunile, astfel încât nici o opţiune rămasă de la selectarea anterioară să nu mai fie în listă. Pentru asta stabilim lungimea maximă a opţiunilor ca fiind 0.
Cod:

Cod: Selectaţi tot

       document.form2.select2.options.length=0;
În continuare vom afla valoarea transmisă variabilei "Indx", verificând posibilităţile. De aceea: dacă Indx este egal cu 0 (utilizatorul a selectat primul câmp, cel în care i se cere să selecteze altceva), meniul 2 va fi populat numai cu o opţiune care îi spune să aleagă o opţiune în meniul 1.
Cod:

Cod: Selectaţi tot

 if (Indx==0){
    options[0]=new Option("Selecteaza o pagina din meniul 1","");
 }
Pentru a adăuga noi opţiuni , vom folosi " new Option("ceva","altceva") ". În spaţiul "ceva" se va pune textul pe care dorim să îl afişăm în meniu, iar în spaţiul "altceva" vom pune valoarea acestuia (care poate să şi lipsească). În cazul nostru valoarea este "" sau nimic. Altfel spus, când utilizatorul apasă aici nu se întampla nimic, ceea ce, de fapt vrem noi.
Următoarea bucată de cod se ocupă de cazul în care "Indx" este egal cu 1 (utilizatorul a selectat din primul meniu câmpul "JavaScript").
Cod:

Cod: Selectaţi tot

 if (Indx==1){
    options[0]=new Option("Alege o pagina", "");
    options[1]=new Option("Introducere JavaScript","legatura");
    options[2]=new Option("Utilizarea instructiunilor switch-case", "legatura");
    options[3]=new Option("Evenimente JavaScript", "legatura");
 }
În acest cod noile opţiuni (exceptând-o pe prima) conţin numele (ce este afişat de site), precum şi valoarea acestora, în acest caz, trimiterea către o altă pagină.
(Funcţia ce urmează este opţională.)
Când utilizatorul selectează una dintre acestea, cel de-al doilea meniu apelează funcţia goToPage() care îl redirecţionează către pagina pe care a vrut să o viziteze. Apelarea acestei funcţii onChange="Redirectionare()" se face în interiorul celui de-al doilea meniu.
Apelarea funcţiei:

Cod: Selectaţi tot

<select name="select2" onChange="Redirectionare();">
Funcţia apelată este următoarea:
Cod:

Cod: Selectaţi tot

 function Redirectionare() {
    var PageIndex2=document.form2.select2.selectedIndex
    if (document.form2.select2.options[PageIndex2].value != ""){
       location.href = document.form2.select2.options[PageIndex2].value;
    }
 }
Probabil aţi observat că această funcţie funcţionează (ne redirecţionează la pagina pe care o vrem) doar dacă opţiunea selectată are definită şi o valoare. Aşadar, dacă este selectată prima opţiune , nu se întâmplă nimic, deoarece valoarea acesteia este "" nulă.

Concluzii:

Pentru a scrie un meniu folosind altul, trebuie să foloseşti doar " new Option( " pentru a crea opţiunile meniului respectiv.
Cât despre structura "if" (pe care am folosit-o ca să aflăm ce meniu a fost selectat) , aceasta poate fi înlocuită cu uşurinţă de structura "switch" preferabilă în cazul în care avem mai multe opţiuni.
În codul ce urmează veţi găsi întreg scriptul care generează cele două meniuri. Cele două funcţii pe care le vom folosi: IdMeniu() şi Redirectionare() se găsesc în secţiunea head pentru a fi încărcate odată cu pagina. Făcând aşa, execuţia scriptului este mai rapidă.
Cod:

Cod: Selectaţi tot

 <html>
 <head>
 
 <script language="javascript" type="text/javascript">
 
    function IdMeniu(Subiect){
       var Indx= Subiect;
 
       document.form2.select2.options.length=0;
       with (document.form2.select2) {
 
          if (Indx==0){
             options[0]=new Option("selecta o pagina numai dupa ce ai selectat subiectul ","");
          }
 
          if (Indx==1){
             options[0]=new Option("Alege o pagina","");
             options[1]=new Option("Introducere JavaScript","ro/article/introducere-in-limbajul-javascript");
             options[2]=new Option("Utilizarea instructiunilor switch-case","ro/article/utilizarea-instructiunilor-switch-case");
             options[3]=new Option("Evenimente JavaScript","ro/article/evenimente-javascript");
          }
 
 
          if (Indx==2){
             options[0]=new Option("Alege o pagina","");
             options[1]=new Option("Introducere în HTML","ro/article/introducere-in-html");
             options[2]=new Option("Crearea formularelor","ro/article/crearea-formularelor");
             options[3]=new Option("De la HTML la XHTML","ro/article/de-la-html-la-xhtml");
          }  
 
          if (Indx==3){
             options[0]=new Option("Alege o pagina","");
             options[1]=new Option("Unelte de baza","ro/article/unelte-de-baza-ce-aveti-nevoie-pentru-un-site-profesionist");
             options[2]=new Option("Construieste un site cu php","ro/article/construieste-un-site-cu-php");
             options[3]=new Option("Clase si obiecte în PHP","ro/article/clase-si-obiecte-in-php");
          }
 
       }
    }
    function Redirectionare(){
       var PageIndx2=document.form2.select2.selectedIndex
       if (document.form2.select2.options[PageIndx2].value != "") {
          location.href = document.form2.select2.options[PageIndx2].value;
       }
    }

 </script>
</head>
 <body>
    <form name="form1">      
       <select name="select1" onChange="IdMeniu(this.selectedIndex);">
          <option value="0">Selecteaza</option>
          <option value="1">JavaScript</option>
          <option value="2">HTML</option>
          <option value="3">PHP</option>
       </select>
    </form>
 
    <form name="form2">
       <select name="select2"onChange="Redirectionare();"    >
          <option value="0"> Poti selecta o pagina numai dupa ce ai selectat subiectul </option>
       </select>
    </form>
</body>
 </html>
N-am cerut la nimeni niciodata,
Chiar de-a fost sa rabd, in viata mea.
Am dat totul fara nici o plata,
Nevoind nimic sa mi se dea.
@Virgil Carianopol		Vezi-ti de treaba si retine:
"E treaba ta sa spui ce vrei si sa nu conteze pentru nimeni".
@Kazi Ploae
Scrie răspuns

Înapoi la “Tutoriale JS”

Cine este conectat

Utilizatori răsfoind acest forum: Niciun utilizator înregistrat și 2 vizitatori