Friday, January 24, 2014

How to add notifications to UI5

Just playing around with UI5 found out that i currently miss a lighweight notifier widget.

UI5 depends on jQuery and there a countless community plugins that will do such a job.

To make live easier just googling for best jquery notifier plugins and i found some useful blogs with pros ans cons on widely used libraries.

http://ned.im/noty/
After some investigation of 6 Best jQuery Notification Plugins i decided to use the (noty) plugin. The minified library jquery.noty.packaged.min.js has a footprint of 24KB and does not need an additional cascading stylesheet.

Now you can show some notifications like this:

(noty) notification styles

The following snippet will show you how easy it is to use the library.


<head>
<script src="libs/jquery.noty.packaged.min.js" type="text/javascript"></script>
<script>
    // notifier 
    function notify(text, type) {    
      type = type || 'information'; 
      // [alert|success|error|warning|information|confirm]
      noty({
        text: text,
        layout: "topRight",
        type: type,
        timeout: 4000
      });
    } 
</script> 
</head>
<body>
<button onclick="notify('Hello World', 'alert');">Notifiy</button>
</body>
</html>
Thats the reason why i start to love UI5. You have a lot of enterprise widgets for browser and mobile development ready to use, but if you have the need for something special that is not part of UI5 you can easily add additional widgets by your own.

No comments:

Post a Comment

Thank you for your comment!

The comment area is not intended to be used for promoting sites!
Please do not use such links or your comment will be deleted.

Holger

Note: Only a member of this blog may post a comment.