Batch Index du Forum
S’enregistrerRechercherFAQMembresGroupesConnexion
Répondre au sujet Page 1 sur 1
[PLUGIN JQUERY] MAP
Auteur Message
Répondre en citant
Message [PLUGIN JQUERY] MAP 
Salut à tous Mr. Green

J'ai créé un plugin jquery pour un projet personnel et j'ai décidé de vous le partager ici Mr. Green
C'est un plugin qui permet d'ajouter un système de map à la mode call of duty Very Happy

Avant de vous donner le code source et de vous expliquez comment on l'intègre et comment on l'utilise,
veuillez s'il vous plaît aller voir ces petites démonstrations simples :

Démo 1 : http://flammrock.tk/plugin/map/exemples/exemple_1 (Les images ont été choisis par Fluorinx sauf la première qui a été choisi par moi Okay )
Démo 2 : http://flammrock.tk/plugin/map/exemples/exemple_2

____________________________________________________________________

I) Comment l'intégrer sur mon site ?


map.min.js : http://flammrock.tk/plugin/map/js/map.min.js
map.min.css : http://flammrock.tk/plugin/map/css/map.min.css
map.js : http://flammrock.tk/plugin/map/js/map.js
map.css : http://flammrock.tk/plugin/map/css/map.css


Pour intégrer le plugin map, mettez ce petit bout de code entre les balises <head> et </head> :
Code:
[lang=html5]<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/map.min.css">


Puis rajoutez ceci avant la balise </body> :
Code:
[lang=html5]<script type="text/javascript" src="js/map.min.js"></script>

____________________________________________________________________




____________________________________________________________________

II) Comment utiliser ce plugin ?


Pour utiliser ce plugin, il faut déjà savoir à quoi il sert Mr. Green
Il sert tout simplement à intégrer plusieurs pages dans une seule et unique page Cool

Puis comme ce plugin permet de faire un système de map, il faut en quelques sortes positionner les pages sur un plan orthonormé avec data-pos-x pour les abscisses et data-pos-y pour les ordonnées Mr. Green
Donc si je veux par exemple mettre 2 pages à la suite je fais ceci :

Code:
[lang=html5]<section id="page-1" class="MAP_page MAP_no-scroll" data-name="Page 1" data-pos-x="0" data-pos-y="0">
      Ceci est la page 1 !!
</section>
<section id="page-2" class="MAP_page MAP_no-scroll" data-name="Page 2" data-pos-x="1" data-pos-y="0">
      Ceci est la page 2 !!
</section>


Mais attention !!
Ce n'est pas comme en math Mr. Green
L'axe des y est inversé Laughing


Voici le repère :

Professeur de matematik a écrit:
                    -5
                    -4
                    -3
                    -2
                    -1
-5 -4 -3 -2 -1 0 1 2 3 4 5
                     1
                     2
                     3
                     4
                     5

(p.s: [troll]matematik!=mathematiques[/troll])


Et ensuite il faut bien sûr généré la mini-map Mr. Green
Imaginons que l'id de notre div où nous voulons la générer soit : MINI_MAP
Donc pour la générer il faut mettre ceci juste après <script type="text/javascript" src="js/map.min.js"></script> :

Code:
[lang=html5]<script type="text/javascript">
     $("#MINI_MAP").map();
</script>

____________________________________________________________________



____________________________________________________________________

III) Les paramètres et le design

Alors on va d'abord s'intéresser au paramètre du plugin Okay
Donc pour faire court voici ses paramètres :

Code:
[lang=javascript]$("#MINI_MAP").map({
     deplacement_mode: MAP_OPTION.deplacement_mode, //Défaut: 1
     speed: MAP_OPTION.speed, //Défaut: 500
     onclick: MAP_Click_Item_var, //Défaut: "MAP_Click_Item"
     speed_mode: MAP_OPTION.speed_mode, //Défaut: "ease-in-out"
     size: MAP_OPTION.size //Défaut: 1
});


deplacement_mode : Ce paramètre accepte seulement 2 valeurs [0 ou 1]
1 : La view-box se déplace sur la grille pour aller à l'élément cible (Voir démo 1)
0 : La view-box se déplace directement à l'élément cible (Voir démo 2)

speed : Ce paramètre accepte uniquement des nombres positifs (Les nombres négatifs sont équivalents à 0, 0 étant la vitesse absolue)

speed_mode : Ce paramètre accepte uniquement la propriété css transition-timing-function sous forme de chaîne de caractères (Ex: "ease")

onclick : Ce paramètre accepte uniquement un nom de fonction en chaîne de caractères (Ex: "ma_fonction_onclick")
Celle-ci ce déclenche lorsque vous cliquez sur les items de la map Mr. Green

size : Ce paramètre accepte uniquement la propriété css zoom
Remarque : Si vous voulez mettre une valeur en %, veuillez la mettre sous la forme de chaîne de caractères (ex: "200%")



Ensuite pour modifier le design voici les différentes classes et id :

#MAP_map : La mini-map
#MAP_current-view : La view-box représentant le body, type=item
.MAP_btn-map : Ce sont des repésentants des pages, type=item
.MAP_btn-map-here : Le repésentant de la page sélectionnée, type=item
.MAP_btnmap : Cette classe permet de modifier tous les items
____________________________________________________________________




Si vous n'avez pas comprises certaines choses : faîtes en part ici, je pourrai certainement vous éclairez (Il me reste quelques allumettes, ça devrait suffire ne vous inquiétez pas Laughing )
Si vous avez des bugs de votre côté merci de préciser votre système d'exploitation, le nom de votre navigateur ainsi que ça version Okay



Dernière édition par Flammrock le Mar 27 Déc 2016 - 02:36; édité 1 fois

______________________________________________________
la vie est trop courte pour retirer le périphérique USB en toute sécurité...
Si la statue de la liberté lève le bras depuis 125 ans, c'est parce qu'elle cherche du réseau sur son Blackberry Torches...
Grâce à mon nouveau correcteur automatiste sur mon téléphage, je ne fais plus aucune faute d'orthodontie.
Quelqu'un a t il déjà demandé au drapeau japonais ce qu'il enregistre depuis tout ce temps ?
Visiter le site web du posteur
Message Publicité 
PublicitéSupprimer les publicités ?


Répondre en citant
Message [PLUGIN JQUERY] MAP 
Nice work ! Okay

Ça ne me servira probablement pas, mais ça servira surement à d'autres.




______________________________________________________
Partager permet le savoir. Le savoir permet de partager de nouveau savoirs.
Répondre en citant
Message [PLUGIN JQUERY] MAP 
TSnake41 a écrit:
Nice work ! Okay

Ça ne me servira probablement pas, mais ça servira surement à d'autres.


Merci Mr. Green
Là je travaille sur un plugin permettant de générer des livres 3D Cool Mr. Green
J'ai pratiquement finit, ce sera disponible après demain je pense Okay


Je suis à fond sur le développement web en ce moment et je progresse assez vite je trouve Very Happy
D'ici quelques jours, je mettrai à disposition un tutoriel complet sur l'upload d'un fichier (html/css/js/php)



Et j'ai encore plein de truc à montrer, expliquer seulement..il faut du temps Mr. Green




p.s: je bosse sur les matrices en css, du coup y'aura un peu de 3D, et de 2.5D à venir sur ce forum Okay




______________________________________________________
la vie est trop courte pour retirer le périphérique USB en toute sécurité...
Si la statue de la liberté lève le bras depuis 125 ans, c'est parce qu'elle cherche du réseau sur son Blackberry Torches...
Grâce à mon nouveau correcteur automatiste sur mon téléphage, je ne fais plus aucune faute d'orthodontie.
Quelqu'un a t il déjà demandé au drapeau japonais ce qu'il enregistre depuis tout ce temps ?
Visiter le site web du posteur
Répondre en citant
Message [PLUGIN JQUERY] MAP 
Yop,

Whaou, super xD Comme tsnake la dit, moi aussi ça me servira pas mais ça pourrais etre très intéressant pour des jeux Wink

Super tuto aussi Smile

Cordialement, AntoZzz




______________________________________________________
Visiter le site web du posteur Skype
Répondre en citant
Message [PLUGIN JQUERY] MAP 
Vraiment excellent !

Bravo !!!!

Okay




______________________________________________________
AffPng.exe , StringBetween.exe , Hex2Png.exe
Message [PLUGIN JQUERY] MAP 


Montrer les messages depuis:
Répondre au sujet Page 1 sur 1
  



Index | créer un forum | Forum gratuit d’entraide | Annuaire des forums gratuits | Signaler une violation | Conditions générales d'utilisation
Copyright 2008 - 2016 // Batch