Share
jQuery legger til en hel del kult funksjonalitet til nettstedene dine. Det kan gjøre en rekke ting, fra animasjon til AJAX. Det er vanligvis frowned på å stole tungt på jQuery å designe nettstedene dine, men det er morsomt å gå vilt nå og da. I denne opplæringen lærer jeg deg hvordan du bruker jQuery til å lage et helt kodet Dashboard, akkurat som Leopard! Dette kan være nyttig ved å gjemme mange gadgets eller widgets du ikke har plass til!
Denne opplæringen har en rekke komponenter som kjører på den. En last av bilder, en tredje
Party Dock plugin, og UI.draggable jQuery komponent, sammen med, selvfølgelig,
jQuery-kjernen (v1.2.6). Merk: mange av bildene er sannsynligvis
opphavsrettsbeskyttet av sine eiere. Noen få dock-ikoner er tatt fra pakkene sine
og jeg har brukt Leopard Standard Wallpaper. Men de er [bakgrunnsbilder] utskiftbare!
Plasser alle disse i en katalog. En mappe som heter "bilder" (med bildene i),
en mappe som heter 'js' med JavaScript i den.
Planen for angrep for denne opplæringen er som følger. På skrivebordet vil det bli a
Draggable Window og en Dock. Det er en annen div som heter #dashboardWrapper that
skjuler når jQuery brukes. Det vil degradere uten JS, men ikke bra. JS planen
av angrep vil jeg forklare når vi kommer dit.
Bortsett fra ikonene som brukes, vil jeg også påpeke at dette ikke er så omfattende
å gå ut, få dynamiske widgets etc. Du kan gjøre det selv! Dette
bare gir grunnleggende "rammeverk" å jobbe med. Faktisk, da jeg begynte å skrive
denne opplæringen startet det som et WordPress-tema, med widgets som widgets
på dashbordet. Det er fortsatt mulig! Jeg skal forklare hvordan senere.
Opprett en fil som heter index.html. Dette blir siden som ser ut som Leopard.
Du må rel på alle JavaScript, og stilen.css vi lager senere. Bare
begynn med dette:
Leopard Dashboard
Siden har 3 minimumseksjoner. 2 Divs i #wrapper (et vindu og
faktisk dashbord), og docken utenfor omslaget. Legg til disse delene i:
Leopard Dashboard
Nå har vi våre 3 grunnleggende tomme divs. Vi må fylle dem med de respektive
innhold. Fordi det Draggable Window er bare et hvilket som helst gammelt vindu, kan du fylle det med
hva vil du. Jeg opprettet en TextEdit slags ting, det er bare i utgangspunktet en generisk
vindu med tekst. Det blir stylet senere! Plasser dette innenfor '.draggableWindow'.
Leopard Dashboard med jQuery
jQuery er kjempebra!
jQuery er ganske kult. Jeg mener, se på alle disse kule greiene det kan gjøre. En dock (hentet fra Wizzud.com! Takk!), Et dashbord og trekkbare vinduer! Rått! Hvis du ikke kom hit via det, er dette demo av en opplæring fra Nettuts.
Det er ikke noe problem, men det er ikke noe problem, men det er ikke et øyeblikk, og det er et problem for deg. Ut som et minimum, det er en utfordring å utøve arbeidet med å utvide ut fra dette. Duis aute irure dolor i reprehenderit i voluptate velit esse cillum dolore eu fugiat nulla pariatur. Uncepteur sint occaecat cupidatat non proident, sunt i culpa de officia deserunt mollit anim id er laborum.
Som sagt, dette er bare noen filler tekst for vinduet vårt. Ser bra ut, bare som
en ustilt side.
Neste fylling av innhold er Dashboard. I hovedsak kan dette være samme det
Du vil. Seriøst gutter, hvis du tar dette i egne hender, må du gå på nøtter. Du kan
stil alt du vil i dette, for å se ut som widgets. Som jeg sa, er det ikke omfattende,
det viser ikke faktiske widgets. Jeg vil forklare på slutten hvordan å integrere med WordPress.
Plasser dette i #dashboardWrapper:
En av widgets har litt tekst. Dette er bare for å vise at du kan gjøre hva du vil.
Behandle li er som divs! Sett hva som helst! En mini-blogg!
Til slutt trenger vi dokken. På grunn av arten av hvordan jqDock plugin fungerer, vi
kan ikke bruke en ul for det for enkelt. Smerte, va? Så i stedet er det bare noen få bilder
ved siden av hverandre i en div:
Se den med dashbordets IDLaunch? Det vil bli manipulert med jQuery senere
på.
Alt går etter planen, siden din burde ha en masse tekst og bilder. widgets
og ikoner, tekst og overskrifter. Det er alt søppel for øyeblikket.
CSS vil i hovedsak gjøre desktop en del av siden. Det vil inkludere
bakgrunnen, etc. La oss komme seg til det. Opprett en ny fil som heter 'style.css',
og legg den i samme katalog som de andre filene. Start redigering:
Jeg legger vanligvis til litt info på toppen av CSS med min tilbakestilling, så jeg vet hva filen er
til:
/ * Navn: Leopard Forfatter: Nettuts / Harley Alexander Beskrivelse: For en veiledning på http://net.tutsplus.com/, er det rettet mot å vise hvordan jQuery og jQuery UI kan skape et web-skrivebord i leopardstil. Selv om det er grunnleggende, inkompilerer det Dashboard og Windows! * / * margin: 0; polstring: 0; en farge: # 005693;
Enkel. Neste opp, kroppen og vindus styling:
kropp bakgrunn: url (images / background.jpg) no-repeat center top; font: 75% / 18px "Lucida Grande", Lucida, Verdana, sans-serif; overløp: skjult; .draggableWindow width: 500px; overløp: auto; klare: begge; polstring: 0 20px; flyte: venstre; margin: 40px; .draggableWindow h1 bredde: 100%; høyde: 21px; flyte: venstre; skriftstørrelse: 10px; tekst-align: center; tekstindeks: -67px; bakgrunn: url (bilder / h1long.png) no-repeat; tekstskygge: #fff 1px 0 1px; markør: standard; .draggableWindow h1 span width: 67px; høyde: 21px; flyte: venstre; bakgrunn: url (bilder / h1short.png) no-repeat left; .content bakgrunn: hvit; polstring: 36px; .content h2 margin-bottom: 1em; #mindre bredde: 300px; flyte: høyre; margin: 10px; margin-topp: -100px;
alt forholdsvis enkelt. Måten h1s er kodet med de foregående brukerne
skyvedørsteknikken for å sikre at topplinjen tilpasses tilsvarende. De
ID # smaller var en annen liten modal boks jeg laget, bare for å sjekke det fungerte. Å sjekke
selv, bare opprett en ny div med ID # smaller, og med et h1 / # innhold
div, du kan skrive en kort melding. Fordi #smaller er definert for å være en bredde
av 300px, det er bare det - en liten modalboks.
Bare noen få stiler er nødvendig for selve dashbordet. Bare for å lage listeposten
widgets ser pent ut, og stil notisblokk-widgeten!
.widget posisjon: relative; z-indeks: 9999; flyte: venstre; margin: 1em; listestil: none; #notepad polstring: 10px 20px; bredde: 185px; høyde: 191px; bakgrunn: url (bilder / widgets / sticky.png) no-repeat center; skriftstørrelse: 10px;
Generelt er det meste av Docks CSS gjort i jQuery Plugin, men for nedbrytbart
grunner og * grov * sentrering, trenger den fortsatt litt av sin egen CSS:
#dock posisjon: fast; margin: 0 auto; bunn: 36px; venstre: 37,5%; min bredde: 20px; maksimal bredde: 400px; z-indeks: 9999; #dock img float: left;
Og etter all den koden, (men fortsatt grov som tarm!) Bør Leopard Desktop
se noe slikt ut:
Woohoo! Den morsomme delen! For alle de nettlordene som forakter overforbruk av JS, beklager jeg
men du vinner noe du lærer litt hm? Nå grunnen til at jeg ønsket å skrive denne opplæringen
så ille er fordi det faktisk gjorde meg synes at for å gjøre det
- Ikke å si annet arbeid gjør det ikke! Dette måtte jeg bare tenke veldig lateralt
for å komme til det ferdige produktet. Jeg vil takknemlig kunne bruke det til andre prosjekter
- Vi håper du gjør det også!
Før jeg starter jQuery skriver jeg alltid en engelsk versjon av det som trengs. Som en regel
av tommelen.
Heldigvis (eller dessverre, avhengig av hvordan du ser på det) viser det seg etterpå
finne ut det er litt mer til det som det. Opprett en fil som heter 'dashboard.js',
og legg den i JS-katalogen. JS-filen reeled for lenge siden (opp i HTML
delen) er nå der! Begynn å redigere!
Start alltid med et dokument.ready ()!
// Navn: jQuery -> Leopard $ (dokument) .ready (funksjon () );
Tungt kommenterte, og dermed selvforklarende. Start i utgangspunktet docken, start på
draggables:
Accentsconagua
// launch dock $ ('# dock'). jqDock (); // draggables defenition $ ('. widget'). draggable (); $ ('draggableWindow'). Draggable (håndtak: 'h1'); Hvis du ser på docken din, zoomer den (eller det bør likevel)! Merk:
Vi her på Nettuts vil nok ikke hjelpe deg for mye med denne teknologien,
som det er Wizzuds jobb! Du bør også kunne
å dra rundt de viste widgetene og dialogvinduet (bare ved h1 langs
toppen som håndtaket!).
> Eh? Lukk Zone? Se om du bare fortalte jQuery å lukke Dashboard når #dashboardWrapper
ble klikket i allikevel (inkludert widgets blir klikket), da ble det vondt
fordi du ikke faktisk kunne flytte rundt på widgets. Så en "Lukk Zone" trenger å
bli opprettet som er en søsken til widgets (ikke plassert rundt) som tar en z-indeks
av mindre enn widgets, men mer enn skrivebordet. Vanskelig, va? The Layering Looks
noe sånt som dette:
> Mye CSS brukes. Dette er å utvide Dashboard for å passe til den faktiske nettleseren
vindu og angi opacity til 0 slik at animasjonen kan fade det inn. Skjuler hele
element fra visning også.
// første skjul av dashbordet + tillegg av 'closeZone' $ ('# dashboardWrapper') .css (posisjon: 'absolutt', topp: '0px', venstre: '0px', bredde: '100%', høyde: '100%', opacity: '0') .hide () .append (''); Lett peasy!
Som #dashboardWrapper må Lukksonen blåses opp for å fylle vinduet.
The Close Zone er det som faktisk har den semi-trasparent svart bakgrunnen også!
// Posisjon og gjemmer seg for '#closeZone'. $ ('# closeZone') .css (posisjon: 'absolutt', topp: '0px', venstre: '0px', bredde: '100%', høyde: '100%', opacity: '0.5' : '# 000'); Nå skjer magien! Ved å vise Dashboard når #dashboardLaunch er klikket,
Den nærliggende sonen blir også vist. Denne koden, men bare initierer
Dashboard. For øyeblikket er det ingen måte å unnslippe det unntatt forfriskende - Lukk Zone
Jobb er neste!
/ Launch Dashboard + start av 'closeZone' $ ('# dashboardLaunch'). Klikk (funksjon () $ ('# dashboardWrapper') .show () .animate (opacity: '1', 300); ); 
> Den nærtliggende sonen får endelig søkelyset.
// closeZone jobber: escaping Dashboard $ ('# closeZone'). Klikk (funksjon () $ ('# dashboardWrapper') .animate (opacity: '0', 300) .hide (1);) ; Nå har dette et interessant notat. Av en eller annen grunn vil jQuery ikke gjøre animasjonen
med mindre ".hide" har en tid på en tiendedel av en millisekund. Flott, flyktbar funksjonalitet!
Bortsett fra nærsonen, den eneste andre åpenbare tingen som må unnslippe
Dashbordet med animasjon er hvis en lenke klikkes. Hvordan? Bare den samme "funksjonen"
som med nærområdet.
// fadeout på dashbordet og når en lenke klikkes innenfor $ ('# dashboardWrapper a'). klikk (funksjon () $ ('# dashboardWrapper'). animate (opacity: '0', 300);) ; Og det er det! Dashboard.js din bør se ut som om
denne js-filen
Som lovet, et enkelt trykk i riktig retning om hvordan du bruker dette med WordPress.
I utgangspunktet er all kode til slutt HTML og JavaScript når det kommer til nettleseren
slutt, ikke sant? Ingen PHP, ingen ASP.NET, bare kanskje noen XML også. Dette prinsippet er avgjørende
å forstå, som det betyr at du kan bruke kode til noen medium, sørget for
den har de samme IDene og klassene.
Vurder "#content" div av WordPress blogg, gitt en klasse av 'draggableWindow.
Gi det en h1 på toppen, og hei presto! Vindkastet innhold Sidefeltet, gitt
en ID (eller endre den i JS-koden) til "#dashboardWrapper", vil den automatisk
skjul til kalt. Det betyr at alle dine li widgets for arkiver og kategorier
og alt er nå separate widgets.
Selv dynamiske sidebar har lis med bestemte klasser, slik at de kan styles
som ekte widgets! Dock, jeg vil si er det eneste som faktisk ville trenge
legges til. Ikke vær redd! På grunn av sin posisjonering er det bare en div med en haug med
bilder i den.
Hvis du vil at de andre Dock-ikonene skal knytte steder, vil ikke en inline-tag bryte noe!
Den statiske HTML som er spyttet ut av WordPress (eller hvilken som helst webteknologi, egentlig) er
gjeldende for alle CSS eller JS opprettet, forutsatt at IDene og klassene er justert.
OK, sett den frowny No-Extensive-JS-Usage Grandaddys i ro, og gjør ditt beste ikke
å bruke jQuery i denne grad. Denne opplæringen var bare for å vise hvor mye moroa animasjonen
kan virkelig være, og hvor enkelt det er å skape effekter. Faktisk, hvis noen har sett
eventuelle effekter jeg vil vente til 5 er blitt foreslått og skrive en artikkel om
hvordan å gjøre hver!
