科技助力经济发展

© 2024  TMTforum  沪ICP备15013635号-21
首页 声音 开源 正文

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

作者：GBin1.com 时间：2012-08-21 0

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

主要特性

  • 内建了alert，warning和error，success，information和confirm对话框
  • 支持主题开发
  • 完全可定制
  • 允许动画定制
  • 支持不同的callback方法(onShow，afterShow，onClose，afterClose)等

如何使用

使用非常简答，你导入对应类库，如下：



  
 
 
  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

注意以上包含了，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选项控制。



本地下载

TAG：jQuery插件Noty消息提示

fengsan

海内存知己,天涯若比邻
觉得文章不错，微信扫描分享好友

热门文章

© 2011 - 2020  钛锋网  TMTForum.com  沪ICP备15013635号