"kreativt" sejlads med jquery,,,,, 4,,,,,,,,, 22,,,,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss.,, næsten alle websted anvender regelmæssig sejlads begreber, vi er vant til.efter et stykke tid, det kan blive ret kedeligt, især for designere, som trives på kreativitet.samtidig med, at efterligne os x dock, og stak, er ikke nyt, det er ikke fælles.,,,,,, for et par dage siden, jeffrey skrev om en potentiel "kreativt" konkurrence på themeforest til fremme af forfatterne til at sætte på deres kreativitet hatte og design brugbare modeller med "kreativt" kreativ design.i denne lektion, jeg vil dække et par måder at gøre det med os x stil dokker og stabler navigation.,, kilder og kreditter, før vi begynder, vil jeg gerne sende en hilsen til et par fyre, der kom til undsætning, når de hørte min opfordring til at hjælpe på twitter.steve har ajourført de stakke manuskript af harley fra ved hjælp af jquery fra at bruge den nuværende 1.3.2 frigivelse og rey kom fra jquery holdet hjalp mig lave et insekt.de sprang til opgave inden for et par minutter af mit råb om hjælp fra twitter.tak, en masse fyre!(bifald): - d, originale kilder, "at lægge vores leopard desktopcomputer med jquery" af harley via net.tutsplus.com interface: jeg er erklæret for "ude" menu, jqdock v1.2, f.eks. model (internet - leksikon) af luka cvrk, hurtigt bemærker de manuskripter baseret på jquery 1.3.2.eksemplerne viser, er forenelige med alle større browsere, herunder ie6 og er let at sikre mod nedværdigende, hvis javascript er afbrudt eller handicappede. jquery os x dock
(horisontale), den første bro bygger vi bruger jquery jeg er erklæret for "ude" menu stik af ovennævnte.det er ret let (~ 7kb med tilhørende områder), men den vigtigste grund til, at jeg ønskede at bruge dette, fordi det er utrolig smidig, ingen stammen.betragtning demo.,,,,, så du kan se i demo, det er utrolig smidig og lydhør.ulempen er, at du ikke kan bruge faste placering af det, hvis den side skal rulle, som det vil bryde.hvis du ikke har brug for det faste i browseren vindue, så det virker fint.,, det er et godt eksempel på "kreativt" begreber i websteder og giver en interaktiv og sjov - grænsefladen.,, der er nødvendige filer (jeg har samlet de jeg er erklæret for "ude" stik af og iutil.js i demo - filer).,, jquery 1.3.2. grænseflade: jeg er erklæret for "ude" menu stik af, grænseflade: iutil.js (afhængighed)http: //, vi pakker vores billeder og titler i forbindelser og placere dem inden for en med. så vi pakker det hele i en anden, der indeholder div til at fungere ordentligt, < div id = "kajen" > < div klasse = "dock beholder" > < en klasse = "dock punkt" href = "index.html" > < span > f.eks   1 < /span > < img src = "http://nettuts.s3.amazonaws.com/358_jquery/images/dock/home.png alat =" h "ome" /></a> \t\t<a class="dock-item" href="example2.html"><span>Example 2</span><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/dock/email.png" alt="contact" /></a> \t\t<a class="dock-item" href="example3.html"><span>Example 3</span><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/dock/portfolio.png" alt="portfolio" /></a> \t\t<a class="dock-item" href="all-examples.html"><span>All Examples</span><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/dock/music.png" alt="music" /></a> \t\t<a class="dock-item" href="#"><span>Video</span><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/dock/video.png" alt="video" /></a> \t\t<a class="dock-item" href="#"><span>History</span><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/dock/history.png" alt="history" /></a> \t\t<a class="dock-item" href="#"><span>Calendar</span><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/dock/calendar.png" alt="calendar" /></a> \t\t<a class="dock-item" href="#"><span>Links</span><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/dock/link.png" alt="links" /></a> \t\t<a class="dock-item" href="#"><span>RSS</span><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/dock/rss.png" alt="rss" /> < /a > < en klasse = "dock punkt" href = "#" > < span > rss2 < /span > < img src = "http://nettuts.s3.amazonaws.com/358_jquery/images/dock/rss2.png" alat = "rss" /> og lt; /a > < /div > <!- stopper div. dock container - > < /div > <!- stopper div. dok&#dok. >, opmærksom på, at jeg har lagt de afsnit i tid, så vi kan stil dem samt give stik af at skjule /vise dem som nødvendigt, css med css vil vi holdning kajen, hvor vi vil have det på den side.vi kan ikke bruge faste placering i det stik af, eller vil det ikke fungere ordentligt, dock container (holdning: relativ; top. - 8px. højde: 50px; polstring til venstre: 20px;} a.dock-item (display: blok; bredde: 50px. position: absolut; nederst: 0; tekst tilpasse center; tekst: pynt: ingen; farve:ō.}. dock punkt levetid (display: ingen; polstring tilbage: 20px;} dock punkt img {grænse: 0; margen: 5px 10px 0px; bredde: 100%), og jeg har også sat lidt ekstra css i hovedet på side under css er omfattet af ovenstående.jeg har pakket det i noscript mærker i tilfælde af en gæst har ikke javascript aktiveret eller til rådighed, vil det stadig være et brugbart navigation.jeg vil gerne påpege, at dette ikke vil godkende, fordi de noscript mærke, ikke er gyldige i hoved punkt, selv om det virker i alle de nuværende browsere.; -),&#dock (top. - 32px;} a.dock-item {holdning: relativ; flyde: venstre margen. 10px;} dock punkt levetid (display: blok.}, javascript, tager vi i vores javascript filer nu begynder med jquery 1.3.2.den fisheye-iutil.min.js fil er kombinationen af jeg er erklæret for "ude" stik af og de heraf afhængige iutil.js fil.vi skal skabe de sidste fil og sætte vores javascript nødvendigt at aktivere havnen i., < manuskript type = "tekst /javascript" src = "http: //ajax. googleapis. kom /ajax /libs /jquery /1.3.2 /jquery. min.js" > < /manuskript > < manuskript type = "tekst /javascript" src = "js /jeg er erklæret for" ude "iutil. min.js" > < /manuskript > vi vil aktivere kajen når side belastninger.du kan bruge flere stik af muligheder for at vælge dem som du har brug for til anbringelse og funktioner.du kan se den dokumentation, som besøger webstedet, der er opført under kilder, for jeg er erklæret for "ude" stik af. $(funktion () (//dock påbegynd $('# dock). jeg er erklæret for "ude" ((maxwidth: 30, poster: a, itemstext: "levetid" container:. dock beholder, itemwidth: 50, nærhed: 60, tilpasning: "tilbage", valign: bottom ", halign:" center "})}); det er alt der er til det.- d,,, jquery os x dock (vertikale), den horisontale dock var let og sikkert en god idé at bruge på websteder.de er sandsynligvis den mest almindelige type, der anvendes i hele nettet for tiden, så lad os prøve noget anderledes.vi kunne få lidt mere "kreativt", hvis vi har en vertikal dock navigation.,, her er afhængig af jqdock jquery stik af. det er ca. 10kb i størrelse, så er det et par kb større end i den tidligere udgave, men det er ikke meget.den ulempe, at det stik af, er, at det ikke er helt så glat som jeg er erklæret for "ude" stik af dock, selv om den stadig er meget flydende og anvendelige.dette stik af har heller ikke problemer med fast placering.betragtning demo.,, html, sætter vi vores billeder i en unordered liste og pak dem på bånd.As with the last plugin, we'll wrap everything within a containing div. When we initialize the plugin we'll use the "ul" here., <div id="dockContainer"> \t<ul id="jqDock"> \t\t<li><a class="dockItem" href="index.html"><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/dock/home-sm.png" alt="Home" title="Example 1" /></a></li> \t\t<li><a class="dockItem" href="example2.html"><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/dock/email-sm.png" alt="Contact" title="Example 2" /></a></li> \t\t<li><a class="dockItem" href="example3.html"><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/dock/portfolio-sm.png" alt="portfolio" title="Example 3" /></a></li> \t\t<li><a class="dockItem" href="all-examples.html"><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/dock/music-sm.png" alt="music" title="All Examples" /></a></li> \t\t<li><a class="dockItem" href="#"><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/dock/video-sm.png" alt="video" title="Video" /></a></li> \t\t<li><a class="dockItem" href="#"><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/dock/history-sm.png" alt="history" title="History" /></a></li> \t\t<li><a class="dockItem" href="#"><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/dock/calendar-sm.png" alt="calendar" title="Calendar" /></a></li> \t\t<li><a class="dockItem" href="#"><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/dock/link-sm.png" alt="links" title="Links" /></a></li> \t\t<li><a class="dockItem" href="#"><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/dock/rss-sm.png" alt="rss" title="RSS" /></a></li> \t\t<li><a class="dockItem" href="#"><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/dock/rss2-sm.png" alt="rss" title="RSS" /></a></li> \t</ul> </div><!- stopper div&#dockcontainer - >, ser du, den her har vi ikke titler, pakket ind i span hundetegn.i stedet, så stik af, vil se på "titel" mærkat, der er fastsat for hver image og skabe titler på den måde (hvis muligt i stik af muligheder).det er avancen lidt enklere, men gør også titler lidt mindre customizable., css, vi holdning i havnen i venstre side (kan være enten side) med fast placering.vi vil give det et lille rum mellem sig selv og toppen af browser vindue for æstetik og så ikonerne forsvinder ikke, når udvidede.,&#dockcontainer {holdning: faste, top. 60px; tilbage: 6px;}&#jqdock {holdning: relativ; nederst: 48px.}. jqdocklabel {baggrund:ō farve:&#fff; polstring: 3px 10px; - webkit grænse radius: 10px; - moz grænse radius: 10px;}, stil titler, vi kan bruge ". jqdocklabel" klasse.vi behøver ikke at indeholde nogen ekstra styles, for at det kan stadig være nyttige med javascript handicappede.det kan ikke være meget kønt, men det virker. det javascript, tager vi i jquery bibliotek, ligesom de foregående havn samt stik af. < manuskript type = "tekst /javascript" src = "js /jquery. jqdock. min.js" > < /manuskript > vi nulstille dokke og sætte et par muligheder for at bygge det.du kan læse den dokumentation for disse indstillinger ved at besøge stedet, der er opført under kilder i begyndelsen af ministeriet for jqdock.hvad jeg gerne vil understrege her, er varigheden mulighed.det er tid for forstørrelse informationstiltag i millisekunder.det er rart at være i stand til at ændre varigheden hastighed, men det ser ud til at få en lille stuttery, hvilket er noget, jeg hader. $(function() {var jqdockopts = {linje: "venstre", varighed: 200, etiketter: tc, størrelse: 48, afstand: 85 $('#} jqdock'). jqdock (jqdockopts)}), kan man nemt ændre placeringen af kajen og etiketter, såvel som den oprindelige størrelse af ikonerne og et par andre muligheder.hvad jeg ikke kan lide ved det stik af, er, at det forstørrer den fulde størrelse af ikon.den tidligere stik af, giver dig mulighed for at ændre den størrelse, det forstørrer det.det er alt der er til det.,,, jquery os x stak og smid skorsten, det er sikkert min favorit navigation stil ud af tre vist i denne forelæsning.det er super letvægts (~ 1kb) og er en virkelig kreativ "kreativt" metode til navigation, til en hjemmeside.det er måske lidt akavet under sejlads i nederste højre eller venstre i browseren vindue, men det ville helt sikkert være kreative og redde masser af plads.betragtning demo.,, samtidig med at skrive det, indså jeg, at der er sikkert mange, der ikke kan lide deres navigation på bunden af siden, så jeg tog et par ekstra minutter og tilføjede en ud stak til f.eks. filer.på denne måde sejlads springs ud fra top til bund, så det kan bruges på toppen af sider.,,, demo.,, html, html er lige så enkelt som to dock eksempler.We'll place everything in a containing div and place all our images and titles, which are wrapped in links, within an unordered list., <div class="stack"> \t<img src="http://nettuts.s3.amazonaws.com/358_jquery/images/stacks/stack.png" alt="stack" /> \t<ul id="stack"> \t\t<li><a href=""><span>Aperture</span><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/stacks/aperture.png" alt="Aperature" /></a></li> \t\t<li><a href="#"><span>All Examples</span><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/stacks/photoshop.png" alt="Photoshop" /></a></li> \t\t<li><a href="example3.html"><span>Example 3</span><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/stacks/safari.png" alt="Safari" /></a></li> \t\t<li><a href="example2.html"><span>Example 2</span><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/stacks/coda.png" alt="Coda" /></a></li> \t\t<li><a href="index.html"><span>Example 1</span><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/stacks/finder.png" alt="Finder" /></a></li>\t\t\t \t</ul> </div><!- stopper div. stak... >, opmærksom på, at jeg har lagt et billede før unordered liste.det er kurven image, at resten af ikoner er stablet bag., css, tager vi stilling de vigtigste beholder og sørge for, at den kurv billede har en højere z-index end unordered liste, så alt stakke bag det.bemærker også, at jeg har givet den kurv image 35px polstret.dette forhindrer ikoner bag kurven fra at være faldet siden kurven image er kortere end ikoner.hvis du ændre kurven ikon til noget højere, så du bliver nødt til at ændre polstring.,. stak {holdning: faste og nederst: 28px; ret: 40px;}. stak > img {holdning: relativ; markør: pointer, polstring top: 35px; z-index: 2}. stak ul (liste stil: ingen. position: absolutte, top. 5px; markør: pointer, z-index: 1}. stak ul li {holdning: absolut;}. stak ul li img {grænse: 0}. stak ul li levetid (display: ingen;}. stak. openstack li levetid (font familie "lucida grande", lucida, verdana, uden serif; display: blok. højde: 14px. position: absolutte, top. 17px; ret: 60px; linje højde: 14px; grænse: 0; baggrund farve:� polstring: 3px 10px; grænseoverskridende radius: 10px; - webkit grænse 10px radius:;- moz grænse radius: 10px; farve:&#fcfcfc; tekst tilpasse: center; tekst skygge:� 1px 1px 1px; uklarhed: 85; filter: alfa (uklarhed = 85)} /* dvs. fastsætter * /. stak {_position: absolut;}. stak ul (_z-index: - 1. _top: - 15px;}. stak ul li {*: 5px;}, titler, pakket ind i span tags, der udviser ingen, så de kan være skjult hvor side belastninger, javascript, lægger vi den javascript i sin egen sag, eftersom det er mere end et par linjer.når billedet uden for unordered liste (kurv) er trykket, det bruger jquery er toggle - funktion til stadig listen over poster og fastlægge deres holdning, som er baseret på de horisontale udgangspunkt +. 75px derefter ganget med 2.This gives us the nice curved spring action of the list items.,You could change the .75px or the multiplier (2) to customize how much it curves., $(function () { \t//Stack initialize \tvar openspeed = 300; \tvar closespeed = 300; \t$('.stack>img').toggle(function(){ \t\tvar vertical = 0; \t\tvar horizontal = 0; \t\tvar $el=$(this); \t\t$el.next().children().each(function(){ \t\t\t$(this).animate({top: '-' + vertical + 'px', left: horizontal + 'px'}, openspeed); \t\t\tvertical = vertical + 55; \t\t\thorizontal = (horizontal+.75)*2; \t\t}); \t\t$el.next().animate({top: '-50px', left: '10px'}, openspeed).addClass('openStack') \t\t .find('li a>img').animate({width: '50px', marginLeft: '9px'}, openspeed); \t\t$el.animate({paddingTop: '0'}); \t}, function(){ \t\t//reverse above \t\tvar $el=$(this); \t\t$el.next().removeClass('openStack').children('li').animate({top: '55px', left: '-10px'}, closespeed); \t\t$el.next().find('li a>img').animate({width: '79px', marginLeft: '0'}, closespeed); \t\t$el.animate({paddingTop: '35'}); \t}); \t \t//Stacks additional animation \t$('.stack li a').hover(function(){ \t\t$("img",this).animate({width: '56px'}, 100); \t\t$("span",this).animate({marginRight: '30px'}); \t},function(){ \t\t$("img",this).animate({width: '50px'}, 100); \t\t$("span",this).animate({marginRight: '0'}); \t}); });,Then when the user clicks the basket image again it runs the next function which reverses what we just did. jeg tilføjede yderligere animation til listen over produkter og deres titel for at give dem lidt mere bruger feedback, som naturligvis nemt kan fjernes, og der har du det!en enkel og fleksibel os x stil stak navigation på din hjemmeside.: - d manuskriptet er også i færd med at blive omdannet til en lettere at anvende stik af, så hold øje med den, sidste tanker, jeg håber, at disse eksempler vil give dem nogle idéer til at være kreative og bryde ud af formen ved udformningen af deres næste websted eller model.som du kan se, jquery er en magtfuld bibliotek, der gør det let at gøre vores idéer til en realitet.med en eventuel kommende konkurrence baseret på "kreativt" design, kan du komme i gang med nogle ideer til at forelægge themeforest.hvis du ikke har forelagt dem, før det er meget nemt, og det kan helt sikkert være værd at din tid!:), vil jeg gerne takke rey (fra jquery hold) og steve for besvarelsen af mit råb om hjælp på twitter så hurtigt.dette er et eksempel på, hvor nyttigt twitter kan være for designere og entreprenører.hvis du ikke følger tema skov eller nettuts på twitter, nu er et godt tidspunkt til at gøre det.de er begge websteder med en masse fantastiske oplysninger.du kan følge mig på twitter, hvis du vil.,, følger os på twitter, eller abonnere på nettuts rss foder til mere daglige web - udvikling tuts og genstande,.,,,