Cum se creează o casetă jQuery Code-Snippet

În acest tutorial vom crea o casetă de fragmente de cod care afișează un exemplu de cod în paginile web într-un mod atrăgător formatat și ușor de citit, la fel ca ceea ce vedeți aici pe Nettuts. Fragmente de previzualizare a fragmentelor de coduri de acest gen sunt adesea făcute ca pluginuri Wordpress, dar vom vedea cum putem face același lucru doar cu un mic jQuery și CSS.

Putem adăuga toate funcțiile așteptate, cum ar fi numerotarea liniilor și stripingul liniilor, precum și toate instrumentele obișnuite, cum ar fi vizualizarea codului ca text simplu și imprimarea acestuia într-o manieră prietenoasă imprimantei. Următoarea imagine va arăta genul de lucru pe care vom termina până la sfârșitul tutorialului:

Noțiuni de bază

Caseta cu fragment de cod va fi construită dintr-o bază de date

 element; acesta este elementul perfect de utilizat, deoarece face ca orice să introduceți în text ca text simplu într-un font cu lățime fixă, cum ar fi monospace, care este ideal pentru a arăta mostrele de cod într-o manieră clară și concisă. Se păstrează, de asemenea, linii-pauze care este o caracteristică pe care o putem exploata pentru a adăuga caracteristicile de numerotare a liniilor și striping.
 
Un alt motiv pentru care folosim 
 eticheta este pentru că face ca fundația ideală pentru caseta noastră de cod; în browserele cu JavaScript dezactivat sau pe cele care pur și simplu nu o acceptă, codul va fi încă redat acceptabil. Se va ține departe de restul textului de pe pagină și nu va degenera în ceva complet inutil și ridicol.
 
Începeți cu următoarea pagină în editorul dvs. de text:
 
        
Cod CSS:
 
#selector culoare: # 000000; . alt-selector font-size: 20px; frontieră: 1px solid # 000000; padding: 20px;  tagname width: 100%; 
    
 
Salvați pagina ca cod-snippet.html într-un director care are deja versiunea curentă a jQuery care locuiește în el. Cu nici un stil și nici o intervenție de script, pagina ar trebui să arate astfel:
  
 
Ca o întârziere implicită este acceptabilă; dacă pagina avea un alt text pe ea, 
 element ar părea un bloc separat de text și ar părea în continuare un pic asemănător cu codul.
 
 
Începutul scripturilor
 
Să începem prin adăugarea efectului de strivire care va face ca fiecare linie să iasă de la cele de mai sus și de dedesubt, iar numerotarea liniilor care se va afișa atunci când o linie întreruptă (care depășește două sau mai multe linii) face parte dintr-o linie de exemplu cod.
 
În gol > element în partea de jos a  adăugați următorul cod:
 
$ (funcția () // procesează conținutul fragmentelor $ ("pre.snippet") fiecare (funcția () // obține conținutul 
 și să creeze o listă și un container var currentItem = $ (this), currentContents = currentItem.text (), contents = (currentItem.text ()) indexOf ("\ n")! ("\ r"), list = $ ("\ n"): actualItem.text ()
"), container = $ ("
") .addClass (" snippet-container ") insertBefore (currentItem.prev ()); // eliminați conținutul original și împachetați containerul curentItem.text (" ") ; // a crea un element de listă $ .each (conținutul, funcția (i, val) // crea elementul de listă și interiorul p var li = $ ("
") .appendTo (listă), p = $ ("
") .text (val) .appendTo (li); // adăugați clasa stripe (i% 2 === 0); li.addClass (" stripe "): li.addClass (" unstripe " .appendTo (currentItem);););
 
Să trecem prin fiecare parte a codului pentru a vedea ce face; mai întâi alegem fiecare 
 element care are numele clasei de fragmente, iar pentru fiecare dintre ele se execută o funcție anonimă. În cadrul acestei funcții am stabilit mai întâi cinci variabile; prima variabilă este selectorul pentru curent 
 element, pe care îl stocăm din motive de performanță. Vom folosi $ (Aceasta) de referință în mod repetat în codul nostru, deci este logic să-l stocați într-o variabilă pentru acces rapid.
 
Următoarea variabilă va stoca întregul text conținut al curentului 
 iar următorul va stoca un tablou în care fiecare element din matrice conține o singură linie de text din 
 element. Lungimea matricei se va potrivi cu numărul de linii de text din 
 element. Deoarece liniile se încadrează înăuntru 
 elementele se păstrează, putem detecta cu ușurință acestea și putem efectua o divizare bazată pe ele.
 
Majoritatea browserelor detectează linii de rupere în JavaScript folosind \ n caracterul newline, astfel încât să vedem mai întâi dacă textul interior al 
 elementul conține oricare dintre acestea și apoi folosiți-le dacă este cazul. IE detectează întreruperi de linie diferit de alte browsere, deci dacă nu \ n se găsesc caracterele pe care le realizăm împărțirea folosind \ r Caracter-retur în schimb.
 
Următoarea variabilă conține un nou element listă ordonată; folosind un 
 elementul este perfect pentru că va gestiona automat numerotarea liniei fragmentului de cod pentru noi. Variabila finală indică un nou container 
 pe care le dăm un nume de clasă și apoi se anexează la pagină direct în fața 
 element care precede caseta de fragmente.
 
Crearea matricei 
 conținutul elementului nu este o operație distructivă, așa că trebuie să eliminăm conținutul original pentru a evita duplicarea lui, ceea ce putem face folosind un șir gol cu ​​jQuery's text() metodă. De asemenea, mutăm 
 si 
 element în noul nostru element de container.
 
Firefox pare să introducă o linie întreruptă în 
 element, care dă elementul înălţime când nu ar trebui să aibă nicio înălțime (după cum am eliminat conținutul). Pentru a contracara acest lucru, detectăm dacă este gol 
 elementul are o înălțime mai mare decât 0, și dacă da, am setat margin-top din noul nostru 
 element pentru ao trage până în partea de sus a elementului. Numai Firefox face asta, dar e mai bine să verifici înălţime în loc de verificare pentru Firefox. Detectarea de funcții prin intermediul sniffing-ului browserului câștigă de fiecare dată.
 
 
striping
 
Următoarea secțiune a codului se referă la adăugarea claselor pe care le putem folosi pentru efectul de strivire; așa cum am pus conținutul 
 element într - o matrice și nu un obiect jQuery nu putem folosi standardul fiecare metodă cum am făcut cu 
 elemente de pe pagină.
 
În schimb, putem folosi jQuery fiecare metoda de utilitate care este apelată direct pe jQuery $ obiect. Metoda acceptă 2 argumente, primul este obiectul de iterare, în acest caz al nostru cuprins array, iar al doilea este o funcție anonimă care trebuie executată pentru fiecare element din matrice. Funcția noastră este transmisă în mod automat două argumente; eu este indexul elementului în curs de repetare și Val este conținutul elementului de matrice.
 
În cadrul funcției noastre, vom crea mai întâi un nou element de listă pentru noi 
 și introduceți un nou element al paragrafului care conține conținutul elementului curent al matricei. Noul element este adăugat la 
 element pe care l-am creat mai devreme. Apoi adăugăm clasele de strivire; pentru a face acest lucru, utilizăm operatorul modulului JavaScript pentru a determina dacă indicele actual al matricei este impar sau par; pentru fiecare index par să adăugăm clasa dunga și pentru fiecare indice ciudat adăugăm clasa unstripe. Utilizarea a două clase pentru striping înseamnă că putem seta cu ușurință ambele culori de bandă în loc de a insista că unul dintre ele este alb.
 
În acest moment, exemplul nostru ar trebui să apară astfel:
  
 
 
Scenariul cu fragmente
 
Acum putem adăuga stilul pentru widget-ul fragmentului de cod și stripe; într-un fișier nou în editorul dvs. de text adăugați următorul cod:
 
.snippet-container width: 630px; umplutura: 10px 10px 30px; frontieră: 1px solid # 999999; background-color: # e1e1e1; margin-bottom: 10px; Poziția: relativă;  .snippet-container h2 margine: 0 0 10px; padding-left: 10px; font-family: Georgia; font-weight: normal; -Stil de font: italic;  .snippet border: 1px solid # 999999; margin: 0;  .snippet ol margine: 0; padding-left: 34 de pixeli; background-color: # 8dd397; Culoare: #FFFFFF; font-weight: bold; -Stil de font: italic;  .snippet ol li padding-left: 10px;  .snippet ol p (margine: 0; culoare: # 000000; font-weight: normal; Stil de font: normal; white-space: pre-wrap; padding: 3px 0;  .snippet .stripe background-color: # f5f5f5;  .snippet .unstripe background-color: #ffffff; 
 
Salvați ca cod-snippet.css în același director ca și pagina de exemplu. Cea mai mare parte a acestui CSS este exclusiv pentru decorare și a fost aleasă în mod arbitrar în funcție de preferințele mele. Puteți schimba oricare dintre fonturi, culori, lățimea sau orice altceva. Cel mai important CSS funcțional pe care l-am setat este poziționarea relativă pe fiecare casetă de fragmente și spatiu alb regula pe interior 
 elemente din fiecare element de listă; dacă nu ne-am stabilit asta pre-wrap textul pentru fiecare linie va depăși containerul de fragment atunci când este prea lung, în loc să rupă linia următoare.
 
Prin adăugarea foii de stil, caseta de fragmente apare acum astfel:
  
 
 
Alte tipuri de cod
 
În acest exemplu, până acum am folosit câteva CSS foarte simple ca exemplul de cod afișat în caseta de fragmente. Putem adăuga orice alt tip de cod pe care îl dorim? Hai să aruncăm o privire. Imediat după prima 
 element pe pagină adăugați următorul cod: [/ sourcecode]
 
[sourcecode language = "snippet" originalClass = "fragment"]       
Aceasta este o pagină web de bază
  
 
Totul este destul de mult ceea ce am avut înainte cu o diferență majoră; nu putem folosi < caracter atunci când afișarea etichetelor HTML în codul nostru exemplu. Dacă ar fi trebuit să punem  în a noastră 
 tag, el ar fi interpretat ca un  element și provoca un avertisment HTML. Pentru a depăși acest lucru, putem specifica entitatea HTML 
<
 
care va fi transformat într-un  caracterul browserului, fără ca browserul să considere că este un element real. Este probabil cel mai bine să arătați orice cod care utilizează  în acest fel, pentru a împiedica interpretarea accidentală de către browser. Iată cum ar trebui să apară cea de-a doua casetă de fragmente:
  
 
Am blocat convenția de indentare pe care o folosesc în mod normal, care este 2 spații standard pentru elemente imbricate; acesta este un obicei pe care l-am adus ca urmare a necesității de a arăta o mulțime de linii de coduri potențial largi în documente cu lățime fixă. Nu este convenția standard, care este de patru spații individuale sau un spațiu tab. Puteți utiliza convenția pe care o preferați atunci când implementați caseta de fragmente de pe site-ul dvs., deoarece ambele spații individuale și spațiile taburilor sunt păstrate de către pre etichetă.
 
 
Instrumente pentru fragmente
 
O altă caracteristică a cutiilor de fragmente de cod pe care le putem adăuga cu ușurință sunt o serie de instrumente care ajută vizitatorul să utilizeze codul; dacă încercați să copiați și să inserați codul dintr-o casetă de fragmente într-un editor de text, veți vedea că numerele de linie din lista ordonată sunt, de asemenea, copiate pe noua pagină. Acest lucru este regretabil deoarece lăsarea acestor numere va înceta, probabil, ca exemplul de cod să funcționeze. Un lucru pe care îl putem face este să furnizăm un mecanism în care codul poate fi afișat fără numerele de linie.
 
Imediat după linia de cod care citește list.appendTo (currentItem); adăugați următorul cod:
 
// crea unelte var toolContainer = $ ("
") .addClass (" unelte-container "), toolList = $ ("
") .addClass (" lista de instrumente ") appendTo (toolContainer), listItem1 = $ ("
") .addClass (" instrument-item ") .text (" | ") appendTo (toolList), listItem2 = $ ("
") .addClass (" element-instrument ") appendTo (toolList), plain = $ (""(" id ":" plain ", href:" # ", titlu:" Show code as plain text "). faceți clic pe (funcția (e) // stop evenimentul e.preventDefault (); // crea containerul pentru codul simplu dacă ($ (this) .closest (". (".display-box") lungime === 0) var displayBox = $ ("
") .AddClass (" display-box "). Înălțimea ($ (aceasta) .closest (". Snippet-container "). Găsește (". Fragment "). Înălțimea ()). Text (currentContents) .appendTo (currentItem ); // arăta sau ascunde codul simplu $ (this) .closest (". snippet-container") găsi (".info") copii (". modificați textul pe link ($ (this) .text () == "Show Plain")? $ (this) .text ("Show Pretty"): , printBox = $ ("")" .addClass ("instrument") attr (id: "print", href: "#", title: "Print Code") e) // stop evenimentul e.preventDefault (); // deschideți o pagină nouă pentru a tipări din var title = currentItem.prev () .text (), currentSnippet = $ (this) .closest (". .find (". snippet"), printWindow = window.open ("", "printWindow", "width =" + (actualSnippet.width () + 25),
"+ titlu +"<\/h2>
<\/pre>"); $ (" # code ", printWindow.document) .text (actualContents); printWindow.print ();); toolContainer.appendTo (container);
 
Tot ce facem este să creăm o grămadă de variabile, la fel ca ceea ce am făcut la începutul primei bucăți de coduri anterioare; amintiți-vă că suntem încă în contextul fiecare() metoda a cerut tuturor 
 elemente de pe pagină. Mai întâi creăm un container pentru noile instrumente și îi oferim un nume de clasă pentru scopuri de styling, dar nu îl adăugăm direct la fragment.
 
Apoi, creăm un nou element listă neordonată și două elemente de listă, care sunt nume de clasă și sunt adăugate la containerele lor respective. Primul element din listă este dat innerText a caracterului conductei pentru a acționa ca un separator.
 
 
Crearea instrumentelor
 
Apoi vom crea primul instrument, care va fi folosit pentru a afișa o versiune de text simplu a codului; adăugăm un nume de clasă pentru stil și atributele necesare. Elementul de legătură pe care îl creăm are, de asemenea, un handler de evenimente atașat sub forma unei funcții de apel invers anonime pentru momentul când este făcut clic.
 
În cadrul acestei funcții, noi creați mai întâi un container nou pentru textul simplu, dar numai după verificarea faptului că containerul nu există deja; aceasta va acționa ca un mecanism bazat pe tip de sarcină leneș, care nu va crea elementele de cod simplu până când nu se face clic pentru prima oară pe ancora. Callback-ul este executat de fiecare dată când se face clic pe ancora, așa că trebuie să verificăm dacă containerul există deja pentru a preveni acumularea de containere multiple.
 
Apoi folosim jQuery slideToggle () efect pentru a afișa sau a ascunde codul simplu în funcție de faptul dacă este deja vizibil. Schimbați, de asemenea, textul linkului de fiecare dată când acesta este clic pe care îi oferă vizitatorului o modalitate ușoară de a comuta între vizualizările simple.
 
Următoarea și ultima variabilă pe care o creăm este un alt element de ancorare care va fi folosit la instrumentul de imprimare; acest element are, de asemenea, un handler de evenimente atașat care va fi executat de fiecare dată când este făcut clic. În cadrul procesului de tratare a evenimentului, pornim din nou prin crearea din nou a unor variabile, salvarea conținutului textului elementului de titlu al fragmentului de cod și a fragmentului de cod curent 
 element.
 
Creați, de asemenea, o nouă fereastră folosind JavaScript-urile tradiționale deschis() metodă; primul argument pe care această metodă îl ia este adresa URL a paginii care se deschide; nu avem o pagină existentă, o vom construi din nou, așadar am setat acest argument la un șir gol. Al doilea argument este numele ferestrei noi, care este foarte importantă pe măsură ce ne referim la ea de mai multe ori într-un moment. În sfârșit, am setat dimensiunile ferestrei noi, astfel încât să fie puțin mai mare decât caseta de cod originală.
 
După crearea ferestrei vom folosi apoi document.write pe fereastra care se referă la numele pe care i-am dat-o și scrie o rubrică care conține conținutul elementului de titlu pe care l-am stocat în cache și un pre-element gol, pe care îl oferim id la. Utilizarea document.write se simte atât de greșit după ce a folosit jQuery, dar din păcate este singura metodă care funcționează.
 
Odată ce noua fereastră are 
 element, putem folosi jQuery pentru ao selecta folosind id prin furnizarea unei referințe la fereastra nouă ca context al selectorului. Apoi adăugăm conținutul textului originalului 
 element pe care am cached drumul înapoi la începutul scenariului și în cele din urmă apel imprimare() Metoda JavaScript pentru a imprima noua fereastră.
 
JavaScript imprimare() metoda este foarte de bază, imprimă doar întreaga pagină; nu putem să-i spunem să tipărească numai articole selectate, de aceea noi creăm noua pagină care conține doar titlul corespunzător și codul simplu și se imprimă în schimb. Există modalități prin care am putea să o facem fără a crea noua pagină; am putea adăuga un nume de clasă de imprimare la fiecare element din pagină și să îl folosim pentru a-l ascunde cu CSS. Pe paginile mari cu numeroase elemente, acest lucru ar fi foarte ineficient. De asemenea, nu putem determina când a terminat imprimarea, astfel încât elementele din nou afișate după ce au fost tipărite ar fi, de asemenea, dificile.
 
Acum, toate instrumentele au fost create, le putem adăuga în final în pagină adăugându-le la fiecare dintre containerele de fragmente.
 
 
Styling pentru unelte
 
Noile instrumente vor avea nevoie, de asemenea, de unele CSS astfel ordonate aspectul lor și poziția lor; la fundul cod-snippet.css adăugați următorul cod nou:
 
.tools-container poziție: absolută; dreapta: 10px; . lista de instrumente margine: 6px 0 0; . lista de instrumente li list-style-type: none; plutește la stânga; font-weight: bold; font-size: 13px;  .tool-list li a text-decoration: nimic; font-family: Georgia; font-weight: normal; -Stil de font: italic; font-size: 11px; culoare: # 000000; padding: 0 5px; contur: 1px punctat # e1e1e1;  .doar-list li: hover text-decorare: subliniere;  .snippet.display-box poziție: absolută; top: 0; stânga: 0; lățime: 100%; culoare de fundal: #FFFFFF; display: none; white-space: pre-wrap; 
 
Din nou, sunt mai multe stiluri arbitrare care, personal, cred că arata bine. Simțiți-vă liber să le schimbați, deși cred că partea de jos a casetei de cod este un loc bun pentru ei și este undeva pe care am lăsat în mod intenționat spațiu, așa că dacă doriți să le mutați, este posibil să doriți să reglați umplutura de fund din containerul de fragmente. Noile instrumente ar trebui să apară astfel:
  
 
Ori de câte ori se face clic pe link-ul simplu, containerul de cod simplu trebuie să alunece în vedere și eticheta legăturii se va schimba:
  
 
Când este selectat instrumentul de imprimare, ar trebui să apară ambele ferestre noi care conțin codul și caseta de dialog pentru imprimare:
  
 
Rețineți că acest lucru este relativ lent în IE8 și un pic temperamental, uneori caseta de tipărire se va deschide și, uneori, nu va. În plus, caseta de tipărire nu apare în Opera.
 
 
rezumat
 
Cu doar câteva coduri HTML semantice, unele CSS și jQuery de prezentare, putem prezenta cu ușurință exemple de cod atractive și clare pe paginile noastre web. Am analizat HTML-ul semantic inițial care rămâne distinct și lizibil și cum să afișăm codul care folosește < caracter.
 
Am analizat cât de ușor este să adăugați o numerotare eficientă a liniei și un striping pentru a face mai ușor de citit exemplele de cod. De asemenea, am văzut cum putem adăuga cu ușurință câteva instrumente în casetele de cod care fac corect copierea codului sau imprimarea mai ușoară a codului pentru vizitatorii noștri.



		
			
	   
	




Cod