Ajout à notre bureau Leopard avec jQuery

  
 
Acrobate
 
Ouverture
 
Photoshop
 
Safari
 
Chercheur
 
 

La première image est l'espace réservé au dossier. C'est ce qui active le dock, donc c'est nécessaire. (Lorsque nous utilisons les sélecteurs jQuery, cependant, je suis sûr que vous pouvez utiliser: d'abord pour obtenir le premier élément de dock si vous / vraiment / ne voulez pas de panier contenant).

Étape 1: 2 - CSS

Contrairement au premier tutoriel, je vais inclure les CSS et jQuery pour chaque étape, juste pour que le design ne se confonde pas complètement. Ouvrez style.css de la semaine dernière et ajoutez en bas:

.stack position: absolute; en bas: 0; à droite: 100px;  .stack ul list-style: none; position: absolue; en haut: -30px; z-index: -9;  .stack ul li position: absolute;  .stack ul li span display: none;  / * Je suis pour le jquery * / .stack .openStack li span display: block; position: absolue; en haut: 17px; à droite: 60px; hauteur: 14px; hauteur de ligne: 14px; bordure: 0; couleur de fond: # 000; couleur: #fcfcfc; text-align: center; opacité: 0,85; rembourrage: 3px 10px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; rayon opéra-frontière: 10px; text-shadow: # 000 1px 1px 1px; 

Votre pile ressemblera maintenant à une pile fermée, mais vous ne pouvez pas l'ouvrir. Cela empile (hah, sans jeu de mots) toutes les icônes les unes sur les autres, elles sont donc compressées dans un petit carré. Le dernier sélecteur est pour le jQuery. Lorsque la pile est ouverte, l'openStack de la classe est ajouté à ul. Je m'excuse auprès de ceux qui haïssent CSS3. C'est le moyen le plus rapide et le plus efficace de bien faire les choses dans les navigateurs modernes..

Étape 1: 3 - jQuery

En clair, la pile doit s’ouvrir lorsque l’on clique sur img, en poussant chaque incrément (indice) vers le haut, et un peu à droite, tout en redimensionnant. Puis, lorsque vous cliquez à nouveau, tout revient à la normale.

$ ('. stack> img'). toggle (function () // cette fonction, pour chaque élément, augmente la position la plus haute de 50px, // et en utilisant l'équation: valeur = (valeur + 1) * 2 Les deux variables // commencent à 0., function () // celle-ci ne fait que renverser le précédent.);

La deuxième fonction est facile, mais la première est pénible.

var vertical = 0; var horizontal = 0; $ ('~ ul> li'this) .each (function () $ (this) .animate (top:' - '+ vertical +' px ', gauche: horizontal +' px ', 300); vertical = vertical + 50; horizontal = (horizontal + 1) * 2;); $ ('~ ul', this) .animate (top: '-50px', à gauche: '10px', 300) .addClass ('openStack'); $ ('~ ul> li> img', this) .animate (width: '50px', marginLeft: '9px', 300);

Woo, bouleversé par des interruptions de chaînes, des variables et des maths. Des sélecteurs intéressants, hein? Le ~ est 'frères et soeurs de' Erg. Math. Laisse-moi expliquer. Les 2 premières variables concernent la position verticale et la position horizontale (courbe).

L’incrémentation du haut est la même à chaque fois, sauf qu’à moins que vous ne souhaitiez une ligne droite horizontale, chaque position horizontale doit être légèrement supérieure à la suivante. Dans ce cas, il augmente du nombre précédent plus un, deux fois. Il faut donc 2, 6, 14, 30, 62, 126, etc. Je sais que ce sont des nombres étranges, mais cela fonctionne. Utilisez n'importe quelle équation que vous aimez!

La fonction 'each' est similaire à, disons une boucle WordPress. Cette fonction se produit chaque fois que le prochain élément est utilisé. L'équation 'valeur = (valeur + 1) * 2' signifie 'nouvelle valeur équivaut à ancienne valeur plus un, alors ceci fois deux.

La première ligne animée ajoute les variables (dans le plus) chaque fois qu'elle est bouclée via le fractionnement de chaîne. Les deux dernières lignes ne sont que la taille. L’autre moitié de la fonction de basculement réinitialise tout à la normale:

$ ('~ ul', this) .removeClass ('openStack'). enfants ('li'). animate (top: '20px', à gauche: '-10px', 300); $ ('~ ul> li> img', this) .animate (width: '79px', marginLeft: '0', 300);

Simple! Maintenant, vos piles jQuery animeront avec succès, même en courbe! Malheureusement, la rotation est un peu plus difficile. Bien que, quand HTML5 sortira en 2022 (-_-), la balise canvas pourrait prendre en charge cette fonction..

Étape 2 - Tableau de bord

Nous allons donc ajouter un peu au tableau de bord. Premièrement, un panneau Ajouter des widgets (ne fera pas l’ajout réel jusqu’à plus tard). Après cela, la fermeture des widgets sera possible lorsque ce panneau sera ouvert. Enfin, pouvoir ajouter vos propres widgets à partir de ce panneau. Utilise des méthodes de sélection très différentes. L'ajout des widgets couvre également largement Droppables, car la fonction de dépôt est plutôt volumineuse..

Étape 2: 1 - Ajouter un panneau de widgets

Tout d'abord, le HTML. Ajoutez ceci juste avant la fermeture de #dashboardWrapper div.

 Ajouter / supprimer des widgets 
 
 
Gluant
 
L'horloge
 
Météo
 
 
 

'OpenAddWidgets' est la petite croix / plus qui ouvre et ferme le Panel. Les éléments de la liste sont les widgets disponibles (créez-en autant que vous le souhaitez!). Les images que vous avez téléchargées sont les petits pouces. Ceux-ci deviendront des objets déplaçables et vous pourrez les déposer sur la #closeZone et, éventuellement, les widgets ajoutés à la liste #widgets..

Pour le moment, cela ressemble à un peu le bordel.

Mais avec certains CSS, nous allons résoudre ce problème.

#addWidgets position: absolute; z-index: 9999; en bas: 0; gauche: 0; largeur: 96%; hauteur: 164px; background: url (images / dashpanel.png) bottom repeat-x; rembourrage: 0 2%;  #openAddWidgets display: block; largeur: 36px; hauteur: 36px; fond: url (images / opendashpanel.png) center; position: relative; z-index: 9999; retrait du texte: -9999em;  #dashPanel ul list-style: none; marge supérieure: 27 px;  #dashPanel ul li float: left; rembourrage à droite: 30px;  #dashPanel ul li img display: block;  #dashPanel ul li span width: 74px; bloc de visualisation; text-align: center; poids de police: gras; text-shadow: #fff 1px 0 1px; couleur: # 17243e; rembourrage en haut: 10px; 

Avec beaucoup de positionnement, d’indexation et de flottement, cela devrait générer un effet comme celui-ci (le panneau est là, pas caché):

Enfin, le jQuery à cacher et à montrer. Ajoutez ce qui suit sous le commentaire '// définition de draggables' (pour des raisons d'organisation):

$ ('# addWidgets ul li img'). draggable (helper: 'clone');

Et ajoutez ceci sous le // masquage initial du tableau de bord + ajout du bloc "closeZone":

// masquage initial de #dashPanel et des widgets pouvant être ajoutés $ ('# addWidgets'). css (bottom: '-118px');

Passons maintenant au code de bascule. En anglais, lorsque le bouton "Ouvrir" est cliqué, faites glisser le panneau vers le haut. Lorsque vous cliquez à nouveau, faites glisser le panneau vers le bas. Commençons par la bascule.

// ouverture / fermeture du tableau de bord $ ('# openAddWidgets'). toggle (function () // ouvre le tableau de bord, l'animation et tout, function () // à l'opposé de la précédente);

Ainsi, la fonction d'ouverture sera dans le premier espace, alors que la fermeture dans le second. La première:

$ (this) .css (background: 'url (images / closedashpanel.png)'); $ ('# addWidgets'). animate (bottom: '0px', 500);

Et le second, en sens inverse:

$ (this) .css (background: 'url (images / opendashpanel.png)'); $ ('# addWidgets'). animate (bottom: '-118px', 500);

Enfin, à l'instar de Leopard, il devrait se fermer lorsque l'utilisateur reviendra sur le bureau, n'est-ce pas? Ajoutez ceci à la tâche de // # closeZone: fermer la fonction 'Dashboard' (dedans!):

$ ('# openAddWidgets'). css (background: 'url (images / opendashpanel.png)'); $ ('# addWidgets'). animate (bottom: '-118px', 500);

Maintenant, si vous cliquez sur le petit plus en bas à gauche lorsque le tableau de bord est ouvert, il devrait s'animer! Impressionnant!

Étape 2: 2 - Ajout de widgets à la liste de tableaux de bord

Cela s'est avéré être une bête et demie. Beaucoup de code pour cela… Yay! Heureusement, ce n'est que jQuery! Commençons par définir le Droppable; #closeZone. Placez ceci sous les définitions de Draggables:

// définition droppable $ ('# closeZone'). droppable (accept: '.widgetThumb', drop: function (ev, ui) );

Fondamentalement, #closeZone peut maintenant accepter les pouces dans le Panel comme des objets à remplir, et nous sommes sur le point d'explorer ce qui se passe instantanément..

En langage compréhensible, voici comment cela se passe. Des variables pour la position de la souris doivent être trouvées afin que la position de la chute puisse être où nous le voulons. Une autre variable pour le type de widget à ajouter est nécessaire. Lors de la suppression, le widget doit être ajouté, une image différente en fonction de la variable widgetType. Maintenant, pour être différent, les stickies seront modifiables (No way!). Une zone de texte sera ajoutée pour permettre l’écriture. Étant donné que toutes les définitions déplaçables se produisent lors du chargement du document, elles devront être redéfinies chaque fois qu'un widget est ajouté au DOM, de sorte qu'il soit appliqué à la plus récente d'une telle..

Nous allons commencer avec les variables.

var x = ev.clientX - 100; var y = ev.clientY - 50; var widgetType = $ (ui.draggable) .attr ('id');

Malheureusement, nous ne pouvons pas obtenir la largeur et la hauteur de l'image sur le point d'être ajoutée trop facilement (pour centrer la chute). Nous devons donc deviner, en décalant la position de la souris de 100 à 50, pour que ce ne soit pas en haut à gauche. Les variables JavaScript 'cleintX' et 'clientY' sont essentiellement la position de la souris. Et cet intéressant sélecteur; ui.draggable, est l'élément qui vient d'être déplacé! Merci jQuery.ui! Maintenant pour appendice:

$ ('# widgets'). append ('
'); $ ('. stickyWidget'). append (''); // avait besoin d’ajouter textarea au dernier membre du DOM $ ('. widget '). draggable (); // avait besoin de 'glisser' le plus récent membre du DOM

Permettez-moi d’expliquer comment les variables fonctionnent dans l’annexe. Pour donner une classe au nouveau widget à personnaliser, ajouter "… '+ widgetType +' Widget '…" retournera une classe similaire à' stickyWidget 'ou' weatherWidget '. Le style en ligne (désolé, il est en ligne! Ne me tirez pas dessus) détermine la position absolue du widget par les variables, qui sont bien sûr les coordonnées de la souris. Comme je l'ai mentionné, les nouveaux membres du DOM ont besoin de réappliquer les modifications ou annexes jQuery [faites lors du chargement du document], car jQuery ne reconnaît pas les nouveaux membres du DOM. Pour les deux dernières lignes, jQuery doit ajouter la zone de texte (afin que vous puissiez modifier le texte) et le nouveau Widget doit devenir un élément déplaçable..

Pour que tout cela fonctionne, un peu de CSS est nécessaire. Remplacez, dans style.css, le sélecteur '.widget' et les attributs par:

.widget position: absolute; z-index: 9999; float: gauche; marge: 1em; style de liste: aucun;  .stickyWidget padding: 15px 20px; largeur: 185px; hauteur: 155px; background: url (images / widgets / sticky.png) centre sans répétition;  .stickyWidget> img display: none;  .stickyWidget textarea height: 100%; largeur: 100%; fond: 0; bordure: 0; contour: 0; taille de police: 16px; famille de polices: 'Marker Felt'; débordement caché; 

Cela rend le collant tout ressemblant à un collant. Vous aurez ou n’aurez pas la police Marker Felt, c’est ce que le widget réellement collant utilise. Pour que le widget d'origine reste joli, enveloppez le texte plutôt que dans

s mais avec:

… <textarea></pre> <p>Et donnez au li une classe supplémentaire de 'stickyWidget' pour correspondre au css (le li va maintenant avoir 2 classes).</p> <p>Tout se passe comme prévu, vous devriez maintenant pouvoir a) éditer des vignettes, et b) ajouter de nouveaux widgets au tableau de bord..</p> <img src="//accentsconagua.com/img/images_27_7/adding-to-our-leopard-desktop-with-jquery_5.png"> <h4>Étape 2: 3 - Fermeture des widgets</h4> <p>Pourquoi se donner une partie entière à cette partie? Parce que le fonctionnement de ceci est tissé dans toutes les fonctions, clics et annexes précédents. Donc, au lieu d’être confus d’ajouter cela dans toutes les parties, pourquoi ne pas le garder en un?</p> <p>Droite. Donc, en gros, une petite étendue sera appliquée aux widgets lorsque le panneau s'ouvre et lorsqu'un nouveau widget est ajouté au tableau de bord. Lorsque vous cliquez dessus, le widget parent disparaît! Génial, hein? Lorsque le panneau Ajouter des widgets se ferme, les croix disparaissent dans les royaumes de .hide ().</p> <p>En travaillant sur le document pour intégrer le bouton de fermeture, nous commençons par la fonction de # closeZone. Sous l'acte de disparition de # addWidget (code), ajoutez:</p> <pre>$ ('. closeWidget'). hide ();</pre> <p>Ensuite, dans la définition de la bave. Cet extrait de code appliquera un bouton de fermeture de widget et sa fonction sera appliquée à tous les widgets lorsqu'un nouveau est déplacé. Sous la dernière définition déplaçable du widget nouvellement créé (dans la fonction de dépôt), ajoutez:</p> <pre>$ ('. widget'). append ('<span><img src="//accentsconagua.com/img/images_27_7/adding-to-our-leopard-desktop-with-jquery_6.png"/></span>'); // clic sur la fonction du plus récent élément DOM. $ ('. closeWidget'). click (function () $ (this) .parent (). animate (opacity: '0', 300) .animate (left: '-9999em', 1); );</pre> <p>Enfin, la fonction ouvrir / fermer le panneau est ce qui compte vraiment, car cela ajoutera la chose à tous les widgets ouverts du panneau (comme Leopard). Sous les deux animés, ajoutez respectivement:</p> <pre>$ ('. widget'). append ('<span><img src="//accentsconagua.com/img/images_27_7/adding-to-our-leopard-desktop-with-jquery_6.png"/></span>'); // clic sur la fonction du plus récent élément DOM. $ ('. closeWidget'). click (function () $ (this) .parent (). animate (opacity: '0', 300) .animate (left: '-9999em', 1); );</pre> <p>et</p> <pre>$ ('. closeWidget'). hide ();</pre> <img src="//accentsconagua.com/img/images_27_7/adding-to-our-leopard-desktop-with-jquery_6.png"> <p>Désormais, lorsque le panneau est ouvert, une petite croix cliquable se place en bas à droite du widget, et lorsque vous faites glisser un nouveau widget, il semble qu’il soit en double. Pour résoudre tout cela, ajoutez ce CSS:</p> <pre>.closeWidget position: absolute; z-index: 99999; en haut: -5px; à gauche: -5px; </pre> <p>Et TADA! Vous avez maintenant des widgets qui se ferment et peuvent se réformer quand vous le souhaitez aussi! Trucs géniaux!</p> <img src="//accentsconagua.com/img/images_27_7/adding-to-our-leopard-desktop-with-jquery_7.png"> <h3>Étape 3 - Quelques bits supplémentaires</h3> <p>C’est vraiment juste pour des raisons visuelles, mais nous allons ajouter un élément de bureau sur lequel vous pourrez créer votre propre fonction lorsque vous double-cliquez dessus, et rendre le Dock un peu plus rapide..</p> <h4>Étape 3: 1 - Élément de bureau</h4> <p>Ajoutez du HTML, faites-en la première chose après l’ouverture #wrapper div:</p> <pre><ul> <li><span>Macintosch HD</span></li> </ul></pre> <p>Donnez-lui un peu de CSS pour avoir l’air élégant:</p> <pre>#desktopItems list-style: none; largeur: 100%; hauteur: 100%;  #macintoschHD background: url (images / macHD.png) no-repeat center top; rembourrage en haut: 128px; largeur: 138px; marge: 20px; text-align: center; position: absolue; à droite: 0; Couleur blanche; poids de police: gras; text-shadow: # 000 1px 1px 2px; </pre> <p>Et enfin, quelques requêtes jQuery pour exécuter votre fonction de double-clic (honnêtement, modifiez l'alerte comme bon vous semble):</p> <pre>// Open Finder à partir de l'élément de bureau $ ('# macintoschHD'). Dblclick (function () alert ("Hé ... donne-moi une pause, j'ai travaillé dur pour ça!"););</pre> <img src="//accentsconagua.com/img/images_27_7/adding-to-our-leopard-desktop-with-jquery_8.png"> <h4>Étape 3: 2 - Améliorer le quai</h4> <p>Donc, la semaine dernière, certains d'entre vous se sont plaints du maladroit Dock, et je maintiens qu'il n'y a pas grand-chose à faire pour y remédier. Cependant, pour tromper vos yeux et leur faire croire que c'est lisse, vous pouvez augmenter la vitesse. Modifiez simplement la déclaration jqDock dans dashboard.js en:</p> <pre>var jqDockOpts = durée: 200; $ ('# dock'). jqDock (jqDockOpts);</pre> <p>Et maintenant, vous devriez avoir un quai plus rapide!</p> <h3>Emballer</h3> <p>Quel puissant tutoriel à écrire… C'était difficile. Mais salut! Nous l'avons fait! Je vais juste utiliser cet espace pour noter quelques choses de la semaine dernière qui sont apparues dans les commentaires.</p> <p><strong>C'EST À DIRE.</strong> Ce bâtard. Honte à jQuery aussi, de ne pas être cross browser comme il se doit. J'ai le sentiment de certains d'entre vous qui se plaignent de penser que mon code est de mauvaise qualité car il ne fonctionne pas dans VOS navigateurs pour lequel VOUS codez. J'ai écrit un article à ce sujet sur mon site Web concernant les codeurs spécifiques à un navigateur. Évidemment, je sais que vous devriez être à l'aise avec tous les navigateurs… Mais personne n'est parfait.</p> <p><strong>Praticabilité.</strong> De toute évidence, ceci est juste destiné à être amusant. Les piles peuvent être une option pour un site, mais au final, c'est censé être amusant. Permettez-moi de citer un commentaire de la semaine dernière (promotion pas sans vergogne promis!).</p> <blockquote> <p>Merci d’avoir pris le temps d’écrire ce didacticiel, jQuery est génial et c’est agréable de prendre du temps en tant que développeur et de vous amuser avec toutes les bibliothèques de code qui circulent. Allégez les gens et amusez-vous avec, cela n’est pas fait pour être pratique, mais amusant et inspirant. Grande tut.</p> <p>Cordialement,</p> <p>A dessiné</p> </blockquote> <p>Je pense que c'est ça. J'espère que vous avez tous apprécié (non je ne suis pas au Texas!) Ce tutoriel, ce n'était pas trop difficile à suivre, et allez <strong>tout droit</strong> retour à la pensée pratique en ce moment!</p> <ul> <li>Abonnez-vous au flux RSS NETTUTS pour plus de commentaires et d'articles sur le développement Web au quotidien.</li> </ul> <p> <br> </p>


<div class="rek-block">
	<center>	
			<ins class="adsbygoogle"
			style="display:inline-block;width:580px;height:400px"
			data-ad-client="ca-pub-3810161443300697"
			data-ad-slot="9434875811"></ins>
	   <script>
	   (adsbygoogle = window.adsbygoogle || []).push({});
	   </script>
	</center>
</div>


<div class="h-alltags">
<a href="articles/code">Code</a>
</div>

		</div>

</div>
</div>




</div>


<div class="next_posts clearfix">
	<div class="n_post">
        
		<div class="next_posts-h1 left_nh1"><a href="/articles/code/adding-to-the-body-class-in-wordpress.html">Ajout à la classe de corps dans WordPress</a></div>
			
			<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_13/adding-to-the-body-class-in-wordpress.jpg');"></div>	
			
        				
	</div>		
	<div class="n_post">
        
		<div class="next_posts-h1 right_nh1"><a href="/articles/code/adding-the-css-for-a-color-scheme-in-the-theme-customizer.html">Ajout du CSS pour un jeu de couleurs dans le personnaliseur de thème</a></div>
			
			<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_13/adding-the-css-for-a-color-scheme-in-the-theme-customizer.png');"></div>
					
        
	</div>
</div>


<footer>
	<div class="container">
			<div class="footer-langs">
					<ul class="site-langs-list">
							<li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li>					
							<li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li>
							<li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li>
							<li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li>
							<li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li>
							<li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li>
							<li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li>
							<li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li>
					</ul>
				</div>
				
			<div class="h-block"><a href="/">fr.accentsconagua.com</a><div class="h-block-a"></div></div>
			<div class="footer-text">
				Informations intéressantes et conseils utiles sur la programmation. Développement de sites Web, conception de sites Web et développement Web. Tutoriels Photoshop. Création de jeux informatiques et d'applications mobiles. Devenez un programmeur professionnel à partir de zéro.
			</div>
	</div>
</footer>

<div class="search">
	<img class="searchico" src="//accentsconagua.com/img/search.svg" alt="">
</div>
	<div class="modal">
			<div class="modal-content">
							<span class="close-button">×</span>

							<input class="searchmain" type="text" id="search-input" placeholder="Chercher...">
							<ul class="searchli" id="results-container"></ul>

						</div>
</div>


<link rel="stylesheet" href="css/flags.css">

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
  "popup": {
	"background": "#edeff5",
	"text": "#838391"
  },
  "button": {
	"background": "#4b81e8"
  }
},
"theme": "classic",
"position": "bottom-right"
})});
</script>


	<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
	<script src="js/scripts.min.js"></script>	
	<script src="js/common.js"></script>
	<link rel="stylesheet" href="css/fontawesome-all.min.css">

	<script>
			var modal = document.querySelector(".modal");
			var trigger = document.querySelector(".search");
			var closeButton = document.querySelector(".close-button");

			function toggleModal() {
						modal.classList.toggle("show-modal");
			}

			function windowOnClick(event) {
						if (event.target === modal) {
										toggleModal();
						}
			}

			trigger.addEventListener("click", toggleModal);
			closeButton.addEventListener("click", toggleModal);
			window.addEventListener("click", windowOnClick);
</script>



    <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script>

<script>
        SimpleJekyllSearch({
          searchInput: document.getElementById('search-input'),
          resultsContainer: document.getElementById('results-container'),
          json: '/search.json',
          searchResultTemplate: '<li><a href="{url}">{title}</a></li>'
        })
</script>

<script src="jquery.unveil2.min.js"></script>
<script>
	$('img').unveil();
</script>

</body>
</html>