软件 聊天 安全 视频 浏览器 下载 系统 办公 教学 输入法
免费 域名 空间 相册 邮箱 资源 网赚 试用 优惠 工具
教程 设计 三维 学院 办公 网页
素材 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无关;如以上转载内容不慎侵犯了您的权益,请联系我们将会及时处理。
    [责任编辑:广信小编]

    精彩图文

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