Legge til vår Leopard Desktop med jQuery

  
 
Akrobat
 
Aperture
 
Photoshop
 
Safari
 
Finder
 
 

Det første bildet er mappen plassholder. Dette aktiverer docken, så det er nødvendig. (Når vi bruker jQuery selectors, er jeg imidlertid sikker på at du kan bruke: først for å få det første dockingselementet hvis du / virkelig / ikke vil ha en inneholdende kurv).

Trinn 1: 2 - CSS

I motsetning til den første opplæringen kommer jeg til å inkludere CSS og jQuery for hvert trinn, slik at designet ikke virker helt opp. Åpne style.css fra forrige uke og legg til nederst:

.Stabel posisjon: absolutt; bunn: 0; høyre: 100px;  .stack ul listestil: none; posisjon: absolutt; topp: -30px; z-indeks: -9;  .stack ul li posisjon: absolutt;  .stack ul li span display: none;  / * Jeg er for jquery * / .stack .openStack li span display: block; stilling: absolutt; topp: 17px; høyre: 60px; høyde: 14px; linjehøyde: 14px; grense: 0; background-color: # 000; farge: #fcfcfc; tekst-align: center; opacity: .85; polstring: 3px 10px; border-radius: 10px; -webkit-grense-radius: 10px; -moz-grense-radius: 10px; opera-grense-radius: 10px; tekstskygge: # 000 1px 1px 1px; 

Stakken din vil nå se ut som en lukket stabel, men du kan ikke åpne den. Dette bare stabler (hah, ingen ordspill ment) alle ikonene oppå hverandre, så de er komprimert til et lite torg. Den siste velgeren er for jQuery. Når stakken er åpnet, legges klassen 'openStack' til ul. Jeg beklager de CSS3-haters, det er den raskeste, mest effektive måten å få det riktig på i de fleste moderne nettlesere.

Trinn 1: 3 - jQuery

På vanlig engelsk må stabelen åpne når img er klikket, skyver hver (hint ...) i oppkjøp, og til høyre litt, mens du endrer størrelsen til en mindre størrelse. Så når du klikker igjen, går alt tilbake til normalt.

$ ('. stack' img '). bytte (funksjon () // denne funksjonen, for hvert element øker topplasseringen til 50px, // og over bruk, ligningen: verdi = (verdi + 1) * 2 . Begge variablene // starter ved 0., funksjon () // denne bare reverserer ovenstående.);

Den andre funksjonen er enkel, men den første er en smerte.

var vertikal = 0; var horisontal = 0; $ ('~ ul> li'this) .each (funksjon () $ (dette) .animate (top:' - '+ vertical +' px ', venstre: horisontalt +' px ', 300) = vertikal + 50; horisontal = (horisontal + 1) * 2;); $ ('~ ul', dette) .animate (top: '-50px', venstre: '10px', 300) .addClass ('openStack'); $ ('~ ul> li> img', dette) .animate (width: '50px', marginLeft: '9px', 300);

Woo, jampacked med strengen avbryter, variabler og matte. Interessante selektorer, va? Den ~ er 'søsken av' Erg. Matte. La meg forklare. De første 2 variablene er for vertikal stilling og horisontal posisjon (kurve).

Den øverste økningen er den samme hver gang, hvor som om du ikke vil ha en horisontal rettlinje, må hver horisontal posisjon være litt mer enn resten. I dette tilfellet øker det med det forrige nummeret pluss en, ganger 2. så det går 2, 6, 14, 30, 62, 126 osv. Jeg vet at de er rare, men det fungerer. Bruk en likning du liker!

Funksjonen 'hver' ligner på, si en WordPress-loop. Denne funksjonen skjer hver gang neste element brukes. Ekvasjonen 'verdi = (verdi + 1) * 2' betyr 'ny verdi' er lik gammel verdi i tillegg til en, så dette ganger to.

Den første anime-linjen legger til variablene (i pluss) hver gang den sløyfes via strengspalting. De to siste linjene er bare størrelsen. Den andre halvdelen av byttefunksjonen, tilbakestiller bare alt tilbake til normal:

$ ('~ ul', dette) .removeClass ('openStack'). barn ('li'). animate (toppen: '20px', venstre: '-10px', 300); $ ('~ ul> li> img', dette) .animate (width: '79px', marginLeft: '0', 300);

Enkel! Nå vil jQuery-stablene dine vellykket animere, til og med buede! Dessverre er rotasjonen litt vanskeligere. Selv om HTML5 kommer ut i 2022 (-_-), kan lerretskoden ha full støtte for det.

Trinn 2 - Dashboard

Så vi skal legge til Dashboard litt. For det første, et Add Widgets Panel (vil ikke legge til til senere). Etter det vil lukking av widgets være mulig når dette panelet er åpent. Til slutt kan du legge til dine egne widgets fra dette panelet. Bruker noen svært forskjellige valgmetoder. Legge til widgets dekker også Droppables i stor grad, da drop-funksjonen er ganske stor.

Trinn 2: 1 - Legg til Widget Panel

For det første, HTML. Legg til dette like før den avsluttende #dashboardWrapper div.

 Legg til / fjern widgets 
 
 
Sticky
 
Klokke
 
Vær
 
 
 

'OpenAddWidgets' er det lille krysset / pluss som åpner og lukker panelet. Listen elementene er tilgjengelige widgets (lag så mange du vil!). Bildene du lastet ned er de små tommelen. Disse blir draggables, og du vil kunne slippe dem inn på #closeZone og til slutt, widgets vedlagt til #widgets listen.

For øyeblikket ser det ut som et lite rot;

Men med noen CSS vil vi fikse det helt oppe.

#addWidgets posisjon: absolutt; z-indeks: 9999; bunn: 0; venstre: 0; bredde: 96%; høyde: 164px; bakgrunn: url (images / dashpanel.png) bunn repeat-x; polstring: 0 2%;  #openAddWidgets display: block; bredde: 36px; høyde: 36px; bakgrunn: url (images / opendashpanel.png) senter; stilling: relativ; z-indeks: 9999; tekstindeks: -9999em;  #dashPanel ul listestil: none; margin-topp: 27px;  #dashPanel ul li float: left; polstring-høyre: 30px;  #dashPanel ul li img display: block;  #dashPanel ul li span width: 74px; skjerm: blokk; tekst-align: center; font-weight: bold; tekstskygge: #fff 1px 0 1px; farge: # 17243e; polstring: 10px; 

Svært på med posisjonering, z-indeksering og flytende, dette burde samle en effekt som denne (Panel er der, ikke skjult):

Til slutt, jQuery å skjule og vise det. Legg til følgende under kommentaren '// draggables definition' (for organisasjons skyld):

$ ('# addWidgets ul li img'). draggable (hjelper: 'klone');

Og legg til dette under '// innledende gjengivelse av dashbordet + tillegg av' closeZone '-blokken:

// første skjul av #dashPanel og addable widgets $ ('# addWidgets'). css (bunn: '-118px');

Nå for byttekode. På engelsk, når "Åpne" -knappen klikkes, skyver du panelet opp. Når det klikkes på nytt, skyv panelet ned. La oss starte med vekselen.

// åpne / lukke dashpanelet $ ('# openAddWidgets'). veksle (funksjon () // dette åpner dashbordet, animasjonen og alt, funksjonen () // motsatt til ovenfor);

Dermed vil åpningsfunksjonen være i det første gapet, mens lukkingen i den andre. Den første:

$ (dette) .css (bakgrunn: 'url (images / closedashpanel.png)'); $ ('# addWidgets'). animate (bunn: '0px', 500);

Og den andre, reverserer over:

$ (dette) .css (bakgrunn: 'url (bilder / opendashpanel.png)'); $ ('# addWidgets'). animate (bunn: '-118px', 500);

Til slutt, som Leopard, bør den lukke når brukeren vender tilbake til skrivebordet, ikke sant? Legg til dette til // # closeZone's jobb: lukk Dashboard'-funksjonen (i det!):

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

Nå, hvis du klikker på det lille pluss nederst til venstre når dashbordet er åpent, bør det animere! Rått!

Trinn 2: 2 - Legge til widgets til oversikten

Dette viste seg å være et dyr og et halvt. Masse kode for dette ... Yay! Heldigvis er det bare jQuery! La oss begynne med å definere Droppable; #closeZone. Plasser dette under Draggables-definisjonene:

// drop-definisjon $ ('# closeZone'). droppable (accept: '.widgetThumb', drop: funksjon (ev, ui) );

I utgangspunktet kan #closeZone nå akseptere tommelen i panelet som droppables, og vi er i ferd med å dykke inn i hva som skjer på dråpen.

På forståelig språk, så går det. Variabler for museposisjonen må bli funnet slik at posisjonsposisjonen kan være der vi vil ha det. En annen variabel for typen widget å legge til er nødvendig. På dråpe må Widget legges til, et annet bilde avhengig av widgetType-variabelen. Nå for å være annerledes vil klistrene bli redigerbare (ingen måte!). En tekstarea vil bli vedlagt, for å tillate skriving. Fordi alle de trekkbare definisjonene skje på lasten i dokumentet, må de defineres hver gang en widget legges til DOM, slik at den brukes på den nyeste av slike.

Vi starter med variablene.

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

Dessverre kan vi ikke få bredden og høyden på bildet som skal legges for enkelt (for å sentrere dråpen). Så i stedet må vi gjette, ved å kompensere posisjonen til musen med 100 og 50, så det er ikke øverst til venstre. JavaScript-variablene 'cleintX' og 'clientY' er i utgangspunktet museposisjonen. Og det interessante valget; ui.draggable, er elementet som nettopp har blitt dratt! Takk jQuery.ui! Nå for vedlegg:

$ ( '# Modulene'). Append ('
'); $ ('. StickyWidget '). Append (''); // måtte legge til tekstarea til nyeste DOM-medlem $ ('. widget '). draggable (); // trengte å 'draggable' det nyeste DOM-medlemmet

Tillat meg å forklare hvordan variablene fungerer i tillegget. For å gi en klasse til den nye widgeten for tilpasning, vil legge til «... '+ widgetType +' Widget '...' returnere en klasse som ligner 'stickyWidget' eller 'weatherWidget'. Inline-stilen (så beklager at den er inline! Ikke skyt meg!) Bestemmer den absolutte plasseringen av widgeten ved hjelp av variablene, som selvsagt er musekoordinatene. Som nevnt, trenger de nyeste DOM-medlemmene eventuelle jQuery-modifikasjoner eller -vedlegg [laget på dokumentbelastningen] på nytt, da jQuery ikke gjenkjenner nye DOM-medlemmer. For de to siste linjene må jQuery legge til tekstområdet (slik at du kan redigere teksten) og den nye widgeten må bli en drevbar.

For at alt dette skal virke, er det nødvendig med noen CSS. Erstatt, i style.css, '.widget' velgeren og attributter med:

.widget posisjon: absolutt; z-indeks: 9999; flyte: venstre; margin: 1em; listestil: none;  .stickyWidget polstring: 15px 20px; bredde: 185px; høyde: 155px; bakgrunn: url (bilder / widgets / sticky.png) no-repeat center;  .stickyWidget> img display: none;  .stickyWidget textarea høyde: 100%; bredde: 100%; bakgrunn: 0; grense: 0; oversikt: 0; skriftstørrelse: 16px; font-familie: 'Marker Felt'; overløp: skjult; 

Dette gjør det klebrig alt ser ut som en klebrig. Du vil eller vil ikke ha Marker Felt-skrifttypen, det er det som egentlig klebrig widgeten bruker. For den originale widgeten å forbli pen, pakk teksten, heller enn i

s men med:

... <textarea></pre> <p>Og gi li en ekstra klasse av 'stickyWidget' for å matche css (The lil har nå 2 klasser).</p> <p>Alt går i henhold til planen, du bør nå kunne a) redigere klistremerker, og b) legge til nye widgets til oversikten.</p> <img src="//accentsconagua.com/img/images_27_7/adding-to-our-leopard-desktop-with-jquery_5.png"> <h4>Trinn 2: 3 - Lukke widgets</h4> <p>Hvorfor gi denne delen en hel del til seg selv? Fordi arbeidene i dette blir veid inn i alle de tidligere funksjonene, klikk og vedlegg. Så i stedet for å være forvirret legger dette gjennom alle delene, hvorfor ikke holde det i ett?</p> <p>Ikke sant. Så i utgangspunktet brukes en liten spenning til widgets når panelet åpnes, og når en ny widget legges til Dashboard. Når dette klikkes, forsvinner den overordnede widgeten! Awesome, va? Når Add Widgets Panel lukkes, vil kryssene forsvinne inn i realms av .hide ().</p> <p>Når du arbeider ned dokumentet for å integrere lukkeknappen, starter vi med # closeZone-funksjonen. Under # addWidget's forsvinner handling (kode), legg til:</p> <pre>$ ( 'CloseWidget.') Skjule (.);</pre> <p>Neste opp, innenfor den nedbrytbare definisjonen. Denne kodebiten vil bruke en tett widget-knapp, og det er funksjonen til alle widgets når en ny er slått på. Under den nyeste draggbare definisjonen for den nylig opprettede widgeten (i drop-funksjonen), legg til:</p> <pre>$ ('. Widgeten '). Append ('<span><img src="//accentsconagua.com/img/images_27_7/adding-to-our-leopard-desktop-with-jquery_6.png"/></span>'); // klikk funksjon av nyeste DOM element. $ ('closeWidget'). klikk (funksjon () $ (dette) .parent (). animate (opacity: '0', 300) .animate (left: '-9999em', 1); );</pre> <p>Endelig er funksjonen åpen / lukk panel hvor det virkelig betyr noe, da dette vil legge til ting til alle Widgets på åpent panel (som Leopard). Under begge animatene legger du til henholdsvis:</p> <pre>$ ('. Widgeten '). Append ('<span><img src="//accentsconagua.com/img/images_27_7/adding-to-our-leopard-desktop-with-jquery_6.png"/></span>'); // klikk funksjon av nyeste DOM element. $ ('closeWidget'). klikk (funksjon () $ (dette) .parent (). animate (opacity: '0', 300) .animate (left: '-9999em', 1); );</pre> <p>og</p> <pre>$ ( 'CloseWidget.') Skjule (.);</pre> <img src="//accentsconagua.com/img/images_27_7/adding-to-our-leopard-desktop-with-jquery_6.png"> <p>Nå, når panelet åpnes, går et lite klikkbart kryss nederst til høyre på Widget, og når du drar en ny Widget på, vil det tilsynelatende duplisere. For å fikse alt dette, legg til dette CSS:</p> <pre>.closeWidget posisjon: absolutt; z-indeks: 99999; topp: -5px; igjen: -5px; </pre> <p>Og TADA! Du har nå widgets som lukker, og kan reformere når du vil ha dem også! Awesome ting!</p> <img src="//accentsconagua.com/img/images_27_7/adding-to-our-leopard-desktop-with-jquery_7.png"> <h3>Trinn 3 - Noen ekstra biter</h3> <p>Dette er egentlig bare for visuals skyld, men vi legger til en skrivebordsobjekt som du kan lage din egen funksjon når du dobbeltklikker, og gjør Dock litt raskere.</p> <h4>Trinn 3: 1 - skrivebordspost</h4> <p>Legg til litt HTML, gjør dette til det første etter åpningen #wrapper div:</p> <pre><ul> <li><span>Macintosch HD</span></li> </ul></pre> <p>Gi det litt CSS å se snazzy ut:</p> <pre>#desktopItems listestil: none; bredde: 100%; høyde: 100%;  #macintoschHD bakgrunn: url (bilder / macHD.png) no-repeat center top; polstringstopp: 128px; bredde: 138px; margin: 20px; tekst-align: center; posisjon: absolutt; høyre: 0; farge: hvit; font-weight: bold; tekstskygge: # 000 1px 1px 2px; </pre> <p>Og til slutt noen jQuery å utføre dobbeltklikk-funksjonen din (ærlig, endre varselet til hva du vil):</p> <pre>// Open finder fra skrivebordspost $ ('# macintoschHD'). Dblclick (funksjon () alert ("Hei ... Gimme en pause, jeg har jobbet hardt på dette!"););</pre> <img src="//accentsconagua.com/img/images_27_7/adding-to-our-leopard-desktop-with-jquery_8.png"> <h4>Trinn 3: 2 - Forbedre Dock</h4> <p>Så i forrige uke klaget noen av dere om Clunky Dock, og jeg opplever at det ikke er mye jeg kan gjøre med det. Men for å lure øynene dine for å tro at det er glatt, kan du øke hastigheten. Bare endre jqDock-deklarasjonen i dashboard.js til:</p> <pre>var jqDockOpts = varighet: 200; $ ( '# Dock') jqDock (jqDockOpts.);</pre> <p>Og nå burde du ha en raskere dock!</p> <h3>Wrap Up</h3> <p>Hva en mektig opplæring å skrive ... Det var tøft. Men hei! Vi gjorde det! Jeg skal bare bruke dette rommet til å notere noen ting fra forrige uke som kom opp i kommentarer.</p> <p><strong>DVS.</strong> Det Bastard. Skam på jQuery også, for ikke å være kryssbrowser som det er ment å. Jeg får følelsen fra noen av dere som klager, tror at koden min er skummel i den sammenheng at det ikke fungerer i nettleserne dine som du kodes for. Jeg skrev en artikkel om den på nettstedet mitt som diskuterer nettleserspesifikke kodere. Tydeligvis vet jeg at du skal være dygtig på alle nettlesere ... Men ingen er perfekte.</p> <p><strong>Practability.</strong> Selvfølgelig er dette bare ment å være morsomt. Stabler kan være et alternativ for et nettsted, men til slutt er det ment å være morsomt. La meg sitere en kommentar fra forrige uke (Ikke skamløs kampanje jeg lover!).</p> <blockquote> <p>Takk for at du tok deg tid til å skrive denne opplæringen, jQuery er flott og det er hyggelig å ta litt tid som utviklere og ha det gøy med alle kodebibliotene som flyter rundt. Lys opp folk og ha det gøy med det, det er ikke ment å være praktisk, bare morsomt og inspirerende. Flott tut.</p> <p>hilsen,</p> <p>Drew</p> </blockquote> <p>Jeg tror det er det. Håper du (Nei jeg er ikke TEXAN!) Likte denne opplæringen, var ikke så vanskelig å holde tritt med, og kommer til å få <strong>rett</strong> tilbake til praktisk tenkning akkurat nå!</p> <ul> <li>Abonner på NETTUTS RSS-feed for flere daglige webutviklinger og artikler.</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">Kode</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">Legge til kroppsklassen i 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">Legge til CSS for en fargeskjema i Theme Customizer</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="/">no.accentsconagua.com</a><div class="h-block-a"></div></div>
			<div class="footer-text">
				Interessant informasjon og nyttige tips om programmering. Nettstedutvikling, webdesign og webutvikling. Photoshop opplæringsprogrammer. Opprettelse av dataspill og mobile applikasjoner. Bli en profesjonell programmerer fra grunnen av.
			</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="Søke...">
							<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>