`
jjfat
  • 浏览: 282515 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

阅读更多
日期:2012-8-20  来源:GBin1.com

 

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

在线演示  本地下载

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

主要特性

  • 内建了alert,warning和error,success,information和confirm对话框
  • 支持主题开发
  • 完全可定制
  • 允许动画定制
  • 支持不同的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选项控制。



0
3
分享到:
评论

相关推荐

    vue-noty-围绕Noty的Vue.js 2包装器-Vue.js开发

    入门使用npm安装:$ npm install vuejs-noty导入并注册Vue plu vuejs-noty一个围绕Noty的Vue JS包装器。 为Vue开发的2。入门使用npm安装:$ npm install vuejs-noty导入并注册Vue插件:从'vue'导入Vue从'vuejs-noty'...

    jQuery提醒插件noty.zip

    noty 是一个很有用的 jQuery 插件,用于创建 alert, success, error and confirmation 信息提示框,替换浏览器标准的对话框。每个提醒都是添加队列并进行显示的。 标签:noty

    angular-noty:Noty的包装器-酷似咆哮的通知

    npm install gulp -gnpm installbower installgulp ##如何在项目中使用它将链接添加到angular-noty.dist.js并确保项目中包含jquery。 将notyModule作为依赖项模块添加到您的主要angular模块。 在某处注入noty ,您...

    50个最好的JQuery插件大全

    13. **通知提示插件**:如Noty或PNotify,创建各种类型的提示消息,如警告、信息或成功提示。 14. **响应式设计插件**:如 respond.js 或 picturefill,帮助老旧浏览器支持响应式布局,实现跨设备兼容。 15. **...

    noty – jQuery通知插件全面解析

    总的来说,noty是一个功能齐全且易于使用的jQuery通知插件,能够帮助开发者轻松实现各种提示功能,同时提供了丰富的自定义选项以满足不同项目的需求。通过灵活的布局和样式设定,noty能够无缝融入各种网站设计,提升...

    title-noty:简单的插件通过刷新标题名称来通知信息

    标题titleNoty 一个简单的插件,可通过刷新标题名称来通知信息,在当前页面可见时取消消息通知。 香草javascript,无依赖性,经过压缩后小于3kb 。 #安装 bower install title - noty #用法现在支持三种类型:闪存...

    强大的消息插件(jquery)

    jQuery消息插件通常提供一个全局函数,如`$.notify`,用于创建消息。例如,创建一条简单的成功消息: ```javascript $.notify("操作成功", { className: "success", }); ``` 这里,`"操作成功"`是消息文本,`...

    jQuery插件集合

    jQuery,作为一个广泛使用的JavaScript库,极大地简化了网页的DOM操作、事件处理、动画设计和Ajax交互。这个"jQuery插件集合"显然包含了多种用于增强和扩展jQuery功能的插件,使得开发者可以更轻松地实现复杂的功能...

    Jquery各种消息提示框

    提到的"jquery-notification--消息提示"可能指的是一个jQuery通知插件,这些插件如jQueryGrowl、Noty或PNotify,它们提供了一种更动态、更吸引人的消息提示方式。比如,使用Noty创建一个警告消息: ```javascript ...

    使用非常简单的Noty插件

    "使用非常简单的Noty插件" 提供了一个优雅的解决方案,帮助开发者创建比JavaScript原生`alert`更美观且功能更丰富的弹出信息。 Noty是一个流行的JavaScript通知插件,它允许开发者创建具有多种样式和动画效果的通知...

    noty-2.3.4

    《noty-2.3.4:一款出色的JavaScript通知插件》 在现代网页开发中,用户界面的交互性与反馈机制是至关重要的。而"noty-2.3.4"正是这样一款专为提升网页用户体验而设计的JavaScript通知插件。这款插件以其强大的功能...

    noty2:rutorrent 插件 _noty 的替代品。 它使用 Chrome 通知系统

    它使用 Web Notifications API 而不是 jQuery 插件 noty。 为什么我应该使用它而不是只使用 Notifications API? 通知 API 在 Chrome 和 Firefox 下的工作方式不同。 Firefox 将在几秒钟后关闭通知,而 Chrome 会...

    jsp右下角弹出消息框多个示例

    例如,`bootstrap-growl`是一个常用的jQuery插件,它可以方便地在页面右下角显示Bootstrap风格的通知。首先,你需要在你的项目中引入jQuery和bootstrap-growl的CSS及JS文件: ```html &lt;!-- jQuery --&gt; ...

    Noty-crx插件

    语言:English 从一开始就注意 将起始页面转换为具有待办事项和列表项支持的简约记事本。

    noty-config:Noty.js 的 Jiss 主题与 Bootstrap 3 兼容

    text: '这是一个 Noty 消息', type: 'info', // 可以是 info, success, warning, error }); n.show(); ``` 接着,我们来配置 Jiss 主题。Noty.js 允许用户自定义主题,包括颜色、布局、动画等。Jiss 主题是为了与...

    noty:无需依赖项的通知库,可以轻松创建警报-成功-错误-警告-信息-确认消息,作为标准警报对话框的替代方案

    NOTY是一个通知库,可轻松创建警报-成功-错误-警告-信息-确认消息,以替代标准警报对话框。 通知可以放置在; 顶部-左上- topCenter - topRight -中心- centerLeft - centerRight -底- BOTTOMLEFT - bottomCenter -...

    asp.net 右下角弹出消息对话框

    - 许多开源的jQuery插件如`SweetAlert`、`Noty`或`toastr`提供了创建自定义对话框的功能,包括右下角弹出。它们通常提供丰富的配置选项,如图标、颜色、动画效果等。 - 在服务器端代码(C#或VB.NET)中,可以使用`...

    html的28个弹出提示代码

    9. **jQuery通知插件**:如Noty、PNotify等,提供丰富的预设样式和自定义选项,方便快速构建提示功能。 10. **HTML5历史API**:结合History API,可以实现无刷新的弹出提示,保持URL不变,适合单页应用。 11. **...

Global site tag (gtag.js) - Google Analytics