Share
jQuery voegt een heleboel coole functionaliteit toe aan je websites. Het kan verschillende dingen doen, van animatie tot AJAX. Het wordt meestal afgekeurd om sterk afhankelijk te zijn van jQuery om je sites te ontwerpen, maar het is leuk om zo nu en dan wild te gaan. In deze zelfstudie leer ik je hoe je jQuery gebruikt om een volledig gecodeerd Dashboard te maken, net als Leopard! Dit kan handig zijn bij het verbergen van een heleboel gadgets of widgets waar je geen ruimte voor hebt!
In deze zelfstudie worden een aantal componenten gebruikt. Een lading afbeeldingen, een derde
party Dock-plug-in, en de UI.draggable jQuery-component, samen met natuurlijk,
de jQuery-kern (v1.2.6). Notitie: veel van de afbeeldingen zijn waarschijnlijk
auteursrechtelijk beschermd door hun eigenaars. Er zijn enkele dokpictogrammen uit hun pakketten gehaald
en ik heb de standaard Leopard-achtergrond gebruikt. Maar ze zijn [wallpapers] uitwisselbaar!
Plaats deze allemaal in een map. Een map genaamd 'images' (met de afbeeldingen binnenin),
een map genaamd 'js' met daarin het JavaScript.
Het aanvalsplan voor deze zelfstudie is als volgt. Op de desktop zal er een
Draggable Window en een Dock. Er is nog een div genaamd #dashboardWrapper die
verbergt zich wanneer de jQuery wordt gebruikt. Het zal degraderen zonder JS, maar niet goed. Het JS-plan
van aanval zal ik uitleggen wanneer we daar aankomen.
Afgezien van de pictogrammen die worden gebruikt, wil ik er ook op wijzen dat dit niet zo uitgebreid is
om alles uit te gaan, dynamische widgets etc. te krijgen. Dat kun je zelf doen! Deze
biedt gewoon het basis 'raamwerk' om mee te werken. Sterker nog, toen ik begon te schrijven
deze zelfstudie begon als een WordPress-thema, met de widgets als de widgets
op het dashboard. Het is nog steeds mogelijk! Ik zal later uitleggen hoe.
Maak een bestand met de naam index.html. Dit wordt de pagina die op Leopard lijkt.
U moet alle JavaScript opnieuw gebruiken en de styles.css die we later zullen maken. Net
begin met dit:
Leopard Dashboard
De pagina heeft dan 3 minimale secties. 2 divs binnen de #wrapper (een venster en de
werkelijke dashboard), en het dock buiten de verpakking. Voeg deze secties toe in:
Leopard Dashboard
Nu hebben we onze 3 basic lege divs. We moeten ze opvullen met de respectieve
inhoud. Omdat het Draggable-venster zomaar een oud venster is, kunt u het invullen
wat je wilt. Ik heb een TextEdit-soort gemaakt, dat is eigenlijk gewoon een soortnaam
venster met tekst. Het wordt later gestyled! Plaats dit in het '.draggableWindow'.
Leopard Dashboard met jQuery
jQuery is geweldig!
jQuery is best wel cool. Ik bedoel, kijk naar al deze toffe dingen die het kan doen. Een dok (afkomstig van Wizzud.com! Bedankt!), Een dashboard en versleepbare vensters! Geweldig! Als je hier niet via bent gekomen, is dit de demo van een tutorial van Nettuts.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimus veniam, quis nostrud exercise ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 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.
Zoals gezegd is dit slechts een vullere tekst voor ons venster. Lijkt nogal grof, net als
een unstyled pagina.
Het vullen van de volgende inhoud is het Dashboard. In wezen kan dit zijn wat dan ook
Jij wil. Serieus jongens, als je dit in je eigen handen neemt, word gek. Jij kan
style alles wat je wilt binnen dit om eruit te zien als widgets. Zoals ik al zei, het is niet uitgebreid,
het toont geen echte widgets. Ik zal aan het einde uitleggen hoe te integreren met WordPress.
Plaats dit in #dashboardWrapper:
Een van de widgets heeft wat tekst. Dit is slechts om te laten zien dat je kunt doen wat je wilt.
Behandel de li's als divs! Doe wat! Een mini-blog!
Eindelijk hebben we het dok nodig. Vanwege de aard van hoe de jqDock-plug-in werkt, wij
kan het niet te gemakkelijk gebruiken. Pijn, hè? Dus in plaats daarvan zijn het slechts een paar afbeeldingen
naast elkaar in een div:
Zie degene met de id van dashboardLaunch? Dat zal later met jQuery worden gemanipuleerd
op.
Alles verloopt volgens plan, je pagina zou een hoop tekst en afbeeldingen moeten bevatten. widgets
en pictogrammen, tekst en headers. Het is allemaal rommel op dit moment.
De CSS maakt in wezen de desktop deel van de pagina. Het zal omvatten
de achtergrond, enz. Laten we erop toezien. Maak een nieuw bestand met de naam 'style.css',
en plaats het in dezelfde map als de andere bestanden. Begin met bewerken:
Ik voeg over het algemeen wat info toe bovenaan mijn CSS bij mijn reset zodat ik weet wat het bestand is
voor:
/ * Naam: Leopard Auteur: Nettuts / Harley Alexander Beschrijving: voor een zelfstudie op http://net.tutsplus.com/ is het bedoeld om te laten zien hoe jQuery en jQuery UI een webbureaublad in luipaardstijl kunnen maken. Hoewel het standaard is, is Dashboard en Windows incompatibel! * / * marge: 0; opvulling: 0; a color: # 005693;
Eenvoudig. Vervolgens de vormgeving van het lichaam en het venster:
body background: url (images / background.jpg) no-repeat center top; lettertype: 75% / 18px "Lucida Grande", Lucida, Verdana, schreefloos; overloop verborgen; .draggableWindow width: 500px; overloop: automatisch; beiden opschonen; opvulling: 0 20px; zweven: links; marge: 40px; .draggableWindow h1 width: 100%; hoogte: 21 px; zweven: links; lettergrootte: 10px; text-align: center; tekst-inspringing: -67px; achtergrond: url (images / h1long.png) geen herhaling; text-shadow: #fff 1px 0 1px; cursor: standaard; .draggableWindow h1 span width: 67px; hoogte: 21 px; zweven: links; achtergrond: url (images / h1short.png) no-repeat links; .content background: white; opvulling: 36px; .content h2 margin-bottom: 1em; #smaller width: 300px; zweven: rechts; marge: 10px; margin-top: -100px;
allemaal relatief eenvoudig. De manier waarop de h1s gecodeerd zijn met de voorgaande gebruikt ze
de techniek van de schuifdeuren om ervoor te zorgen dat de bovenste balk dienovereenkomstig wordt aangepast. De
ID #smaller was een andere kleine modale doos die ik heb gemaakt, gewoon om te controleren of het werkte. Controleren
creëer gewoon een nieuwe div met de ID van #smaller en met een h1 / # -inhoud
div, je kunt een kort bericht typen. Omdat #smaller is gedefinieerd als een breedte
van 300px, het is gewoon dat - een kleine modale doos.
Er zijn slechts een paar stijlen nodig voor het eigenlijke dashboard ... Gewoon om het lijstitem te maken
widgets zien er mooi uit en stylen de notepad-widget!
.widget positie: relatief; z-index: 9999; zweven: links; marge: 1em; lijststijl: geen; #notepad opvulling: 10px 20px; breedte: 185 px; hoogte: 191 px; achtergrond: url (images / widgets / sticky.png) no-repeat center; lettergrootte: 10px;
Over het algemeen wordt de meeste CSS van het Dock in de jQuery-plug-in gedaan, maar voor afbreekbaar
redenen en * ruw * centreren, heeft het nog steeds een beetje van zijn eigen CSS nodig:
#dock position: fixed; marge: 0 auto; onderaan: 36px; links: 37,5%; minimale breedte: 20 px; maximale breedte: 400 px; z-index: 9999; #dock img float: links;
En na al die code, (hoewel nog steeds ruig als lef!) Zou je Leopard Desktop dat moeten doen
er ongeveer zo uitzien:
Woohoo! Het leuke deel! Ook al die web-heren die overmatig gebruik van JS verachten, bied ik mijn excuses aan
maar je wint wat, je leert wat hm? Nu de reden dat ik deze tutorial wilde schrijven
zo erg is omdat het me echt heeft gemaakt denken om het te maken
- om niet te zeggen dat ander werk dat niet doet! Dit moest ik eigenlijk heel lateraal denken
om bij het eindproduct te komen. Dankbaar zal ik dat kunnen toepassen op andere projecten
- laten we hopen dat je het ook doet!
Voordat ik jQuery start, schrijf ik altijd een Engelse versie van wat nodig is. Als een regel
van Thumb.
Gelukkig (of helaas, afhankelijk van hoe je ernaar kijkt) blijkt het na
het uitzoeken er is een beetje meer dat dat. Maak een bestand met de naam 'dashboard.js',
en plaats het in de JS-map. Het JS-bestand werd eeuwen geleden opgerold (hoger in de HTML
sectie) is er nu! Begin met bewerken!
Begin altijd met een document.ready ()!
// Naam: jQuery -> Leopard $ (document) .ready (function () );
Zwaar becommentarieerd, dus vanzelfsprekend. Start in feite het dok, start het
draggables:
Accentsconagua
// start dock $ ('# dock'). jqDock (); // draggables defenition $ ('. widget'). draggable (); $ ('. draggableWindow'). draggable (handle: 'h1'); Als je nu naar je dock kijkt, zoomt hij in (of het zou toch moeten)! Notitie:
wij hier bij Nettuts zullen u waarschijnlijk ook niet te uitgebreid helpen met dit stukje technologie,
want dat is Wizzud's Job !. Je zou ook in staat moeten zijn
om de weergegeven widgets en het dialoogvenster te slepen (alleen door de h1 mee
de bovenkant als handvat!).
> Eh? Sluiten Zone? Kijk of je jQuery gewoon hebt verteld om het Dashboard te sluiten als de #dashboardWrapper
er werd in ieder geval geklikt (inclusief widgets waarop geklikt werd), dan zou het lastig worden
omdat je de widgets niet echt kon bewegen. Dus een 'Close Zone' moet dit doen
worden gemaakt dat is een broer of zus van de widgets (niet genesteld rond) die een z-index neemt
van minder dan de widgets, maar meer dan de desktop. Lastig, hè? The Layering Looks
iets zoals dit:
> Er wordt veel CSS gebruikt. Dit is om het Dashboard uit te breiden naar de daadwerkelijke browser
venster en zet de dekking op 0 zodat de animatie deze kan laten vervagen. Verbergt het geheel
element ook uit het zicht.
// aanvankelijk verbergen van dashboard + toevoeging van 'closeZone' $ ('# dashboardWrapper') .css (positie: 'absoluut', top: '0px', links: '0px', width: '100%', height: '100%', dekking: '0') .hide () .append (''); Makkelijk!
Zoals #dashboardWrapper, moet de Close Zone worden opgeblazen om het venster te vullen.
De Close Zone is eigenlijk de semi-trasparent zwarte achtergrond!
// Positie en verbergen van '#closeZone'. $ ('# closeZone') .css (position: 'absolute', top: '0px', links: '0px', width: '100%', height: '100%', opacity: '0.5', background : '# 000'); Nu gebeurt de magie! Door het Dashboard weer te geven wanneer op #dashboardLaunch wordt geklikt,
de Close Zone wordt ook getoond. Dit stukje code initieert echter alleen de
Dashboard. Momenteel is er geen manier om eraan te ontsnappen, behalve verfrissing - Close Zone's
Job is de volgende!
// Dashboard starten + initiatie van 'closeZone' $ ('# dashboardLaunch'). Klik (functie () $ ('# dashboardWrapper') .show () .anim (opacity: '1', 300); ); 
> De Close Zone komt eindelijk in de kijker.
// closeZone's taak: ontsnappen aan het dashboard $ ('# closeZone'). klik (functie () $ ('# dashboardWrapper') .anim (opacity: '0', 300) .hide (1);) ; Dit heeft nu een interessante opmerking. Om een of andere reden zal jQuery de animatie niet doen
tenzij de '.hide' een tijd heeft van een tiende van een milliseconde. Zeer gemakkelijk in gebruik!
Afgezien van de Close Zone, het enige andere voor de hand liggende ding dat zal moeten ontsnappen
het Dashboard met animatie is als op een link wordt geklikt. Hoe? Gewoon dezelfde 'functie'
zoals met de Close Zone.
// fadeout van dashboard en wanneer op een link wordt geklikt binnen $ ('# dashboardWrapper a'). klik (functie () $ ('# dashboardWrapper'). anim (opacity: '0', 300);) ; En dat is het! Uw dashboard.js zou er ongeveer zo uit moeten zien
dit js-bestand
Zoals beloofd, een simpele duw in de goede richting over hoe dit te gebruiken met WordPress.
In principe is alle code uiteindelijk HTML en JavaScript wanneer deze in de browser terechtkomt
einde, toch? Geen PHP, geen ASP.NET, misschien ook wat XML. Dit principe is essentieel
om te begrijpen, want het betekent dat je code kunt toepassen op elke medium, voorzien
het heeft dezelfde ID's en klassen.
Beschouw de '#content'-div van uw WordPress-blog, met een klasse' draggable Window '.
Geef het een h1 aan de bovenkant, en hey presto! Windowed Post Content. De zijbalk, gegeven
een ID (of verander het in de JS-code) van '#dashboardWrapper', het zal automatisch
verstoppen totdat je wordt gebeld. Dat betekent dat al uw li widgets voor archieven en categorieën
en alles is nu aparte widgets.
Zelfs dynamische sidebars hebben lis met specifieke klassen, waardoor ze gestyled kunnen worden
zoals echte widgets! Het Dock, zou ik zeggen, is het enige dat echt nodig zou hebben
worden toegevoegd. Geen zorgen! Vanwege zijn positionering is het slechts een div met een aantal
afbeeldingen erin.
Als u wilt dat uw andere Dock-pictogrammen plaatsen koppelen, zal een inline-tag niets breken!
De statische HTML die wordt uitgespuwd door WordPress (of een webtechnologie, echt) is
van toepassing op elke gecreëerde CSS of JS, mits de ID's en klassen zijn uitgelijnd.
OK, zet de fronsen No-Extensive-JS-Usage Grandaddys in rust, en doe je best niet
om jQuery in deze mate te gebruiken. Deze tutorial was slechts om te laten zien hoe leuk de animatie is
kan echt zijn, en hoe eenvoudig het is om effecten te creëren. In feite, als iemand het heeft gezien
eventuele effecten die ik gewillig zal wachten tot 5 zijn voorgesteld en een artikel schrijven over
hoe elk te doen!
