A superb message prompting jQuery plug-in-Noty

Date: 2012-8-20 Source: GBin1.com

Online Demo local download
We have introduced a messaging framework based on jQuery, backbone. js, and underscore. js. Today we will introduce another jQuery messaging plug-in-Noty. It helps us quickly create, warn, prompt, and error message boxes. You must have used the default alert ('..') code. You can use Nody to create a message prompt with more powerful functions. I hope you will like it!
Main features
Built-in alert, warning, error, success, information, and confirm dialog boxes
Supports TOPIC Development
Fully customizable
Allows animation Customization
Different callback methods (onShow, afterShow, onClose, and afterClose) are supported.
How to Use
You can import the corresponding class library as follows:
<Script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script>
 
<! -- Noty -->
<Script type = "text/javascript" src = "js/jquery. noty. js"> </script>
 
<! -- Layouts -->
<Script type = "text/javascript" src = "js/layouts/bottom. js"> </script>
<Script type = "text/javascript" src = "js/layouts/bottings enter. js"> </script>
<Script type = "text/javascript" src = "js/layouts/bottomLeft. js"> </script>
<Script type = "text/javascript" src = "js/layouts/bottomRight. js"> </script>
<Script type = "text/javascript" src = "js/layouts/center. js"> </script>
<Script type = "text/javascript" src = "js/layouts/centerLeft. js"> </script>
<Script type = "text/javascript" src = "js/layouts/centerRight. js"> </script>
<Script type = "text/javascript" src = "js/layouts/inline. js"> </script>
<Script type = "text/javascript" src = "js/layouts/top. js"> </script>
<Script type = "text/javascript" src = "js/layouts/topCenter. js"> </script>
<Script type = "text/javascript" src = "js/layouts/topLeft. js"> </script>
<Script type = "text/javascript" src = "js/layouts/topRight. js"> </script>

<! -- Themes -->
<Script type = "text/javascript" src = "js/themes/default. js"> </script>
Note that the above includes the noty class library, layout code and theme code. You can reference it based on your own needs. This effectively reduces the js code size.
It is very easy to call noty, just use the following code:
Var n = noty ({
Text: 'Do you want to continue? ',
Type: 'alert ',
DismissQueue: true,
Layout: 'center ',
Theme: 'default ',
Buttons :[
{AddClass: 'btn btn-primary ', text:' OK ', onClick: function ($ noty ){
$ Noty. close ();
Noty ({dismissQueue: true, force: true, layout: layout, theme: 'default', text: 'You clicked "OK" button ', type: 'success '});
}
},
{AddClass: 'btn btn-danger ', text: 'cancel', onClick: function ($ noty ){
$ Noty. close ();
Noty ({dismissQueue: true, force: true, layout: layout, theme: 'default', text: 'You clicked "Cancel" button ', type: 'error '});
}
}
]
});
The above Code creates a confirmation box. When the page is loaded, a confirmation box is automatically generated. The location is in the middle of the page, which is controlled by the layout option.
Source: a great message prompting jQuery plug-in-Noty