Share
Garantire che gli utenti finali abbiano quante più informazioni possibili, è l'obiettivo della maggior parte degli sviluppatori. Nel corso degli anni, ci siamo costantemente evoluti nel modo in cui aiutiamo gli utenti a comprendere gli eventi che si verificano, tra cui:
E tante altre esperienze di messaggistica.
Anche a livello di sistema operativo, i browser come Chrome e Firefox ora includono servizi di notifica che possono essere sfruttati e applicazioni come Growl consentono alle applicazioni native di avvisare gli utenti tramite il suo SDK.
Il recente annuncio di Kendo UI Core di essere open source ha aperto una serie di nuovi controlli alla comunità degli sviluppatori che possono sfruttare per creare esperienze davvero interessanti. Uno dei più recenti controlli rilasciati con Kendo UI Core è il widget di notifiche che offre un'API molto flessibile e opzioni dell'interfaccia utente personalizzabili per fornire notifiche all'interno della tua app.
In questo tutorial, esplorerò come utilizzare questo nuovo widget per arricchire le informazioni che possiamo offrire agli utenti.
Per iniziare, dovrai scaricare una copia di Kendo UI Core. Ci sono un paio di modi per farlo:
Accentsconagua
bower installa kendo-ui-core Il modo più semplice e ottimale per iniziare è quello di estrarlo tramite il CDN in modo da poter sfruttare le cache predisposte:
Ciò ti consentirà di accedere a tutti i Kendo UI Core e al set predefinito di modelli dell'interfaccia utente con cui viene fornito. La ragione per cui la libreria JavaScript jQuery è inclusa è perché Kendo lo usa per le comuni attività DOM, evitando essenzialmente di reinventare la ruota per cose che jQuery eccelle chiaramente in.
L'API per il widget di notifica è incredibilmente facile da usare e consente di collegare molto rapidamente il widget di notifica all'interno dell'applicazione. Ad esempio, posso aggiungere il seguente elemento come contenitore per la mia notifica:
Quindi, utilizzando il selettore molto comune e la sintassi concatenata di jQuery, otteniamo un riferimento all'elemento tramite il suo ID e lo associamo a un'istanza del widget di notifica Kendo:
var popupNotification = $ ("# popupNotification") .kendoNotification () .data ("kendoNotification"); Tramite l'istanza, è una semplice chiamata di metodo per visualizzare una semplice notifica nell'angolo in basso a sinistra della finestra del browser:
popupNotification.show ("Ehilà!", "informazioni"); Puoi vederlo in azione tramite il seguente JSBin.
Il secondo parametro è uno dei quattro modelli di notifica premade che possono essere immediatamente sfruttati per visualizzare le informazioni. I quattro sono:
... con ogni offerta un aspetto unico alla notifica. Non sei assolutamente limitato a questi e andremo su come creare notifiche personalizzate utilizzando modelli definiti dall'utente a breve.
Oltre all'aspetto, sono disponibili numerose opzioni di configurazione che aiutano a posizionare, nascondere e impilare le notifiche. Questo viene gestito passando un oggetto di configurazione che delinea le proprietà di configurazione dell'oggetto di notifica. Ad esempio, posso aggiornare il codice nel mio esempio precedente per cambiare la posizione del fumetto di notifica a 30 px dalla parte superiore del viewport, 50 px di altezza e che scomparirà dopo tre secondi. Vorrei anche aggiungere l'opzione per offrire una "X", per consentire all'utente di chiudere la notifica manualmente e far sì che le notifiche si sovrappongano a sinistra anziché una sopra l'altra. Ecco come appare il codice:
kendoNotification (position: top: 30, height: 50, autoHideAfter: 3000, stacking: "left", button: true)
Ecco un esempio in modo da poterlo vedere in azione. Ho aggiunto un pulsante al raccoglitore, in modo che sia possibile fare clic su di esso ripetutamente e vedere la nuova direzione di impilamento:
Portando il posizionamento un ulteriore passo avanti, è possibile posizionare staticamente le notifiche all'interno di un elemento contenitore invece di visualizzarlo solo all'interno del contesto del viewport. Questo è fatto tramiteappendTo che ti consente di specificare un elemento di destinazione che conterrà le tue notifiche. Si tratta solo di avere un elemento contenitore come questo: E aggiungendo la nuova proprietà in questo modo:
kendoNotification (position: top: 30, width: "120px", autoHideAfter: 3000, button: true, appendTo: "#container")
Volete anche assicurarvi di usare il overflow: auto; per l'elemento contenitore per garantire che le notifiche vengano visualizzate nel contesto dell'elemento e non vengano eliminate.
Ecco un altro esempio dal vivo.
Come accennato in precedenza, puoi personalizzare l'aspetto delle tue notifiche utilizzando il sistema di template integrato di Kendo. Ciò consente di utilizzare il markup standard insieme ai token dei parametri per definire come e quali informazioni verranno renderizzate. Ci sono due modi per farlo. Il primo è includendo il markup del modello direttamente nel modello proprietà del modelli proprietà di configurazione. Esaminiamo l'esempio di seguito:
templates: [type: "myAlert", template: "Ehilà, tu # = myMessage #"]
Il modelli la proprietà accetta un oggetto di modelli che può essere utilizzato per un oggetto di notifica specifico. Ciò consente di definire diversi stili di notifica, tutti richiamabili tramite un nome semantico specificato nel file genere proprietà. In questo esempio, ho creato un modello di notifica che è chiamabile come "MyAlert" e renderà la notifica all'interno di a div elemento che ha una classe chiamata alertStyle. Sì, poiché questo è un markup standard, il tuo modello è completamente modificabile tramite CSS. Ho aggiunto il seguente stile alle mie notifiche.
.alertStyle border: 1px solid; altezza: 25px; larghezza: 180 px; sfondo: # 990066; colore: #FFF; font-family: "Tahoma"; font-size: 12px; imbottitura: 10px;
Proseguendo, notare i delimitatori di token, "#" = e "#", in giro "il mio messaggio". Questi simboli di hash vengono utilizzati per identificare le aree in un modello che devono essere sostituite con i dati quando il modello viene eseguito. Quindi in questo esempio, l'aspettativa è che un valore, a cui fa riferimento "il mio messaggio", sarà passato al modello. Questo viene fatto tramite l'oggetto di notifica mostrare() metodo che può accettare un oggetto forte o un oggetto come primo parametro, seguito da un tipo di modello.
popupNotification.show (myMessage: "ordered coffee!", "myAlert");
Si noti che il primo parametro è un oggetto con una proprietà chiamata il mio messaggio seguito da un secondo parametro che è il tipo di modello. È possibile specificare qualsiasi numero di proprietà da passare al modello, offrendo così un enorme potere di visualizzare informazioni utili in base all'interazione dell'utente con il proprio sito.
Diamo un'occhiata a questo in azione.
Il secondo modo, che è probabilmente il metodo più flessibile e manutenibile, è quello di sfruttare la sintassi dei template di Kendo per creare template all'interno delle normali pagine di markup, come questo:
Ciò consente di dichiararli in un modo sostanzialmente più leggibile rispetto al tentativo di includerli in un oggetto JavaScript. Perché il copione etichetta genere è non standard, è ignorato dal browser che consente al sistema di template Kendo di analizzare i contenuti ed eseguire il codice in fase di runtime.
L'altra differenza è nel modo in cui il markup del template viene passato al modello proprietà. Ora utilizzerai il metodo factory di jQuery, $ (), per prendere un riferimento al modello e restituire il codice all'interno di esso:
templates: [type: "myAlert", template: $ ("# myAlertTemplate"). html ()] Diamo un'occhiata a questo.
Chiaramente, la definizione del markup del template in questo modo è molto più leggibile e mantenibile.
Il widget Kendo UI Core Notification offre molta flessibilità e personalizzazione, consentendo di mantenere gli utenti in loop e migliorare notevolmente l'esperienza utente complessiva. E per molti, la familiare sintassi simile a jQuery dovrebbe essere un gioco da ragazzi da imparare e da usare.
Non penso che potremo mai fare abbastanza per ottenere quante più informazioni possibili ai nostri utenti e poterlo fare senza usare un'app esterna o bloccare l'esperienza dell'utente è sempre una vittoria nel mio libro.
Rivelazione: Lavoro per Telerik, il creatore di Kendo UI Core.
