Slik oppretter du en jQuery-kodebit

I denne opplæringen skal vi lage en kodeboks som viser eksempelkoden på websider i en attraktivt formatert og lettlest måte, mye som det du ser her på Nettuts. Forhåndsvisningskodene for kodeutklipp som dette er ofte laget som Wordpress-plugin, men vi får se hvordan vi kan gjøre det samme med bare en liten jQuery og CSS.

Vi kan legge til alle de forventede funksjonene som linje nummerering og linje striping, og alle de vanlige verktøyene som å vise koden som ren tekst og skrive ut det på en skrivervennlig måte. Følgende skjermbilde viser hva slags ting vi vil ende opp med på slutten av opplæringen:

Starter

Kodestykket vil bli bygget fra en underliggende

 element; Dette er det perfekte elementet å bruke fordi det gjør hva du legger inn i det som vanlig tekst i en font med fast bredde som monospace, som er ideell for å vise kodeprøver på en klar og kortfattet måte. Den opprettholder også linjeskift som er en funksjon vi kan utnytte for å legge til linjenummerings- og stripingsfunksjonene.
 
En annen grunn vi bruker 
 tag er fordi den er det ideelle grunnlaget for kodeboksen vår; i nettlesere med JavaScript deaktivert, eller de som bare ikke støtter det, vil koden fortsatt bli gjort akseptabelt. Det vil skille seg ut fra resten av teksten på siden, og det vil ikke degenerere til noe helt ubrukelig og latterlig.
 
Start med følgende side i tekstredigeringsprogrammet:
 
        
CSS-kode:
 
#selector color: # 000000;  .andrevelger font-size: 20px; border: 1px solid # 000000; padding: 20 piksler;  tagname bredde: 100%; 
    
 
Lagre siden som kode-snippet.html i en katalog som allerede har den nåværende versjonen av jQuery som ligger innenfor den. Med ingen styling og intet scriptintervensjon bør siden se slik ut:
  
 
Som standard tilbakeslag er det akseptabelt; hvis siden hadde annen kropps tekst på den, 
 elementet ville skille seg ut som en egen blokk med tekst og vil fortsatt virke litt kodenaktig.
 
 
Begynner skriptingen
 
La oss starte med å legge til stripingseffekten som vil få hver linje til å skille seg ut fra de over og under den, og linjenummereringen som vil vise når en ødelagt linje (som går over til to eller flere linjer) er en del av en linje eksempelkode.
 
I det tomme > element på bunnen av  legg til følgende kode:
 
$ (funksjon () // prosess innholdet av utdrag $ ("pre.snippet"). hver (funksjon () // få innhold av 
 og opprett liste og container var currentItem = $ (dette), currentContents = currentItem.text (), innhold = (currentItem.text () .indexOf ("\ n")! = -1)? currentItem.text () split ("\ n"): currentItem.text (). split ("\ r"), list = $ ("
"), container = $ ("
") .addClass (" bunkebeholder "). insertBefore (currentItem.prev ()); // fjerne originalinnhold og pakk inn container currentItem.text (" "). prev (). og selv () .appendTo ; // normalisere høyde (currentItem.height ()> 0)? list.css ("marginTop", -16): null; // lage listepost $ .each (innhold, funksjon (jeg, val) // opprette liste element og indre p var li = $ ("
") .appendTo (liste), p = $ ("
") .text (val) .appendTo (li); // legg stripe klasse (i% 2 === 0)? li.addClass (" stripe "): li.addClass (" unstripe "); .appendTo (currentItem);););
 
La oss gå gjennom hver del av koden for å se hva den gjør; først velger vi hver 
 element som har tittel klassenavnet og for hver som er funnet, utfører vi en anonym funksjon. Innenfor denne funksjonen setter vi først fem variabler; den første variabelen er velgeren for gjeldende 
 element, som vi cache for ytelsesårsaker. Vi skal bruke $ (Denne) referanse gjentatte ganger i vår kode, så det er fornuftig å lagre det i en variabel for rask tilgang.
 
Den neste variabelen lagrer hele tekstinnholdet i gjeldende 
 og neste vil lagre en matrise der hvert element i gruppen inneholder en enkelt linje med tekst fra 
 element. Lengden på arrayet vil samsvare med antall linjer med tekst i 
 element. Fordi linjen bryter inn 
 elementene er bevart, vi kan lett oppdage disse og utføre en splittelse basert på dem.
 
De fleste nettlesere oppdager linjeskift i JavaScript ved hjelp av \ n newline karakter så vi først se om den indre teksten til 
 elementet inneholder noen av disse og bruker dem hvis det gjør det. IE oppdager linjeskift annerledes enn andre nettlesere, så hvis nei \ n tegn er funnet vi utfører splitten ved hjelp av \ r vogn-retur karakter i stedet.
 
Den neste variabelen inneholder et nytt bestilt liste element; bruker en 
 elementet er perfekt fordi det vil håndtere linjenummeringen av kodestykket for oss automatisk. Den endelige variabelen peker på en ny beholder 
 som vi gir et klassenavn til og deretter legger til siden rett før 
 element som går foran utdragsruten.
 
Opprett rekkevidden av 
 Elementets innhold er ikke en destruktiv operasjon, så vi må fjerne det opprinnelige innholdet for å unngå duplisering av det, som vi kan gjøre ved å bruke en tom streng med jQuery's tekst() metode. Vi beveger oss også 
 og 
 element i vårt nyopprettede containerelement.
 
Firefox ser ut til å sette inn en linjeskift i 
 element, som gir elementet høyde når det ikke burde ha noen høyde i det hele tatt (som vi har fjernet innholdet). For å motvirke dette oppdager vi om det er tomt 
 elementet har høyde større enn 0, og så setter vi på margin-top av vår nye 
 element for å trekke det opp til toppen av elementet. Det er bare Firefox som gjør dette, men det er bedre å se etter høyde i stedet for å se etter Firefox. Funksjonsgjenkjenning over sniffing av nettlesere vinner hver gang.
 
 
Striping
 
Den neste delen av koden omhandler å legge til klassene vi kan bruke til striping effekten; som vi har lagt inn innholdet i 
 element i en matrise og ikke et jQuery-objekt, kan vi ikke bruke standarden hver metode som vi gjorde med 
 elementer på siden.
 
I stedet kan vi bruke jQuery Hver verktøymetoden som kalles direkte på jQuery $ gjenstand. Metoden aksepterer 2 argumenter, den første er gjenstanden for å iterere over, i dette tilfellet vår innhold array, og den andre er en anonym funksjon for å utføre for hvert element i arrayet. Vår funksjon blir automatisk bestått to argumenter; Jeg er indeksen for varen som nå blir iterated og val er innholdet i array-elementet.
 
Innenfor vår funksjon lager vi først en ny liste for våre 
 og sett inn et nytt avsnittelement som inneholder innholdet i gjeldende arrayelement. Det nye elementet legger til 
 element som vi opprettet tidligere. Vi legger da til striping klassene; For å gjøre dette bruker vi JavaScript-moduloperatøren til å bestemme om den nåværende arrayindeksen er merkelig eller jevn; for hver jevn indeks legger vi til klassen stripe og for hver odde indeks legger vi til klassen unstripe. Ved å bruke 2 klasser for striping betyr det at vi enkelt kan sette begge stripefarger i stedet for å insistere på at en av dem er hvit.
 
På dette stadiet bør vår eksempelside nå vises slik:
  
 
 
Utklippsstil
 
Nå kan vi legge til stylingen for kodestykket og stripingen; i en ny fil i teksteditoren legg til følgende kode:
 
.pakkebeholder bredde: 630px; polstring: 10px 10px 30px; grense: 1px solid # 999999; background-color: # e1e1e1; margin-bottom: 10px; stilling: i forhold;  .bit-container h2 margin: 0 0 10px; padding-left: 10px; font-family: Georgia; font-vekt: normal; font-style: italic;  .knippe grense: 1px solid # 999999; margin: 0;  .snippet ol margin: 0; padding-left: 34px; background-color: # 8dd397; color: # ffffff; font-vekt: bold; font-style: italic;  .snippet ol li padding-left: 10px;  .knippe ol p margin: 0; color: # 000000; font-vekt: normal; font-style: normal; white-space: pre-wrap; polstring: 3px 0;  .snippet .stripe bakgrunnsfarge: # f5f5f5;  .snippet .unstripe bakgrunnsfarge: #ffffff; 
 
Lagre dette som kode-snippet.css i samme katalog som eksempel siden. Mesteparten av denne CSS er rent for dekorasjon og har blitt valgt vilkårlig i henhold til mine egne preferanser. Du kan endre noen av skrifter, farger, bredden eller noe i det hele tatt. Det viktigste funksjonelle CSS vi angir, er den relative plasseringen på hver utdragsboks og white-space herske på det indre 
 elementer i hvert liste element; hvis vi ikke angir dette til pre-wrap teksten for hver linje vil overfylle buntekonsollen når den er for lang i stedet for å gå til neste linje.
 
Med tillegg av vårt stilark vises nå utskriftskassen slik:
  
 
 
Andre typer kode
 
I dette eksemplet så langt har vi brukt noen veldig enkle CSS som eksemplskoden vist i utdragsruten. Kan vi legge til noen annen type kode som vi vil ha? La oss ta en titt. Direkte etter den første 
 element på siden legg til følgende kode: [/ kildekode]
 
[sourcecode language = "snippet" originalClass = "snippet"]       
Dette er en grunnleggende nettside
  
 
Alt er ganske mye det vi hadde før med en stor forskjell; vi kan ikke bruke < tegn når du viser HTML-koder i vår eksempelkode. Hvis vi skulle sette  i vår 
 tag, det ville bli tolket som en  element og forårsake en HTML-advarsel. For å overvinne dette kan vi spesifisere HTML-enheten 
<
 
som vil bli forandret til a  karakter av nettleseren uten at nettleseren tenker det er et faktisk element. Det er sannsynligvis best å vise hvilken som helst kode som bruker  tegn på denne måten for å forhindre utilsiktet tolkning av nettleseren. Slik viser den andre kodeboksen:
  
 
Jeg har satt fast på innrykkskonvensjonen som jeg vanligvis bruker, som er 2 standardrom for nestede elementer; Dette er en vane jeg har fått inn på som et resultat av å måtte vise mange potensielt brede linjer med kode i dokumenter med fast bredde. Det er ikke standardkonvensjonen, som er fire enkeltrom eller ett faneområde. Du kan bruke hvilken som helst konvensjon du foretrekker når du distribuerer utdragsruten på ditt eget nettsted, da både enkeltrom og mellomrom blir bevart av pre stikkord.
 
 
Utdragsverktøy
 
En annen funksjon i kodestykke som vi enkelt kan legge til er en rekke verktøy som hjelper den besøkende til å bruke koden. Hvis du prøver å kopiere og lime inn koden fra en av kodene i en tekstredigerer, ser du at linjenumrene fra den bestilte listen også kopieres til den nye siden. Dette er uheldig fordi etterlatte disse tallene, vil det trolig stoppe eksemplskoden fra å fungere. En ting vi kan gjøre er å gi en mekanisme der koden kan vises uten linjenumrene.
 
Direkte etter linjen med kode som leser list.appendTo (currentItem); legg til følgende kode:
 
// lage verktøy var toolContainer = $ ("
") .addClass (" verktøy-container "), toolList = $ ("
") .addClass (" verktøyliste "). appendTo (toolContainer), listItem1 = $ ("
") .addClass (" verktøy-element "). tekst (" | "). appendTo (toolList), listItem2 = $ ("
") .addClass (" verktøy-element "). appendTo (toolList), plain = $ ("") .addClass (" verktøy "). attr (id:" plain ", href:" # ", tittel:" Vis kode som ren tekst ") .tekst (" Vis vanlig ") .prependTo (listItem1). klikk (funksjon (e) // stopp event e.preventDefault (); // opprett container for vanlig kode hvis ($ (dette). nærmeste (".bit-container"). finn ("snippet"). (".display-box"). lengde === 0) var displayBox = $ ("
") .AddClass (" skjerm-boksen "). Høyde ($ (dette) .closest (". Biten-container "). Finne (". Snippet "). Høyde ()). Tekst (currentContents) .appendTo (currentItem ); // vise eller skjul den enkle koden $ (denne) .closest (". snippet-container"). finn ("snippet"). barn ("display-box"). slideToggle (); // endre tekst på lenken ($ (dette) .text () == "Vis vanlig")? $ (dette) .text ("Show Pretty"): $ (this) .text ("Show Plain");) , printBox = $ ("") .addClass (" verktøy "). attr (id:" print ", href:" # ", tittel:" Skriv ut kode ") .tekst (" Skriv ut ") .prependTo (listItem2) .click e) // stopp event e.preventDefault (); // åpne ny side for å skrive ut fra var title = currentItem.prev (). text (), currentSnippet = $ (dette) .closest (".bunt-container") .find (". snippet"), printWindow = window.open ("", "printWindow", "width =" + (currentSnippet.width () + 25) + ",
"+ tittel +"<\/h2>
<\/pre>"); $ (" # kode ", printWindow.document) .text (currentContents); printWindow.print ();); toolContainer.appendTo (container);
 
Alt vi gjør er å lage en hel masse variabler, mye som det vi gjorde i begynnelsen av den første delen av koden tidligere; husk at vi fortsatt er i sammenheng med Hver() metode kalt på alle 
 elementer på siden. Vi lager først en beholder for de nye verktøyene og gir det et klassenavn for styling, men vi legger ikke det til koden med en gang.
 
Deretter oppretter vi et nytt uordnet listeelement og to listeposter, som er klassenavn og vedlagt de respektive beholderne. Det første listeposten er gitt en innertext av røret karakter for å fungere som en separator.
 
 
Opprette verktøyene
 
Vi lager da det første verktøyet, som vil bli brukt til å vise en ren tekstversjon av koden; Vi legger til et klassenavn for styling og de nødvendige egenskapene. Lenkelementet vi oppretter, har også en hendelseshåndterer vedlagt i form av en anonym tilbakeringingsfunksjon for når den klikkes.
 
Innenfor denne funksjonen oppretter vi først en ny beholder for ren tekst, men først etter å ha sjekket at beholderen ikke allerede eksisterer; Dette vil fungere som en grunnleggende latisk lasttype-mekanisme som ikke vil skape de enkle kodeelementene før ankeret klikkes for første gang. Tilbakeringingen blir utført hver gang ankeret klikkes, så vi må sjekke om beholderen allerede eksisterer for å forhindre en oppbygging av flere beholdere.
 
Vi bruker deretter jQuery's slideToggle () effekt for å vise eller skjule vanlig kode, avhengig av om den allerede er synlig. Vi endrer også teksten til lenken hver gang den klikkes, noe som gir den besøkende en enkel måte å bytte mellom de enkle og vakre kodevisninger.
 
Den neste og siste variabelen vi oppretter er et annet ankerelement som vil bli brukt på utskriftsverktøyet. Dette elementet har også en hendelsehandler knyttet som vil bli utført hver gang den klikkes. Innenfor hendelseshandleren starter vi ved å lage noen variabler igjen, caching tekstinnholdet i kodestykkeens overskriftselement og gjeldende kodestykke 
 element.
 
Vi lager også et nytt vindu ved hjelp av tradisjonelle JavaScript åpen() metode; Det første argumentet denne metoden tar, er nettadressen til siden som skal åpnes; Vi har ikke en eksisterende side, vi skal konstruere den fra bunnen av, så vi stiller dette argumentet til en tom streng. Det andre argumentet er navnet på det nye vinduet, noe som er veldig viktig som vi refererer til det flere ganger på et øyeblikk. Til slutt setter vi dimensjonene til det nye vinduet slik at det er litt større enn den opprinnelige kodeboksen.
 
Når vinduet er opprettet bruker vi da document.write på vinduet adresserer navnet vi ga til det, og skriv en overskrift som inneholder innholdet i overskriften elementet vi cached, og et tomt preelement, som vi gir en id til. Ved hjelp av document.write Føles så galt etter bruk av jQuery, men dessverre er det den eneste metoden som fungerer.
 
Når det nye vinduet har 
 element vi kan bruke jQuery til å velge det ved hjelp av det id ved å levere en referanse til det nye vinduet som konteksten til väljeren. Vi legger deretter til tekstinnholdet i originalen 
 element som vi lagret vei tilbake ved starten av manuset og endelig ringe til skrive ut() JavaScript-metode for å skrive ut det nye vinduet.
 
JavaScript skrive ut() Metoden er veldig grunnleggende, den skriver bare ut hele siden; Vi kan ikke fortelle det å bare skrive ut utvalgte elementer, og derfor lager vi den nye siden som inneholder bare den aktuelle overskriften og den enkle koden og skriver den ut i stedet. Det er måter vi kunne gjøre det på uten å opprette den nye siden; vi kan legge til et utskriftsklassenavn til hvert element på siden og bruke det til å gjemme dem med CSS. På store sider med mange elementer skjønt, ville dette være massivt ineffektivt. Også, vi kan ikke bestemme når utskriften er ferdig, slik at elementene vises igjen etter at det har blitt skrevet ut, vil også være plagsomt.
 
Nå har alle verktøyene blitt opprettet, og vi kan til slutt legge dem til siden ved å legge dem til hver av kuttbeholdere.
 
 
Verktøy Styling
 
De nye verktøyene vil også trenge noen CSS, så rydde utseende og plassere dem. på bunnen av kode-snippet.css legg til følgende nye kode:
 
.verktøy-container posisjon: absolutt; høyre: 10px;  .tool-list margin: 6px 0 0;  .tool-list li liste-stil-type: none; float: venstre; font-vekt: bold; font-size: 13 piksler;  .tool-list li a text-decoration: none; font-family: Georgia; font-vekt: normal; font-style: italic; font-size: 11px; color: # 000000; polstring: 0 5px; omriss: 1px prikket # e1e1e1;  .tool-list li a: hover text-decoration: understreke;  .snippet .display-box posisjon: absolutt; topp: 0; venstre: 0; bredde: 100%; background-color: # ffffff; display: none; white-space: pre-wrap; 
 
Igjen er det for det meste tilfeldige stiler som jeg personlig ser bra ut. Du er velkommen til å endre dem, selv om jeg tror bunnen av kodeboksen er et bra sted for dem, og er et sted vi har med vilje igjen plass til, så hvis du ønsker å flytte dem, vil du kanskje justere nederste polstring av kuttbeholderen. De nye verktøyene skal vises slik:
  
 
Når den enkle lenken klikkes, skal den enkle koden beholdes i visningen og etiketten på lenken endres:
  
 
Når utskriftsverktøyet er valgt, skal det nye vinduet som inneholder koden og utskriftsdialogboksen begge vises:
  
 
Merk at dette er relativt sakte i IE8 og litt temperamentsfull, noen ganger vil utskriftskassen åpne og noen ganger vil det ikke. I tillegg vises ikke utskriftskassen i Opera.
 
 
Sammendrag
 
Med bare en liten bit av semantisk HTML, noen presentasjonelle CSS og jQuery, kan vi enkelt presentere kodeeksempler attraktivt og tydelig på våre nettsider. Vi så på den første semantiske HTML som er tydelig og lesbar, og hvordan du viser kode som bruker < karakter.
 
Vi så på hvor enkelt det er å legge til effektiv linjenummering og striping for å gjøre kodeeksemplene mer lesbare. Vi så også hvordan vi enkelt kan legge til et par verktøy til kodekassene som gjør kopiering av koden nøyaktig eller å skrive ut koden enklere for våre besøkende.



		
			
	   
	




Kode