Share
jQuery lägger till en hel del cool funktion till dina webbplatser. Det kan göra en rad saker, från animering till AJAX. Det är vanligtvis rynkat på att lita starkt på jQuery att designa dina webbplatser, men det är kul att gå vild då och då. I denna handledning lär jag dig hur du använder jQuery för att skapa en helt kodad Dashboard, precis som Leopard! Det här kan vara praktiskt att dölja en massa prylar eller widgets som du inte har plats för!
Denna handledning har ett antal komponenter som kör på den. En belastning av bilder, en tredje
Party Dock plugin och UI.draggable jQuery komponent, tillsammans med, naturligtvis,
jQuery-kärnan (v1.2.6). Notera: många av bilderna är förmodligen
upphovsrättsskyddat av deras ägare. Några docka ikoner har tagits från deras paket
och jag har använt Leopard Standard Wallpaper. Men de är [bakgrundsbilder] utbytbara!
Placera alla dessa i en katalog. En mapp som heter "bilder" (med bilderna inuti),
en mapp som heter "js" med JavaScript i den.
Anfallsplanen för denna handledning är som följer. På skrivbordet kommer det att finnas en
Draggable Window och en Dock. Det finns en annan div som heter #dashboardWrapper that
gömmer sig när jQuery används. Det kommer att försämras utan JS, men inte bra. JS planen
av angrepp Jag förklarar när vi kommer dit.
Förutom de ikoner som används, vill jag också påpeka att detta inte är så omfattande
att gå ut och få dynamiska widgets etc. Du kan göra det själv! Detta
ger bara de grundläggande "ramarna" att arbeta med. Faktum är att när jag började skriva
den här handledningen startades som ett WordPress-tema, med widgets som widgets
på instrumentbrädan. Det är fortfarande möjligt! Jag ska förklara hur senare.
Skapa en fil som heter index.html. Detta blir den sida som ser ut som Leopard.
Du måste relatera alla JavaScript, och style.css vi ska skapa senare. Bara
börja med det här:
Leopard Dashboard
Sidan har då 3 minsta sektioner. 2 Divs inom #wrapper (ett fönster och
aktuell instrumentbräda) och dockan utanför omslaget. Lägg till dessa avsnitt i:
Leopard Dashboard
Nu har vi våra 3 grundläggande tomma divs. Vi måste fylla i dem med respektive
innehåll. Eftersom det draggbara fönstret bara är ett gammalt fönster kan du fylla i det med
vad du vill. Jag skapade en TextEdit sorts sak, det är bara i princip en generisk
fönster med text. Det kommer att stylas senare! Placera detta inom ".draggableWindow".
Leopard Dashboard med jQuery
jQuery är fantastisk!
jQuery är ganska coolt. Jag menar, titta på alla dessa coola saker det kan göra. En brygga (Hämtad från Wizzud.com! Tack!), En instrumentbräda och dragbara fönster! Grymt bra! Om du inte kom hit via det här är det en demonstration av en handledning från Nettuts.
Lorem ipsum dolor sitta amet, konsekventa adipisicing elit, sed gör det ojämnaste tillfället för tillfället att arbeta med en dolore magna aliqua. Utan minsta möjliga vänskap, det är inte nödvändigt att utöva arbetskraftsarbeten och utifrån det som följer. Duis aute irure dolor i reprehenderit i voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt i culpa de officia deserunt mollit anim id er laborum.
Som sagt är det bara lite fyllnadstext till vårt fönster. Ser ganska sällsynt ut, precis som
en ostylad sida.
Nästa fyllning av innehåll är instrumentpanelen. I huvudsak kan detta vara vad som helst
Du vill. Allvarligt killar, om du tar det i egna händer, går du med nötter. Du kan
stil allt du vill ha inom detta att se ut som widgets. Som jag sa är det inte omfattande,
det visar inte faktiska widgets. Jag förklarar i slutet hur man integrerar med WordPress.
Placera detta inom #dashboardWrapper:
En av widgetsna har lite text. Detta är bara för att visa att du kan göra vad du vill.
Behandla li s som divs! Sätt vad som helst! En mini-blogg!
Slutligen behöver vi dockan. På grund av hur jqDock-plugin fungerar fungerar vi
kan inte använda ett ul för det för lätt. Smärta, va? Så istället är det bara några bilder
bredvid varandra i en div:
Se den med Dashboard-idens namn? Det kommer att manipuleras med jQuery senare
på.
Allt går enligt plan, din sida ska ha en massa text och bilder. widgets
och ikoner, text och rubriker. Det är all skräp just nu.
CSS kommer i huvudsak att göra skrivbordet del av sidan. Det kommer att inkludera
bakgrunden, etc. Låt oss komma ner till det. Skapa en ny fil som heter 'style.css',
och placera den i samma katalog som de andra filerna. Börja redigera:
Jag lägger i allmänhet lite information upp på min CSS med min återställning så jag vet vad filen är
för:
/ * Namn: Leopard Författare: Nettuts / Harley Alexander Beskrivning: För en handledning på http://net.tutsplus.com/, syftar det till att visa hur jQuery och jQuery UI kan skapa ett webbhotell i leopardstil. Även om det är grundläggande, inkomprimeras det Dashboard och Windows! * / * marginal: 0; vaddering: 0; en färg: # 005693;
Enkel. Nästa upp, kroppen och fönstret styling:
kropp bakgrund: url (images / background.jpg) no-repeat center top; typsnitt: 75% / 18px "Lucida Grande", Lucida, Verdana, sans-serif; överflöde: gömd; .draggableWindow width: 500px; överflöde: auto; klara: båda; vaddering: 0 20px; flyta till vänster; marginal: 40px; .draggableWindow h1 bredd: 100%; höjd: 21px; flyta till vänster; typsnittstorlek: 10px; text-align: center; text-streck: -67px; bakgrund: url (images / h1long.png) no-repeat; textskugga: #fff 1px 0 1px; markör: default; .draggableWindow h1 span width: 67px; höjd: 21px; flyta till vänster; bakgrund: url (images / h1short.png) no-repeat left; . innehåll bakgrund: vit; vaddering: 36px; .content h2 margin-bottom: 1em; #mindre bredd: 300px; float: right; marginal: 10px; margin-top: -100px;
allt relativt enkelt. Hur h1s kodas med de föregående användningarna
skjutdörren tekniken för att se till att toppstången ändras i enlighet med detta. De
ID # smaller var en annan liten modalbox som jag gjorde, bara för att kontrollera att den fungerade. Att kolla
själv, skapa helt enkelt en ny div med ID # smaller och med ett h1 / # innehåll
div, du kan skriva ett kort meddelande. Eftersom #smaller har definierats för att vara en bredd
av 300px, det är bara det - en liten modalbox.
Det behövs bara några få stilar för den aktuella instrumentbrädan ... Bara för att göra listobjektet
widgets ser ganska ut och stilar anteckningsblock-widgeten!
.widget position: relative; z-index: 9999; flyta till vänster; marginal: 1em; listestil: none; #notepad padding: 10px 20px; bredd: 185px; höjd: 191px; bakgrund: url (bilder / widgets / sticky.png) no-repeat center; typsnittstorlek: 10px;
Generellt är det mesta av Docks CSS gjort i jQuery Plugin, men för nedbrytbart
anledningar och * grov * centrering behöver den fortfarande lite av sin egen CSS:
#dock position: fixed; marginal: 0 auto; botten: 36px; vänster: 37,5%; min bredd: 20px; max bredd: 400px; z-index: 9999; #dock img float: left;
Och trots allt den koden, (men fortfarande grov som tarm!) Borde ditt Leopard skrivbord
se något så här:
Woohoo! Den roliga delen! För alla de webbansvariga som förtjänar överanvändning av JS, ber om ursäkt
men du vinner lite du lär dig lite hm? Nu anledningen till att jag ville skriva denna handledning
så dåligt är att det faktiskt gjorde mig tror för att göra det
- för att inte säga annat arbete gör det inte! Detta var jag egentligen tvungen att tänka mycket lateralt
för att komma till den färdiga produkten. Tacksamt kan jag tillämpa det på andra projekt
- Vi hoppas att du gör det också!
Innan jag börjar jQuery skriver jag alltid en engelsk version av vad som behövs. I regel
av tummen.
Lyckligtvis (eller tyvärr, beroende på hur du ser på det) visar det sig efter
att räkna ut det där är lite mer än det. Skapa en fil som heter "dashboard.js",
och placera den i JS-katalogen. JS-filen reeled för åldrar sedan (upp i HTML
avsnitt) finns nu! Börja redigera!
Börja alltid med en document.ready ()!
// Namn: jQuery -> Leopard $ (dokument) .ready (funktion () );
Tungt kommenterade, så självförklarande. Starta docka dockan, starta
draggables:
Accentsconagua
// startdocka $ ('# docka'). jqDock (); // draggables defenition $ ('. widget'). draggable (); $ ('.draggableWindow'). draggable (handtag: 'h1'); Om du nu tittar på din brygga, zoomar den (eller det borde ändå)! Notera:
vi här på Nettuts kommer inte att hjälpa dig för mycket med denna teknik,
som det är Wizzuds jobb! Du borde också kunna
att dra runt de visade widgetarna och dialogfönstret (endast genom h1 längs
toppen som handtaget!).
> va? Stäng zon? Se om du helt enkelt sa till jQuery att stänga instrumentpanelen när #dashboardWrapper
klickades in i alla fall (inklusive widgets som klickades), då skulle det bli en smärta
för att du inte kunde flytta runt widgetsna. Så en "nära zon" behöver
skapas som är en syskon till widgetsna (inte inbäddat runt) som tar ett z-index
av mindre än widgetsna, men mer än skrivbordet. Tricky, va? Layering ser ut
något som det här:
> Många CSS används. Det här är att expandera instrumentpanelen så att den passar den faktiska webbläsaren
fönster och ställ in opacitet till 0 så att animationen kan blekna den in. Döljer hela
element från visningen också.
// första döljningen av instrumentpanelen + tillägg av 'closeZone' $ ('# dashboardWrapper') .css (position: 'absolut', övre: '0px', vänster: '0px', bredd: '100%', höjd: '100%', opacitet: '0') .hide () .append (''); Lätt som en plätt!
Liksom #dashboardWrapper, måste nära zonen blåsas upp för att fylla fönstret.
Den nära zonen är vad som faktiskt har den halvsparrade svarta bakgrunden också!
// Position och gömmer sig av "#closeZone". $ ('# closeZone') .css (position: 'absolut', övre: '0px', vänster: '0px', bredd: '100%', höjd: '100%', opacitet: '0,5' : '# 000'); Nu händer magiken! Genom att visa instrumentpanelen när #dashboardLaunch klickas,
Den närliggande zonen visas också. Denna bit av kod initierar dock bara
Instrumentbräda. För närvarande finns det inget sätt att fly den utom förfriskande - Close Zone
Jobb är nästa!
// Starta Dashboard + starta 'closeZone' $ ('# DashboardLaunch'). Klicka på (funktion () $ ('# dashboardWrapper') .show () .animate (opacity: '1', 300); ); 
> Den nära zonen får slutligen strålkastaren.
// closeZone jobb: flyr från instrumentpanelen $ ('# closeZone'). klicka (funktion () $ ('# dashboardWrapper') .animate (opacity: '0', 300) .hide (1);) ; Nu har detta en intressant anteckning. Av någon anledning kommer jQuery inte göra animationen
om inte ".hide" har en tid av en tiondel av en millisekund. Stor flyktbar funktionalitet!
Bortsett från nära zonen, den enda andra uppenbara sak som kommer att behöva fly
Dashboard med animering är om en länk klickas. På vilket sätt? Helt enkelt samma "funktion"
som med nära zon.
// fadeout på instrumentbrädan och när en länk klickas inom $ ('# dashboardWrapper a'), klicka (funktion () $ ('# dashboardWrapper'). animera (opacity: '0', 300);) ; Och det är allt! Din dashboard.js borde se något ut
den här js-filen
Som lovat, en enkel tryck i rätt riktning om hur man använder detta med WordPress.
I grund och botten är all kod så småningom HTML och JavaScript när det kommer till webbläsaren
slutet, eller hur? Ingen PHP, ingen ASP.NET, bara kanske en del XML. Denna princip är väsentlig
att förstå, eftersom det innebär att du kan använda kod till någon medium, försedd
den har samma ID och klasser.
Tänk på "#content" -delen av din WordPress-blogg, med en klass av 'draggableWindow'.
Ge det en h1 på toppen, och hej presto! Vågat inlägg. Sidospärren ges
ett ID (eller ändra det inom JS-koden) till "#dashboardWrapper", kommer det automatiskt att ske
gömma tills den heter. Det betyder att alla dina li widgets för arkiv och kategorier
och allt är nu separata widgets.
Även dynamiska sidofält har lis med specifika klasser, så att de kan stylas
som riktiga widgets! Dock, jag skulle säga är det enda som verkligen skulle behöva
läggas till. Oroa dig inte! På grund av sin positionering är det bara en div med en massa
bilder i den.
Om du vill att dina andra Dock-ikoner ska länka platser, kommer en inline-tagg inte att bryta något!
Den statiska HTML som spottas ut av WordPress (eller någon webteknologi, verkligen) är
gäller för alla CSS eller JS skapade, förutsatt att ID och klasser är inriktade.
Okej, sätt den frowny No-Extensive-JS-Usage Grandaddys i vila och gör ditt bästa inte
att använda jQuery i den utsträckningen. Denna handledning var bara för att visa hur mycket roligt animationen
kan verkligen vara, och hur enkelt det är att skapa effekter. Faktum är att om någon har sett
några effekter som jag gärna väntar till 5 har föreslagits och skriv en artikel om
hur man gör var och en!
