Noty–jquery Notification plug-in comprehensive analysis _jquery

Noty is a jquery notification (informational hint) plugin, flexible and lightweight, and is a great plugin for replacing the traditional prompts dialog box.

The current latest version is 2.1.0: The latest source code can be obtained from Https://github.com/needim/noty.

Layout style

Supported hint styles with predefined CSS styles for each style:

alert: Default hint Style

Success: Success

Error: Error

Warning: Warning

Information: Information

Supported Layout locations:

top: Top, long strips

topleft/topcenter/topright: Top left/middle/right position, short strip

center/centerleft/centerright: Median/middle left/middle right, short strip

bottomleft/bottomcenter/bottomright: Bottom left/middle/right position, short strip

bottom: bottom, long strips

In addition to the above layout, there is a way to customize the layout of the inline, you need to introduce layouts/inline.js

Install script

Download the latest source from Https://github.com/needim/noty and then introduce the corresponding script file:

<!--jquery file-->
<script type= "Text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.7" /jquery.min.js "></script>
<!--noty main file-->
<script type=" Text/javascript "src=" js/noty/ Jquery.noty.js "></script>
<!--noty the location of the message, where you need to introduce the corresponding script, here for center, you can add multiple layout files-->
< Script type= "Text/javascript" src= "Js/noty/layouts/center.js" ></script>
<!--noty theme style file,-->
<script type= "Text/javascript" src= "Js/noty/themes/default.js" ></script>

If you are using the following version of jquery 1.6, you will also need to introduce promise.js files.

How to use

In general, you can use the Noty (options) global function to create the hint information directly:

Noty ({text: "Noty-jquery notification plug-in-cloud-Habitat community-http://jb51.net/jesu/", Layout: "Center", timeout:5000}) The above code creates a hint message that appears in the middle of the screen and Automatically shuts down after 5 seconds.

Note: If no corresponding layout of the JS file will not be normal rendering.

Default options

Noty has the following options available for setting:

$.noty.defaults = {
  layout: ' Top ',///default layout
  theme: ' Defaulttheme ',//default theme
  type: ' Alert ',//default type
  text: ', Default text
  Dismissqueue:true,//whether to add to queue
  Template: ' <div class= noty_message ' ><span class= ' Noty_text ' ></span><div class= "Noty_close" ></div></div>,//message Default template
  Animation: {//default display and off animation
    Open: {height: ' Toggle '}, close
    : {height: ' Toggle '},
    easing: ' Swing ',
    speed:500//Opening & Closing animation Speed
  },
  Timeout:false,//automatic shutdown time, the default does not automatically close
  force:false,//Add to the queue at the beginning of
  modal: False,//mask
  maxvisible:5,//The maximum visible number of messages in a queue, that is, the number of times a queue is displayed at the same time
  closewith: [' click '],///[' Click ', ' button ', ' H Over '] Closed event, default click Message Close
  callback: {//callback function
    Onshow:function () {},//show before
    aftershow:function () {},//after display C21/>onclose:function () {},//closed before
    afterclose:function () {}//Closed
  },
  buttons:false//button, for display in pop-up message box Show Button
};

Custom Container

The hint information created through the Noty (options) function is added to the body by default, and Noty supports how prompts are displayed in a custom container:

$ ('. Custom_container '). Noty ({text: "Noty-jquery notification plug-in-cloud-dwelling community-http://www.jb51.net/jesu/"});

button and Confirmation dialog box

You can set the button on the cue message like this:

noty {
 text: ' Do you want to continue? ',
 buttons: [
  {addclass: ' btn btn-primary ', text: ' OK ', onclick:function ($noty) {
    This = button element is the current button
    //$noty = $noty element is the current prompt object
    $noty. Close ();
    Noty ({text: ' You clicked on the OK button ', type: ' success '});
   }
  ,
  {addclass: ' btn btn-danger ', Text: ' Cancel ', OnClick: function ($noty) {
    $noty. Close ();
    Noty ({text: ' You clicked Cancel button ', type: ' ERROR '}];}}}
);

The confirmation prompt dialog box in the official demo is also created.

Api

The following APIs are mainly available:

$.noty.get (ID): Get Noty object by ID, generally not used

$.noty.close (ID): Close a noty hint

$.noty.clearqueue (): Emptying the noty in the queue

$.noty.closeall (): Turn off all noty prompts

$.noty.settext (ID, text): Updates the text content of the NOTY hint message

$.noty.settype (ID, type): Update the type of NOTY hint information

Typically, an instance variable is used to access its properties/methods:

var n = noty ({text: "Noty-jquery notification plugin-cloud-Habitat community-http://www.jb51.net/jesu/"});
N.settext ("Embarrassing month-lwme.cnblogs.com"); Update content
n.settimeout (10000);//Set timeout time
n.settype ("error");//update hint type
n.close ();
In addition, Noty has several properties for viewing its status
n.closed//whether the n.showing//is turned off and whether
N.shown//is displayed

The most common use of $.noty space is the Clearqueue () and CloseAll () methods, and several other methods are not commonly used, mainly because Noty IDs are randomly generated.

In addition to the documents that are public, Noty has some properties that are not exposed in the document:

$.noty.queue Message Queuing, Array

$.noty.layouts can get the currently loaded layout, Object

$.noty.themes Get the available topics, Object

$.noty.store Gets the Noty object currently displayed on the page, which can then be manipulated through the API, Array

$.noty.returns Gets the value returned by the Noty (options) function, which returns the Noty object by default, and can be changed to another value to return the ID of the Noty object

In addition, NOTY provides a way to override the Window.alert function:

$.noty.consumealert replaces Window.alert

$.noty.stopconsumealert Cancel Substitution

Noty overall settings are relatively simple, not too many parameter settings, easy to use, especially the default without buttons to make the user point to determine this particular commendable, experience is quite good.

The above Noty–jquery Notice plug-in comprehensive analysis is a small series to share all the content, hope to give you a reference, but also hope that we support the cloud-dwelling community.