Share
Zorgen dat eindgebruikers zoveel mogelijk informatie hebben, is het doel van de meeste ontwikkelaars. In de loop der jaren hebben we voortdurend de manier ontwikkeld waarop we gebruikers helpen gebeurtenissen die zich voordoen te begrijpen, zoals:
En zo veel andere berichtenuitwisselingservaringen.
Zelfs op het niveau van het besturingssysteem bevatten browsers zoals Chrome en Firefox nu meldingsservices die kunnen worden gebruikt en toepassingen zoals Growl staan native applicaties toe om gebruikers te waarschuwen via de SDK.
De recente aankondiging dat Kendo UI Core open-sourced is, heeft een schat aan nieuwe besturingselementen voor de ontwikkelaarscommunity geopend die ze kunnen gebruiken om een aantal zeer coole ervaringen op te bouwen. Een van de nieuwste besturingselementen die is uitgebracht met Kendo UI Core is de widget Meldingen, die een zeer flexibele API en aanpasbare gebruikersinterface-opties biedt voor het aanbieden van meldingen in uw app.
In deze zelfstudie zal ik verkennen hoe deze nieuwe widget kan worden gebruikt om de informatie die we gebruikers kunnen bieden op te fleuren.
Om te beginnen, moet je een exemplaar van Kendo UI Core downloaden. Er zijn een aantal manieren om dit te doen:
Accentsconagua
prieel installeer kendo-ui-core De eenvoudigste en meest optimale manier om aan de slag te gaan, is door het in te trekken via het CDN, zodat u kunt profiteren van primercaches:
Dit geeft je toegang tot alle Kendo UI Core en de standaard set UI-sjablonen die het bevat. De reden dat de JavaScript-bibliotheek jQuery is opgenomen, is omdat Kendo deze gebruikt voor algemene DOM-taken, waarbij het wiel in feite wordt omzeild voor dingen waar jQuery duidelijk in uitblinkt.
De API voor de meldingswidget is ongelofelijk eenvoudig te gebruiken en zorgt ervoor dat de meldingswidget zeer snel in uw toepassing wordt bekabeld. Als voorbeeld kan ik het volgende element toevoegen als een container voor mijn melding:
Vervolgens, met behulp van de zeer algemene selector en chaining-syntaxis van jQuery, krijgen we een verwijzing naar het element via zijn ID en koppelen het aan een instantie van de Kendo-meldingswidget:
var popupNotification = $ ("# popupNotification") .kendoNotification () .data ("kendoNotification"); Via de instantie is het een eenvoudige methode om een eenvoudige melding in de linkerbenedenhoek van het kijkvenster van de browser weer te geven:
popupNotification.show ("Hey there!", "info"); U kunt dit in actie zien via de volgende JSBin.
De tweede parameter is een van de vier vooraf ingestelde notificatiesjablonen die onmiddellijk kunnen worden gebruikt om informatie weer te geven. De vier zijn:
... met elk aanbod een unieke uitstraling aan de melding. Je bent hier zeker niet toe beperkt en we zullen kort bespreken hoe je aangepaste meldingen kunt maken met behulp van door de gebruiker gedefinieerde sjablonen.
Naast het uiterlijk zijn er een aantal configuratieopties beschikbaar die helpen bij het positioneren, verbergen en stapelen van de meldingen. Dit wordt afgehandeld door een configuratieobject door te geven dat de configuratie-eigenschappen van uw meldingsobject schetst. Ik kan bijvoorbeeld de code in mijn vorige voorbeeld bijwerken om de positie van de meldingsbel te wijzigen in 30 px vanaf de bovenkant van de viewport, 50 px hoog en na drie seconden verdwijnt deze. Ik wil ook de optie toevoegen om een 'X' aan te bieden, zodat de gebruiker de melding handmatig kan sluiten en ervoor kan zorgen dat de meldingen naar links worden gestapeld in plaats van boven op elkaar. Dit is hoe de code eruit ziet:
kendoNotification (positie: top: 30, height: 50, autoHideAfter: 3000, stacking: "left", button: true)
Hier is een voorbeeld, zodat u het in actie kunt zien. Ik heb een knop aan de prullenbak toegevoegd, zodat je er herhaaldelijk op kunt klikken om de nieuwe stapelrichting te zien:
Door de positionering een stap verder te brengen, kunt u uw meldingen statisch positioneren binnen een containerelement in plaats van deze alleen binnen de context van het kijkvenster weer te geven. Dit gebeurt viaappendTo waarmee u een doelelement kunt opgeven dat uw meldingen zal bevatten. Dit is alleen een kwestie van een containerelement zoals dit hebben: En het toevoegen van de nieuwe eigenschap als volgt:
kendoNotification (positie: top: 30, width: "120px", autoHideAfter: 3000, button: true, appendTo: "#container")
Je wilt ook zeker weten dat je de overloop: automatisch; voor het containerelement om ervoor te zorgen dat de meldingen worden weergegeven in de context van het element en niet uitvloeien.
Hier is nog een levend voorbeeld.
Zoals ik eerder al zei, kun je het uiterlijk van je meldingen aanpassen met het ingebouwde sjablonensysteem van Kendo. Hiermee kunt u standaardmarkeringen gebruiken in combinatie met parameter-tokens om te definiëren hoe en welke informatie wordt weergegeven. Er zijn twee manieren om dit te doen. De eerste is door de sjabloonopmaak direct in de sjabloon eigendom van de templates configuratie-eigenschap. Laten we het onderstaande voorbeeld eens bekijken:
sjablonen: [type: "myAlert", sjabloon: "Hallo daar, jij # = myMessage #"]
De templates eigenschap neemt een object op van sjablonen die kunnen worden gebruikt voor een specifiek meldingsobject. Hiermee kunt u verschillende meldingsstijlen definiëren, allemaal opvraagbaar via een semantische naam die is opgegeven in de type eigendom. In dit voorbeeld heb ik een meldingssjabloon gemaakt die kan worden opgevraagd "MyAlert" en zal de melding binnen een div element dat een klasse heeft genaamd alertStyle. Ja, omdat dit standaard opmaak is, is uw sjabloon volledig vormbaar via CSS. Ik heb de volgende styling toegevoegd aan mijn meldingen.
.alertStyle border: 1px solid; hoogte: 25px; breedte: 180 px; achtergrond: # 990066; kleur: #FFF; font-family: "Tahoma"; lettergrootte: 12px; opvulling: 10px;
Ga verder met de tekenbegrenzers, "# =" en "#", in de omgeving van "mijn bericht". Deze hash-symbolen worden gebruikt om gebieden in een sjabloon te identificeren die moeten worden vervangen door gegevens wanneer de sjabloon wordt uitgevoerd. Dus in dit voorbeeld is de verwachting dat een waarde waarnaar wordt verwezen door "mijn bericht", wordt doorgegeven aan de sjabloon. Dit gebeurt via de notification-objecten laten zien() methode die een sterk of een object als de eerste parameter kan accepteren, gevolgd door een sjabloontype.
popupNotification.show (mijnMessage: "ordered coffee!", "myAlert");
Merk op dat de eerste parameter een object is met een eigenschap genaamd mijn bericht gevolgd door een tweede parameter die het type sjabloon is. U kunt elk aantal eigenschappen opgeven dat aan de sjabloon moet worden doorgegeven, waardoor u enorme kracht heeft om nuttige informatie weer te geven op basis van gebruikersinteractie met uw site.
Laten we dit in actie bekijken.
De tweede manier, die waarschijnlijk de meest flexibele en onderhoudbare methode is, is om te profiteren van de sjabloonsyntaxis van Kendo om sjablonen te maken binnen uw normale markup-pagina's, zoals deze:
Hiermee kunt u ze op een aanzienlijk beter leesbare manier declareren dan wanneer u ze probeert toe te voegen aan een JavaScript-object. Omdat het script label type is niet standaard, het wordt genegeerd door de browser waardoor het Kendo-sjabloon systeem de inhoud kan ontleden en de code tijdens runtime kan uitvoeren.
Het andere verschil zit in de manier waarop de sjabloonmarkering wordt doorgegeven aan de sjabloon eigendom. U gebruikt nu de fabrieksmethode van jQuery, $ (), om een verwijzing naar de sjabloon te pakken en de markup erin terug te sturen:
sjablonen: [type: "myAlert", sjabloon: $ ("# myAlertTemplate"). html ()] Laten we er eens naar kijken.
Het is duidelijk dat het op deze manier definiëren van de sjabloonopmaak veel leesbaarder en onderhoudbaarder is.
De Kendo UI Core Notification-widget biedt veel flexibiliteit en maatwerk, zodat u uw gebruikers op de hoogte kunt houden en de algehele gebruikerservaring aanzienlijk kunt verbeteren. En voor velen zou de bekende jQuery-achtige syntaxis het een eitje moeten maken om mee op te nemen en te gebruiken.
Ik denk niet dat we ooit genoeg kunnen doen om zoveel mogelijk informatie aan onze gebruikers te geven en in staat zijn om het te doen zonder een externe app te gebruiken of de gebruikerservaring te blokkeren, is altijd een overwinning in mijn boek.
openbaring: Ik werk voor Telerik, de maker van Kendo UI Core.
