Share
Asigurarea faptului că utilizatorii finali au cât mai multe informații posibil este scopul celor mai mulți dezvoltatori. De-a lungul anilor, am evoluat constant modul în care îi ajutăm pe utilizatori să înțeleagă evenimentele care apar, printre care:
Și multe alte experiențe de mesagerie.
Chiar și la nivelul sistemului de operare, browserele precum Chrome și Firefox includ acum servicii de notificare care pot fi accesate și aplicații precum Growl permit aplicațiilor native să alerteze utilizatorii prin SDK.
Anunțul recent al lui Kendo UI Core, care a fost deschisă, a deschis o mulțime de noi controale comunității dezvoltatorilor, pe care le pot folosi pentru a construi câteva experiențe minunate. Unul dintre cele mai noi controale lansate cu Kendo UI Core este widget-ul Notificări care oferă un API foarte flexibil și opțiuni personalizate ale UI pentru furnizarea de notificări în aplicația dvs..
În acest tutorial, voi explora modul în care să folosiți acest nou widget pentru a spori informațiile pe care le putem oferi utilizatorilor.
Pentru a începe, va trebui să descărcați o copie a Kendo UI Core. Există câteva moduri de a face acest lucru:
Accentsconagua
bower instalați kendo-ui-core Cea mai ușoară și mai optimă modalitate de a începe este să o trageți prin CDN, astfel încât să puteți profita de cache-urile primate:
Acest lucru vă va oferi acces la întregul Kendo UI Core și setul implicit de șabloane UI cu care este livrat. Motivul pentru care jQuery JavaScript Library este inclus este faptul că Kendo îl folosește pentru sarcini comune DOM, evitând în esență reinventarea roții pentru lucrurile pe care jQuery excelează în mod clar la.
API-ul pentru widget-ul de notificare este incredibil de ușor de utilizat și oferă o conexiune foarte rapidă în widget-ul de notificare din cadrul aplicației. De exemplu, pot adăuga următorul element ca container pentru notificarea mea:
Apoi, folosind selectorul foarte comun și sintaxa de înlănțuire a jQuery, obținem o referință la element prin ID-ul său și îl asociem unei instanțe a widgetului de notificare Kendo:
var popupNotification = $ ("# popupNotificare") .kendoNotificare () .data ("kendoNotification"); Prin instanță, este o simplă metodă de a afișa o simplă notificare în colțul din stânga jos al ferestrei de vizualizare a browserului:
popupNotification.show ("Hei there!", "info"); Puteți vedea acest lucru în acțiune prin intermediul următorului JSBin.
Al doilea parametru este unul dintre cele patru șabloane de notificare premade care pot fi imediat utilizate pentru afișarea informațiilor. Cele patru sunt:
... cu fiecare oferind un aspect unic la notificare. Cu siguranță nu vă limitați la acestea și vom examina cum să creați în scurt timp notificări personalizate utilizând șabloane definite de utilizatori.
În afară de aspect, există o serie de opțiuni de configurare care ajută la poziționarea, ascunderea și stivuirea notificărilor. Acest lucru este gestionat prin trecerea unui obiect de configurare care conturează proprietățile de configurare ale obiectului dvs. de notificare. De exemplu, pot actualiza codul din exemplul meu anterior pentru a comuta poziția bulei de notificare la 30 de pixeli din partea de sus a ferestrei de vizualizare, înălțimea de 50 de pixeli și care va dispărea după trei secunde. Vreau, de asemenea, să adaug opțiunea de a oferi un "X", pentru a permite utilizatorului să închidă manual notificarea și să o facă astfel încât notificările să se stiveze spre stânga în loc de unul pe celălalt. Iată cum arată codul:
kendoNotificare (poziție: top: 30, înălțime: 50, autoHideAfter: 3000, stivuire: "stânga", buton: true)
Iată un exemplu, astfel încât să îl puteți vedea în acțiune. Am adăugat un buton în coșul de cumpărături, astfel încât să puteți să-l faceți clic în mod repetat și să vedeți noua direcție de stivuire:
Având poziționarea cu un pas mai departe, puteți să vă poziționați în mod static notificările într-un element de container, în loc să îl afișați numai în contextul ferestrei de vizualizare. Acest lucru se face prin intermediuladăuga la care vă permite să specificați un element țintă care va conține notificările. Este doar o chestiune de a avea un element de container ca acesta: Și adăugând noua proprietate ca aceasta:
kendoNotificare (poziție: top: 30, lățime: "120px", autoHideAfter: 3000, buton: true, appendTo: "#container")
De asemenea, veți dori să vă asigurați că utilizați overflow: auto; pentru elementul containerului pentru a se asigura că notificările se afișează în contextul elementului și nu sângerează.
Iată un alt exemplu live.
După cum am menționat anterior, puteți personaliza aspectul notificărilor utilizând sistemul de template-uri încorporat al lui Kendo. Acest lucru vă permite să utilizați marcarea standard împreună cu jetoanele parametrilor pentru a defini cum și ce informații vor fi redate. Există două modalități de a face acest lucru. Primul este prin includerea marcajului șablonului direct în șablon proprietate a template-uri proprietate de configurare. Să examinăm exemplul de mai jos:
șabloane: [tip: "myAlert", șablon: "Hei acolo, tu # = myMessage #"]
template-uri proprietatea ia un obiect de șabloane care pot fi utilizate pentru un anumit obiect de notificare. Aceasta vă permite să definiți diferite stiluri de notificare, toate apelând prin intermediul unui nume semantic specificat în tip proprietate. În acest exemplu, am creat un șablon de notificare care poate fi apelat ca "MyAlert" și va face notificarea într - un div element care are o clasă numită alertStyle. Da, deoarece aceasta este o marcare standard, șablonul dvs. este complet formatabil prin CSS. Am adăugat următorul stil pentru notificările mele.
.alertStyle graniță: 1px solid; înălțime: 25px; lățime: 180px; fundal: # 990066; culoare: #FFF; font-familie: "Tahoma"; font-size: 12px; padding: 10px;
Continuând, observați delimitatoarele de jetoane, "# =" și "#", în jurul "mesajul meu". Aceste simboluri hash sunt folosite pentru a identifica zonele dintr-un șablon care ar trebui înlocuite cu date când șablonul este executat. Deci, în acest exemplu, așteptarea este că o valoare, la care se face referire "mesajul meu", vor fi transmise șablonului. Acest lucru se face prin intermediul obiectului de notificare spectacol() care poate accepta un prim sau un obiect puternic sau un obiect, urmat de un tip de șablon.
popupNotification.show (myMessage: "cafea comandată!", "myAlert");
Observați că primul parametru este un obiect cu o proprietate numită mesajul meu urmat de un al doilea parametru care este tipul de șablon. Puteți specifica orice număr de proprietăți pentru a trece la șablon, oferindu-vă astfel o putere extraordinară pentru a afișa informații utile bazate pe interacțiunea utilizatorului cu site-ul dvs..
Să aruncăm o privire la acest lucru în acțiune.
Cea de-a doua modalitate, care este probabil cea mai flexibilă și mai ușor de întreținut, este să profitați de sintaxa șablonului Kendo pentru a crea șabloane în paginile dvs. normale de marcare, cum ar fi:
Acest lucru vă permite să le declarați într-un mod mult mai ușor de citit decât să încercați să le includeți într-un obiect JavaScript. Deoarece scenariu etichetă tip este non-standard, este ignorat de browser care permite sistemului de șablon Kendo să analizeze conținutul și să execute codul în timpul execuției.
Cealaltă diferență este în modul în care marcajul șablonului este transmis către șablon proprietate. Veți folosi acum metoda fabricii jQuery, $ (), pentru a apuca o trimitere la șablon și pentru a returna marcajul în interiorul acestuia:
șabloane: [tip: "myAlert", șablon: $ ("# myAlertTemplate"). html ()] Să aruncăm o privire la ea.
În mod clar, definirea marcajului șablonului în acest mod este mult mai ușor de citit și mai ușor de întreținut.
Widget-ul Kendo UI Core Notification oferă o mulțime de flexibilitate și personalizare, permițându-vă să vă păstrați utilizatorii în buclă și să îmbunătățiți în mare măsură experiența generală a utilizatorilor. Și pentru mulți, sintaxa familiară jQuery cunoscută ar trebui să facă o briză pentru a ridica și a alerga cu.
Nu cred ca putem face vreodata suficient pentru a obtine cat mai multe informatii utilizatorilor nostri si pentru a putea sa o facem fara sa folosim o aplicatie externa sau sa blocam experienta utilizatorului este intotdeauna o castigatoare in cartea mea.
Dezvăluire: Lucrez pentru Telerik, producătorul Kendo UI Core.
