Share
jQuery ajoute de nombreuses fonctionnalités intéressantes à vos sites Web. Il peut faire beaucoup de choses, de l'animation à AJAX. Il est généralement mal vu de compter énormément sur jQuery pour concevoir vos sites, mais il est amusant de se déchaîner de temps en temps. Dans ce tutoriel, je vais vous apprendre à utiliser jQuery pour créer un tableau de bord entièrement codé, à l’instar de Leopard! Cela peut être pratique pour cacher beaucoup de gadgets ou de widgets pour lesquels vous n’avez pas d’espace.!
Ce tutoriel comporte un certain nombre de composants. Une charge d'images, une 3ème
Party Dock, et le composant jQuery UI.draggable, ainsi que, bien sûr,,
le noyau jQuery (v1.2.6). Remarque: beaucoup d'images sont probablement
protégés par le droit d'auteur de leurs propriétaires. Quelques icônes de dock ont été extraites de leurs paquets
et j'ai utilisé le papier peint Leopard Default. Mais ils sont interchangeables!
Placez tous ces éléments dans un répertoire. Un dossier appelé 'images' (avec les images qu'il contient),
un dossier appelé 'js' avec le JavaScript dedans.
Le plan d’attaque pour ce tutoriel est le suivant. Sur le bureau, il y aura un
Fenêtre déplaçable et un quai. Il y a un autre div appelé #dashboardWrapper qui
se cache lorsque jQuery est utilisé. Cela se dégradera sans JS, mais pas bien. Le plan JS
d'attaque je vais expliquer quand nous y arriver.
Mis à part les icônes utilisées, je voudrais également souligner que ce n'est pas si vaste
comme pour tout faire, obtenir des widgets dynamiques, etc. Vous pouvez le faire vous-même! Ce
fournit simplement le "cadre" de base avec lequel travailler. En fait, quand j'ai commencé à écrire
ce tutoriel a commencé comme un thème WordPress, avec les widgets comme widgets
sur le tableau de bord. C'est encore possible! Je vais expliquer comment plus tard.
Créez un fichier appelé index.html. Ce sera la page qui ressemble à Léopard.
Vous devez relire tout le JavaScript et le style.css que nous créerons plus tard. Juste
Commencez par ceci:
Tableau de bord léopard
La page comporte alors 3 sections minimum. 2 divs dans le #wrapper (une fenêtre et le
tableau de bord réel) et le dock en dehors de l’emballage. Ajoutez ces sections dans:
Tableau de bord léopard
Maintenant, nous avons nos 3 divs vides de base. Nous devons les remplir avec le respect
contenu. Parce que la fenêtre déplaçable est une ancienne fenêtre, vous pouvez la remplir avec
ce que tu veux. J'ai créé une sorte de chose TextEdit, qui est fondamentalement un générique
fenêtre avec texte. Ce sera appelé plus tard! Placez ceci dans la fenêtre '.draggableWindow'.
Tableau de bord Léopard avec jQuery
jQuery est génial!
JQuery est assez cool. Je veux dire, regarde tous ces trucs cool qu'il peut faire. Un quai (provenant de Wizzud.com! Merci!), Un tableau de bord et des fenêtres déplaçables! Impressionnant! Si vous n'êtes pas arrivé ici, voici la démonstration d'un tutoriel de Nettuts.
Lorem ipsum dolor sit amet, consectetur elit adipisicing, promis de faire une incarnation temporelle, et dolore magna aliqua. Tout en un minimum de poids, l’exercice de nos exercices en cours de travail, mais il n’existe que d’excellents résultats. Duis aute irure dolor in reprrehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Comme dit, ceci est juste un texte de remplissage pour notre fenêtre. On dirait un peu grossier, comme
une page sans style.
Le prochain contenu à remplir est le tableau de bord. Essentiellement, cela peut être peu importe
Tu veux. Sérieusement les gars, si vous prenez cela en main, devenez fou. Vous pouvez
style tout ce que vous voulez dans cela ressemble à des widgets. Comme je l'ai dit, ce n'est pas considérable,
il ne montre pas les widgets réels. J'expliquerai à la fin comment intégrer WordPress.
Placez ceci dans #dashboardWrapper:
L'un des widgets contient du texte. Ceci est juste pour montrer que vous pouvez faire ce que vous voulez.
Traitez les li comme divs! Mettez quoi que ce soit! Un mini-blog!
Enfin, nous avons besoin du quai. En raison de la nature du fonctionnement du plug-in jqDock, nous
ne peut pas utiliser un ul pour cela trop facilement. Douleur, hein? Donc, au lieu de cela, ce ne sont que quelques images
côte à côte dans une div:
Voir celui avec l'identifiant de dashboardLaunch? Cela sera manipulé avec jQuery plus tard
sur.
Tout se passe comme prévu, votre page devrait avoir un tas de texte et d'images. Widgets
et des icônes, du texte et des en-têtes. Tout est indésirable pour le moment.
Le CSS fera essentiellement la bureau partie de la page. Ça va inclure
le fond, etc. Allons-y. Créez un nouveau fichier appelé 'style.css',
et placez-le dans le même répertoire que les autres fichiers. Commencer l'édition:
J'ajoute généralement quelques informations en haut de mon CSS avec ma réinitialisation, donc je sais ce que le fichier est
pour:
/ * Nom: Leopard Auteur: Nettuts / Harley Alexander Description: Pour un didacticiel à l'adresse http://net.tutsplus.com/, le but est de montrer comment jQuery et jQuery UI peuvent créer un bureau Web de style léopard. Bien que basique, il est incompatible avec Dashboard et Windows! * / * margin: 0; rembourrage: 0; a color: # 005693;
Simple. Ensuite, le style du corps et de la fenêtre:
body background: url (images / background.jpg) no-repeat centre top; police: 75% / 18px "Lucida Grande", Lucida, Verdana, sans serif; débordement caché; .draggableWindow width: 500px; débordement: auto; clarifier les deux; rembourrage: 0 20px; float: gauche; marge: 40 px; .draggableWindow h1 width: 100%; hauteur: 21px; float: gauche; taille de police: 10px; text-align: center; retrait du texte: -67px; fond: url (images / h1long.png) no-repeat; text-shadow: #fff 1px 0 1px; curseur: par défaut; .draggableWindow h1 span width: 67px; hauteur: 21px; float: gauche; background: url (images / h1short.png) pas de répétition à gauche; .content background: white; rembourrage: 36px; .content h2 margin-bottom: 1em; #smaller width: 300px; Flotter à droite; marge: 10px; marge supérieure: -100px;
tous relativement facile. La manière dont les h1 sont codés avec les précédents les utilise
technique des portes coulissantes pour s’assurer que la barre supérieure est redimensionnée en conséquence. le
ID #smaller était une autre petite boîte modale que j'ai faite, juste pour vérifier si elle fonctionnait. Vérifier
vous-même, créez simplement une nouvelle div avec l'ID #smaller et un contenu h1 / #
div, vous pouvez taper un court message. Parce que #smaller a été défini comme une largeur
de 300px, ce sera juste - une petite boîte modale.
Seuls quelques styles sont nécessaires pour le tableau de bord proprement dit… Juste pour créer l'élément de liste
les widgets sont jolis et style le widget bloc-notes!
.widget position: relative; z-index: 9999; float: gauche; marge: 1em; style de liste: aucun; #notepad padding: 10px 20px; largeur: 185px; hauteur: 191px; background: url (images / widgets / sticky.png) centre sans répétition; taille de police: 10px;
Généralement, la plupart des CSS du Dock sont effectuées dans le plugin jQuery, mais pour les fichiers dégradables
raisons, et * rudement * centré, il a encore besoin d'un peu de son propre CSS:
#dock position: fixed; marge: 0 auto; en bas: 36px; à gauche: 37,5%; largeur minimale: 20 px; largeur maximale: 400px; z-index: 9999; #dock img float: left;
Et après tout ce code (bien que rudimentaire!), Votre ordinateur de bureau Leopard devrait
ressemble à ceci:
Woohoo! La partie amusante! Trop tous ces seigneurs du Web qui méprisent l'abus de JS, je m'excuse
mais vous en gagnez vous apprenez un peu? Maintenant, la raison pour laquelle je voulais écrire ce tutoriel
si mal est parce qu'il m'a fait pense pour le faire
- ne pas dire que le travail ne le fait pas! En fait, je devais penser très latéralement
pour arriver au produit fini. Heureusement, je pourrai l'appliquer à d'autres projets
- espérons que vous faites aussi!
Avant de commencer jQuery, j'écris toujours une version anglaise de ce qui est nécessaire. Comme règle
de pouce.
Heureusement (ou malheureusement, selon votre point de vue), il s'avère qu'après
comprendre qu'il y a un peu plus que ça. Créez un fichier appelé 'dashboard.js',
et placez-le dans le répertoire JS. Le fichier JS a été enroulé il y a très longtemps (dans le HTML
section) est maintenant là! Commencer l'édition!
Commencez toujours par un document.ready ()!
// Nom: jQuery -> Leopard $ (document) .ready (function () );
Fortement commenté, donc explicite. Fondamentalement, lancez le quai, lancez le
draggables:
Accentsconagua
// lance le dock $ ('# dock'). jqDock (); // draggables defenition $ ('. widget'). draggable (); $ ('. draggableWindow'). draggable (handle: 'h1'); Si vous regardez maintenant votre station d'accueil, il fait un zoom (ou il devrait quand même)! Remarque:
nous ici chez Nettuts ne vous aiderons probablement pas trop avec cette technologie,
comme c'est le travail de Wizzud !. Vous devriez aussi pouvoir
glisser autour des widgets affichés et de la fenêtre de dialogue (uniquement par le h1
le haut comme la poignée!).
> Hein? Fermer la zone? Voyez si vous avez simplement dit à jQuery de fermer le tableau de bord lorsque #dashboardWrapper
a été cliqué de toute façon (y compris les widgets étant cliqué), alors il serait devenu une douleur
parce que vous ne pouviez pas réellement vous déplacer dans les widgets. Donc, une "zone fermée" doit
être créé est un frère des widgets (pas niché autour) qui prend un z-index
de moins que les widgets, mais plus que le bureau. Tricky, hein? Les superpositions
quelque chose comme ça:
> Beaucoup de CSS est utilisé. Ceci est d'élargir le tableau de bord pour l'adapter au navigateur actuel
fenêtre, et définissez l'opacité sur 0 pour que l'animation puisse apparaître en fondu. Cache tout le
élément de vue aussi.
// masquage initial du tableau de bord + ajout de 'closeZone' $ ('# dashboardWrapper') .css (position: 'absolute', en haut: '0px', à gauche: '0px', largeur: '100%', hauteur: '100%', opacité: '0') .hide () .append (''); Peasy facile!
Comme #dashboardWrapper, la zone de fermeture doit être agrandie pour remplir la fenêtre..
La zone étroite est ce qui a réellement le fond noir semi-transparent, aussi!
// Position et masquage de '#closeZone'. $ ('# closeZone') .css (position: 'absolute', en haut: '0px', à gauche: '0px', largeur: '100%', hauteur: '100%', opacité: '0.5', fond : '# 000'); Maintenant la magie opère! En affichant le tableau de bord lorsque l'utilisateur clique sur #dashboardLaunch,
la zone de fermeture est également affichée. Ce morceau de code, cependant, ne lance que le
Tableau de bord. Actuellement, il n'y a aucun moyen d'y échapper, sauf rafraîchissant - Fermer la zone
Job est à côté!
// Lancer Dashboard + initiation de 'closeZone' $ ('# dashboardLaunch'). Click (function () $ ('# dashboardWrapper') .show () .animate (opacity: '1', 300); ) 
> La Close Zone enfin mise en lumière.
// travail de closeZone: échapper au tableau de bord $ ('# # closeZone'). click (function () $ ('# dashboardWrapper') .animate (opacity: '0', 300) .hide (1);) ; Maintenant, cela a une note intéressante. Pour une raison quelconque, jQuery ne fera pas l'animation
sauf si le '.hide' a un temps de 1 dixième de milliseconde. Grande fonction d'évasion!
En dehors de la zone de fermeture, la seule autre chose évidente qui devra s'échapper
le tableau de bord avec animation est si un lien est cliqué. Comment? Simplement la même 'fonction'
comme avec la zone de fermeture.
// disparition du tableau de bord et lorsqu'un lien est cliqué dans $ ('# dashboardWrapper a'). click (function () $ ('# dashboardWrapper'). animate (opacity: '0', 300);) ; Et c'est tout! Votre dashboard.js devrait ressembler à quelque chose comme
ce fichier js
Comme promis, un simple coup de pouce dans la bonne direction sur la façon de l'utiliser Avec WordPress.
Fondamentalement, tout le code est finalement HTML et JavaScript quand il arrive au navigateur
fin, non? Pas de PHP, pas d'ASP.NET, juste peut-être aussi du XML. Ce principe est essentiel
comprendre, cela signifie que vous pouvez appliquer du code à tout moyen, à condition de
il a les mêmes identifiants et classes.
Considérez le div '#content' de votre blog WordPress, étant donné une classe de 'draggableWindow.
Donnez-lui un h1 en haut, et hop! Contenu de la publication à fenêtres. La barre latérale, étant donné
un identifiant (ou le changer dans le code JS) de '#dashboardWrapper', il sera automatiquement
cacher jusqu'à appel. Cela signifie que tous vos widgets li pour les archives et les catégories
et tout est maintenant séparé widgets.
Même les barres latérales dynamiques ont des classes spécifiques, ce qui leur permet d’être stylisées
comme de vrais widgets! Le Dock, je dirais est la seule chose qui aurait réellement besoin
être ajouté. Ne pas s'inquiéter! En raison de son positionnement, ce n'est qu'une div avec un tas de
les images qu'il contient.
Si vous voulez que vos autres icônes du Dock relient des lieux, un tag en ligne ne casse rien!
Le code HTML statique créé par WordPress (ou toute technologie Web, en réalité) est
applicable à tout CSS ou JS créé, à condition que les ID et les classes soient alignés.
OK, mettez les Grandaddys frondeurs No-Extensive-JS-Usage au repos, et faites de votre mieux
d'utiliser jQuery dans cette mesure. Ce tutoriel était juste pour montrer à quel point l'animation était amusante
peut vraiment être, et comme il est simple de créer des effets. En fait, si quelqu'un a vu
les effets que je vais attendre volontiers jusqu'à 5 ont été proposés et d'écrire un article sur
comment faire chacun!
