0byt3m1n1-V2
Path:
/
home
/
office2017v2.1
/
js
/
jquery_notification
/
[
Home
]
File: index.html
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jQuery notification Plug in</title> <link href="css/jquery_notification.css" type="text/css" rel="stylesheet"/> <script type="text/javascript" src="js/jquery_v_1.4.js"></script> <script type="text/javascript" src="js/jquery_notification_v.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ }); </script> </head> <body> <div class="container"> <h1>jQuery notification Plug-in</h1> <a href='http://9lessons.info'>9lessons.info</a> - <a href='http://androidhive.info'>Ravi Tamada</a> <h2>The Basic Setup</h2> <ul class="ul_points"> <li> Include the jQuery and notification libraries into your document <pre class="javascript"> <script type="text/javascript" src="js/jquery_v_1.4.js"></script> <script type="text/javascript" src="js/jquery_notification_v.1.js"></script> </pre> </li> <li> Include the notification CSS into your document <pre class="javascript"> <link href="css/jquery_notification.css" type="text/css" rel="stylesheet"/> </pre> </li> <li> Call this showNotification() function in by passing parameters <pre class="javascript"> showNotification(); </pre> </li> </ul> <h2>Usage:</h2> <ul class="ul_points"> <li> <h3>Changing Type of notification</h3> This plug in supports four types of major notifications <em>(Success, Error, Warning and Information)</em>. To change the notification type pass parameter type="value" to showNotification() function. <ul class="ol_points"> <li> Showing Success notification (pass parameter type = "success") <pre class="javascript"> showNotification({ message: "This is a sample Success notification", type: "success" }); </pre> Demo: <input type="button" class="button" value="Show Success Message" onclick="return showSuccessMessage()"/> <script type="text/javascript"> function showSuccessMessage(){ showNotification({ type : "success", message: "This is a sample success notification" }); } </script> </li> <li> Showing Error notification (pass parameter type = "error") <pre class="javascript"> showNotification({ message: "This is a sample Error notification!", type: "error" }); </pre> Demo: <input type="button" class="button" value="Show Error Message" onclick="return showErrorMessage()"/> <script type="text/javascript"> function showErrorMessage(){ showNotification({ type : "error", message: "This is a sample success notification" }); } </script> </li> <li> Showing Warning notification (pass parameter type = "warning") <pre class="javascript"> showNotification({ message: "This is a sample Warning notification", type: "warning" }); </pre> Demo: <input type="button" class="button" value="Show Warning Message" onclick="return showWarningMessage()"/> <script type="text/javascript"> function showWarningMessage(){ showNotification({ type : "warning", message: "This is a sample Warning notification" }); } </script> </li> <li> Showing Information notification (pass parameter type = "information") <pre class="javascript"> showNotification({ type : "warning", message: "This is a sample Warning notification" }); </pre> Demo: <input type="button" class="button" value="Show Information Message" onclick="return showInformationMessage()"/> <script type="text/javascript"> function showInformationMessage(){ showNotification({ type : "information", message: "This is a sample Warning notification" }); } </script> </li> </ul> </li> <li> <h3>Auto Close Notification after some seconds</h3> To make notification close automatically after some seconds pass parameter autoClose = true and duration parameter. <pre class="javascript"> showNotification(){ message: "This is Auto Close notification. Message will close after 2 seconds", autoClose: true, duration: 2 } </pre> Demo: <input type="button" class="button" value="Show Auto Close Notification" onclick="return showAutoCloseMessage()"/> <script type="text/javascript"> function showAutoCloseMessage(){ showNotification({ message: "This is Auto Close notification. Message will close after 2 seconds", autoClose: true, duration: 2 }); } </script> </li> <li> <h3>Showing Notification after some seconds</h3> You can delay showing message some seconds once the document is ready. Pass parameter startAfter to function with specific seconds <pre class="javascript"> showNotification(){ message: "This is Auto Close notification. Message will close after 2 seconds", autoClose: true, duration: 2 } </pre> Demo: <input type="button" class="button" value="Show After some seconds" onclick="return showAfterWaitMessage()"/> <script type="text/javascript"> function showAfterWaitMessage(){ showNotification({ message: "This message will be shown after 2 seconds", showAfter: 2 }); } </script> </li> </ul> <br/><br/> <h2>Using notification plugin with Ajax Calls</h2> Below is an example of using this plug in with Ajax calls <pre class="javascript"> $.ajax({ type: "POST", data: post_parmas, url: "sample.php", error: function (msg) { // Error occurred in sending request showNotification({ message: "Oops! an error occurred.", type: "error" // type of notification is error autoClose: true, // auto close to true duration: 5 // display duration }); }, success: function (msg) { showNotification({ message: "Show Ajax result message here!", type: "error" // type of notification is error/success/warning/information, autoClose: true, // auto close to true duration: 5 // message display duration }); } }); </pre> <br/><br/> <h2>Using with PHP</h2> Below is an example of using plugin with PHP code. The following code will display a message by reading PHP Get parameters. <br/>Always place this code at the end of your page. <pre class="php"> <?php if (isset($_GET["type"])) { $message = $_GET["message"]; $type = $_GET["type"]; ?> <script type="text/javascript"> showNotification({ message: "<?php echo $message; ?>", type: "<?php echo $type; ?>", autoClose: true, duration: 5 }); </script> <?php } ?> </pre> <br/> Demo: <a href="?type=error&message=This is sample PHP get parameters reading notification"><input type="button" class="button" value="Show PHP Demo"/></a> </div> <br/><br/><br/> </body> </html>
©
2018.