Home > Article > Web Front-end > What is the usage of message in jquery

What is the usage of message in jquery

WBOYOriginal: 2021-12-29 15:46:432353browse

In jquery, the message plug-in is used to display feedback messages in an overlay. The messages will automatically disappear after a period of time. You can also speed up hiding the information by moving the mouse or clicking anywhere. The syntax is "$() .message("Text to be displayed");".

The operating environment of this tutorial: windows10 system, jquery3.2.1 version, Dell G3 computer.

What is the usage of message in jquery

The Query Message plugin allows you to easily display feedback messages in an overlay. The message will automatically disappear after a while, no need to click the "OK" button, etc. Users can quickly hide information by moving the mouse or clicking anywhere.

Sometimes when the page is loading, a small prompt box needs to pop up in the lower right corner of the page to display some prompt information to the user. This effect can be easily achieved by using the jQuery message plug-in. Before I introduce the use of methods in the message plug-in.

$(function() {
  $().message("Hello world!");
  // or
  $(".feedback").message();
});

Examples are as follows:

<html>
<head>
<meta charset="utf-8">
<title>jQuery Growl 插件</title>
<script src="https://cdn.staticfile.org/jquery//2.0.2/jquery.min.js" type="text/javascript"></script>
<script src="https://static.runoob.com/assets/jquery/jquery.growl/javascripts/jquery.growl.js" type="text/javascript"></script>
<link href="https://static.runoob.com/assets/jquery/jquery.growl/stylesheets/jquery.growl.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul>
<li>
<a class="error" href="#">错误!</a>
</li>
<li>
<a class="notice" href="#">提醒!</a>
</li>
<li>
<a class="warning" href="#">警告!</a>
</li>
</ul>
</body>
</html>

jquery:

$(function() {
    $.growl({
      title: "消息标题",
      message: "消息内容!"
    });
    $(&#39;.error&#39;).click(function(event) {
      event.preventDefault();
      event.stopPropagation();
      return $.growl.error({
      title: "错误标题",
        message: "错误消息内容!"
      });
    });
    $(&#39;.notice&#39;).click(function(event) {
      event.preventDefault();
      event.stopPropagation();
      return $.growl.notice({
      title: "提醒标题",
        message: "提醒消息内容!"
      });
    });
    
    return $(&#39;.warning&#39;).click(function(event) {
      event.preventDefault();
      event.stopPropagation();
      return $.growl.warning({
      title: "警告标题",
        message: "警告消息内容!"
      });
    });
});

Output results:

What is the usage of message in jquery

Related video tutorials Recommended: jQuery video tutorial

The above is the detailed content of What is the usage of message in jquery. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：what is css inlineNext article：what is css inline

See more

What is the usage of message in jquery

Related articles