免费 域名 空间 相册 邮箱 资源 网赚 试用 优惠 工具
教程 设计 三维 学院 办公 网页
素材 PSD 矢量 网页 PPT 动画
美女 唯美 大生活 美图 风景 时尚艺
资讯 综合 专题 热点
您的位置: 广信之家 > 免费资源 > 免费插件 > 文章正文

一个超棒的消息提示jQuery插件 - Noty

时间:08-20 17:32 来源:gbin1.com 整理:广信小编 我要评论(0)
字号:T|T
内容提要:
  前面我们介绍过一款基于jQuery,backbone.js和underscore.js的消息提示框架,今天我们介绍另外一款jQuery的消息提示插件 - Noty。使用它能够帮助我们快速创建,警告,提示

一个超棒的消息提示jQuery插件 - Noty

在线演示   本地下载

前面我们介绍过一款基于jQuery,backbone.js和underscore.js的消息提示框架,今天我们介绍另外一款jQuery的消息提示插件 - Noty。使用它能够帮助我们快速创建,警告,提示和错误信息框。大家肯定都使用过缺省的alert(‘..’)代码吧,使用Nody能够创建出漂亮功能更强大的消息提示,希望大家喜欢!

主要特性

1.内建了alert,warning和error,success,information和confirm对话框

2.支持主题开发

3.完全可定制

4.允许动画定制

5.支持不同的callback方法(onShow,afterShow,onClose,afterClose)等

如何使用

使用非常简答,你导入对应类库,如下:

<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/bottomCenter.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>

注意以上包含了,noty类库,布局代码和主题代码,你可以根据自己的不同需求来引用。有效的缩小了js代码大小。

调用noty非常简单,直接使用如下代码即可:

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'});
          }
        }
      ]
});

以上我们创建了一个确认框代码,当页面加载后,自动生成一个确认框。位置在页面中间,这里通过layout选项控制。

来源:一个超棒的消息提示jQuery插件 - Noty

    相关阅读:

    顶一下
    (0)
    0%
    踩一下
    (0)
    0%
    免责申明:以上内容仅代表原创者观点,其内容未经本站证实,一个超棒的消息提示jQuery插件 - Noty对以上内容的真实性、完整性不作任何保证或承诺,转载目的在于传递更多信息,由此产生的后果与一个超棒的消息提示jQuery插件 - Noty无关;如以上转载内容不慎侵犯了您的权益,请联系我们将会及时处理。
    [责任编辑:广信小编]

    精彩图文

    登录 (请登录发言,并遵守 相关规定)
    如果你对广信之家有任何意见或建议,请到交流平台反馈。到留言板反馈