Header

Partagez | 

[Codage]Menu déroulant en JS

Aller à la page : Précédent  1, 2

Message Sujet: Re: [Codage]Menu déroulant en JS   Mar 20 Juin - 14:20

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Intervenante
Bons Points (BP) : 213
Voir le profil de l'utilisateur
Alors alors Smile

Il y a des choses qui seront plus clair quand on regardera le html. Voilà où on se sert de "lastQuete" dans le html :

Code:
<div class="bloc_texte" data-ng-show="i == lastQuete">
On le verra mieux ensuite mais, pour faire simple : cet div contient les liens dans le menu. Chaque quête a un id représenté ici par le "i". Si jamais le "i" correspond à lastQuete (donc à la queête affichée), dans ce cas, on affiche pas la div Smile (elle est en display none). Ici, tu vois bien qu'on ne peut pas utiliser "item" Smile et, si on ne fait pas de "return", dans le html, lastQuete sera toujours égale à 0. En fait, on appelle cette fonction dès qu'on clique sur
-> quete suivante
-> quete précédente
-> sur le lien "menu" d'une quete

En angular, pour mettre à jour une variable du js dans le html (et donc refaire comme il faut les tests d'affichage), il faut faire un return Smile

c'est un peu plus clair ?
Revenir en haut Aller en bas


Message Sujet: Re: [Codage]Menu déroulant en JS   Mar 20 Juin - 14:21

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Elilith

Inspectrice
Bons Points (BP) : 2813
Voir le profil de l'utilisateur
Beaucoup plus ! Tout est compris pour moi du coup !
Revenir en haut Aller en bas


Message Sujet: Re: [Codage]Menu déroulant en JS   Mar 27 Juin - 10:18

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Intervenante
Bons Points (BP) : 213
Voir le profil de l'utilisateur
Hello hello Smile

Super ! Du coup, on poursuite avec cette dernière partie du js :
Code:

      // Gestion menu à afficher
      $scope.listeMenu = 0;
      $scope.nbMenu = 14;
      $scope.listeMenuMax = 14;
      $scope.quetes.afficherListe = function( item, operation ){
        if(operation == "minus"){
          $scope.listeMenu -= $scope.nbMenu;
          $scope.listeMenuMax = $scope.listeMenuMax - $scope.nbMenu;
        }else if(operation == "plus"){
          $scope.listeMenu += $scope.nbMenu;
          $scope.listeMenuMax = $scope.listeMenu + $scope.nbMenu;
        }

        $scope.quetes.AfficherMasquerQuete($scope.listeMenu);

        return $scope.listeMenu;
         
      };

Ici, ça va nous permettre d'afficher automatiquement le menu, rien qu'en utilisant la liste des quetes qu'il y a dans le js.
On commence donc par afficher les 14 premiers items. Pour cela, on définit le début de la liste :
Code:
$scope.listeMenu = 0;
et le max :
Code:
$scope.listeMenuMax = 14;
et on crée une variable qui va retenir le nombre d'item du menu qu'on veut afficher à chaque fois :
Code:
 $scope.nbMenu = 14;

Ensuite, on crée une function qui va gérer le changement de menu quand on cliquera sur les fleches "droite" ou "gauche" (tu sais pour le défilement du menu) :
Code:
$scope.quetes.afficherListe = function( item, operation ){

Ensuite, il y a 2 tests ^^

1) Si tu cliques sur "moins" (= la fleche à gauche) :
Code:
if(operation == "minus"){
          $scope.listeMenu -= $scope.nbMenu;
          $scope.listeMenuMax = $scope.listeMenuMax - $scope.nbMenu;
        }

On soustrait le nombre d'item à afficher à notre premier item affiché :
Code:
$scope.listeMenu -= $scope.nbMenu;
Idea -= signifie : je soustraits et j'affecte. Donc ici, ça signifie : la valeur de $scope.listeMenu correspond à $scope.listeMenu - $scope.nbMenu. En fait, c'est comme si on l'écrivait comme ça :
Code:
$scope.listeMenu -= $scope.nbMenu;

Et ensuite,on retire aussi le nombre d'item à afficher à l'id du dernier lien afficher :
Code:
$scope.listeMenuMax = $scope.listeMenuMax - $scope.nbMenu;

Et si jamais on clique sur plus (donc la fleche à droite), eh bien, on fait l'inverse Smile
Code:
}else if(operation == "plus"){
          $scope.listeMenu += $scope.nbMenu;
          $scope.listeMenuMax = $scope.listeMenu + $scope.nbMenu;
        }

Au lieu de retirer, on ajoute Smile

Puis,on va refaire la fonction "AfficherMasquerQuete" pour afficher une quete par défaut (qui correspond à celle du premier lien du menu) :
Code:
$scope.quetes.AfficherMasquerQuete($scope.listeMenu);

Et enfin, on retourne l'id du premier item du menu :
Code:
 return $scope.listeMenu;

pour pouvoir utiliser cette valeur dans le html (quon va voir ensuite)

----

Ok ou pas ok pour ça ? Smile (j'ai l'impression que c'est un peu compliqué :/ )
Revenir en haut Aller en bas


Message Sujet: Re: [Codage]Menu déroulant en JS   Jeu 6 Juil - 15:05

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Bunny Lune

Directrice en stage
Bons Points (BP) : 1793
Voir le profil de l'utilisateur http://rpg-world.forumactif.fr/
Coucou Elilith Smile

As-tu vu la réponse de Miettes ?
Revenir en haut Aller en bas




Merci pour vos cadeaux:
 
Mes Diplômes:
 

Message Sujet: Re: [Codage]Menu déroulant en JS   Jeu 6 Juil - 15:09

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Elilith

Inspectrice
Bons Points (BP) : 2813
Voir le profil de l'utilisateur
Du tout je suis carrément désolé, je ne l'ai pas vue >< !

Tout est clair du coup, et encore désolé ><
Revenir en haut Aller en bas


Message Sujet: Re: [Codage]Menu déroulant en JS   Dim 16 Juil - 13:55

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Kachoute

Déléguée
Bons Points (BP) : 251
Voir le profil de l'utilisateur
Salut salut, si tout est clair, je peux archiver? :smile:
Revenir en haut Aller en bas


Message Sujet: Re: [Codage]Menu déroulant en JS   

Mes clubs

Contenu sponsorisé

Revenir en haut Aller en bas
Aller à la page : Précédent  1, 2
[Codage]Menu déroulant en JS
Page 2 sur 2
 Sujets similaires
-
» script Menu déroulant au survol du pseudo
» Menu déroulant couleur (besoin code html)
» Menu déroulant qui se replie après avoir été ouvert
» Problème installation du menu déroulant
» Menu déroulant vers le haut et non vers le bas
Réponse rapide

School of Progress :: La bibliothèque :: Besoin d'aide ?+

Qui est en ligne ?

SoP en quelques chiffres

Nos étudiants ont posté un total de @messages@ messages.

Nous avons @membres_enregistres@ étudiants inscrits dans l’école.

Le dernier dossier validé est celui de @dernier_membre@.

@@membres_anniversaire_aujourdhui?@membres_anniversaire_aujourdhui=Il/Elle fête son anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$&@$Ils fêtent leur anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$, @@$Aucun membre ne fête son anniversaire aujourd'hui. @@

Ils étaient là hier

@derniers_membres_connectes$, @

Liste de présence

@membres_connectes$, @

La DirectionLes AssistantsLes SurveillantsLes ArtistesLes InspecteursLes PitresLes IntervenantsLes Doyens