Share
Astăzi vă voi prezenta două elemente HTML5: și , parte a caietului de sarcini Interactive Elements. Web-ul a evoluat în ceva mai mult decât documente legate; paginile se comportă din ce în ce mai des în aceste zile ca aplicații. Ca atare, este momentul potrivit pentru a forma caracteristici standard de interactivitate web.
Aceste două elemente sunt printre cele mai puțin discutate printre dezvoltatori, probabil din cauza lipsei de sprijin în browserele majore. Firefox este singurul browser care a implementat acest element în momentul redactării.
Când vorbim meniul este important să nu fiți confundați cu . Specificația face o treabă bună în definirea diferenței dintre aceste două elemente distincte.
este Elementul de navigare HTML. Este elementul care reprezintă blocul de navigare a paginilor web. În general, conține un set de linkuri care permit utilizatorilor să navigheze sau să sară prin secțiuni din pagină sau dintr-o altă pagină a site-ului web.
, pe de altă parte, reprezintă un set de comenzi de meniuri. Ideea este similară aplicațiilor desktop sau mobile. Aplicațiile desktop utilizează de obicei meniuri ale barei de instrumente și meniuri de context pentru a efectua diverse sarcini. Luați Estompa în Photoshop, de exemplu. Aceasta efectuează o sarcină care face ca stratul selectat să fie neclar.
Blur meniu în PhotoshopAceasta este diferența fundamentală dintre aceste două elemente; ar trebui să conțină linkuri pentru a ajuta utilizatorii naviga prin pagini web, în timp ce element ar trebui să ajute utilizatorii să îndeplinească anumite sarcini.
Pe scurt, elementul este conceput pentru crearea de meniuri contextuale, bara de instrumente și pop-up. Cu toate acestea, ultimele două dintre acestea nu au fost încă implementate în niciun browser, inclusiv în Firefox. În acest moment, este greu să ghiciți cum vor fi implementate browserele (dacă?) Și cum vor arăta acestea. Există, de asemenea, o bună șansă ca bara de unelte și specificația meniului pop-up să se schimbe ușor în următoarea iterație.
Pentru moment, ne vom concentra atenția asupra Meniul contextual caracteristică.
Un meniu contextual (sau meniul contextual) apare atunci când faceți clic dreapta pe o aplicație. Opțiunile dezvăluite sunt specifice locului în care utilizatorul a făcut clic, prin urmare context.
Meniul contextual nativ din OS X și UbuntuEste posibil să adăugați meniuri de context pe paginile web prin JavaScript sau un plugin jQuery. Problema cu această metodă este că adesea necesită marcări grele și, în mod critic, scriptul va elimina meniul contextual al browserului, ceea ce ar putea perturba așteptările obișnuite ale utilizatorilor, dacă nu sunt efectuate corect.
Meniu contextual personalizat în Google Drive impreuna cu Elementul va include noile elemente de meniu ca parte a meniului contextual nativ. În exemplul de mai jos, vom adăuga la noi un nou meniu context mențiunea "Hello World".
Particulele esențiale ale fragmentului de mai sus sunt atributele - id, tip și meniul contextual - care specifică tipul de meniu ca a context precum și domeniul în care ar trebui afișat noul meniu.
În cazul nostru, noul meniu va apărea oriunde în document atunci când faceți clic dreapta, așa cum l-am atribuit utilizând meniul contextual atribut la corp.
Alternativ, puteți restricționa domeniul de aplicare într-o anumită secțiune a paginii atribuindu-l Când îl vedem în browser (momentan, numai în Firefox) trebuie să vezi că Submeniurile cuprind un grup de elemente cu acțiuni asociate sau similare. Photoshop Rotația imaginilor meniul este un exemplu perfect pentru asta. Rotația imaginilor meniul conține mai multe elemente de submeniu pentru a permite utilizatorilor să selecteze gradul de rotație ( Utilizarea Când rulați acest lucru într-un browser de asistență, vom găsi un nou meniu cu patru submeniuri: Mai mult, un nou atribut numit Și acolo este icoana, după cum puteți vedea mai jos. Am creat ceva care arată ca un meniu contextual, dar nu funcționează încă ca atare. Utilizatorii se așteaptă să se întâmple ceva când se dau pe el; faceți clic pe Copie ar trebui să copiați textul sau linkul, făcând clic pe a Dosar nou elementul de meniu ar trebui să creeze un nou dosar. Putem face acest lucru folosind JavaScript. Notă: înainte de a vă continua, vă recomand să aruncați o privire asupra cursului lui Jeremy McPeak privind Bazele JavaScript; un bun punct de plecare pentru oricine învață JavaScript. Luați exemplul "rotire imagine" de mai sus, să adăugăm o funcție care va roti imaginea pe care am făcut clic. Transformarea și tranziția CSS3 pot efectua rotația reală în browser pentru noi; aici este stilul care va roti imaginea de 90 de grade: Cu regula de stil specificată, trebuie să scriem o funcție pentru a aplica aceasta imaginii: Adăugați această funcție în secțiunea respectivă Pentru a termina, creați regulile de stil care vor roti imaginea la 180 de grade și veți răsturna imaginea. Și adăugați fiecare funcție în elementul respectiv împreună cu parametrul. Vedeți acest exemplu în acțiune în pagina demo. Sperăm că Safari, Chrome, Opera și Internet Explorer se vor prinde în curând și vor implementa și alte tipuri de meniuri ( meniul contextual atribuirii elementelor - , , și etc - în loc de corp.
articol din meniu am declarat că este adăugat la începutul listei.
Noul element de meniu, "Hello World", este încărcat ca parte a meniului contextual nativ.Adăugarea submeniului și a pictogramei
900 și 1800 ) pe care le doresc, precum și direcția de aplicare a acesteia. element, adăugarea submeniurilor este ușor și intuitivă. Du-te și cuib pe alta împreună cu a eticheta pentru a declara numele meniului, după cum urmează:
icoane
icoană a fost introdus făcând posibilă adăugarea unei pictograme de-a lungul meniului. Merită menționat faptul că acest atribut este aplicabil numai în cadrul element. Specificați calea pictogramei la icoană, ca astfel.
Fiecare submeniu are acum o pictogramă ilustrativă. Icoane cu pictograma Fugue.Adăugarea unei funcții în meniu
.rotate-90 transform: rotire (90deg);
funcția imageRotation (nume) document.getElementById ('imagine') className = nume; prin onclick atribuiți și treceți parametrul cu numele clasei, rotiți-90:Concluzie
element ar putea fi foarte util atât în aplicații web, cât și în site-uri web obișnuite. Din păcate, sprijinul este încă foarte sărac.
Pop-up și Bara de instrumente ). Astept cu nerabdare modul in care acest element va evolua in anul urmator.Alte referințe
Accentsconagua