在线演示 本地下载
前面我们介绍过一款基于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选项控制。
分享到:
相关推荐
入门使用npm安装:$ npm install vuejs-noty导入并注册Vue plu vuejs-noty一个围绕Noty的Vue JS包装器。 为Vue开发的2。入门使用npm安装:$ npm install vuejs-noty导入并注册Vue插件:从'vue'导入Vue从'vuejs-noty'...
noty 是一个很有用的 jQuery 插件,用于创建 alert, success, error and confirmation 信息提示框,替换浏览器标准的对话框。每个提醒都是添加队列并进行显示的。 标签:noty
npm install gulp -gnpm installbower installgulp ##如何在项目中使用它将链接添加到angular-noty.dist.js并确保项目中包含jquery。 将notyModule作为依赖项模块添加到您的主要angular模块。 在某处注入noty ,您...
13. **通知提示插件**:如Noty或PNotify,创建各种类型的提示消息,如警告、信息或成功提示。 14. **响应式设计插件**:如 respond.js 或 picturefill,帮助老旧浏览器支持响应式布局,实现跨设备兼容。 15. **...
总的来说,noty是一个功能齐全且易于使用的jQuery通知插件,能够帮助开发者轻松实现各种提示功能,同时提供了丰富的自定义选项以满足不同项目的需求。通过灵活的布局和样式设定,noty能够无缝融入各种网站设计,提升...
标题titleNoty 一个简单的插件,可通过刷新标题名称来通知信息,在当前页面可见时取消消息通知。 香草javascript,无依赖性,经过压缩后小于3kb 。 #安装 bower install title - noty #用法现在支持三种类型:闪存...
jQuery消息插件通常提供一个全局函数,如`$.notify`,用于创建消息。例如,创建一条简单的成功消息: ```javascript $.notify("操作成功", { className: "success", }); ``` 这里,`"操作成功"`是消息文本,`...
jQuery,作为一个广泛使用的JavaScript库,极大地简化了网页的DOM操作、事件处理、动画设计和Ajax交互。这个"jQuery插件集合"显然包含了多种用于增强和扩展jQuery功能的插件,使得开发者可以更轻松地实现复杂的功能...
提到的"jquery-notification--消息提示"可能指的是一个jQuery通知插件,这些插件如jQueryGrowl、Noty或PNotify,它们提供了一种更动态、更吸引人的消息提示方式。比如,使用Noty创建一个警告消息: ```javascript ...
"使用非常简单的Noty插件" 提供了一个优雅的解决方案,帮助开发者创建比JavaScript原生`alert`更美观且功能更丰富的弹出信息。 Noty是一个流行的JavaScript通知插件,它允许开发者创建具有多种样式和动画效果的通知...
《noty-2.3.4:一款出色的JavaScript通知插件》 在现代网页开发中,用户界面的交互性与反馈机制是至关重要的。而"noty-2.3.4"正是这样一款专为提升网页用户体验而设计的JavaScript通知插件。这款插件以其强大的功能...
它使用 Web Notifications API 而不是 jQuery 插件 noty。 为什么我应该使用它而不是只使用 Notifications API? 通知 API 在 Chrome 和 Firefox 下的工作方式不同。 Firefox 将在几秒钟后关闭通知,而 Chrome 会...
例如,`bootstrap-growl`是一个常用的jQuery插件,它可以方便地在页面右下角显示Bootstrap风格的通知。首先,你需要在你的项目中引入jQuery和bootstrap-growl的CSS及JS文件: ```html <!-- jQuery --> ...
语言:English 从一开始就注意 将起始页面转换为具有待办事项和列表项支持的简约记事本。
text: '这是一个 Noty 消息', type: 'info', // 可以是 info, success, warning, error }); n.show(); ``` 接着,我们来配置 Jiss 主题。Noty.js 允许用户自定义主题,包括颜色、布局、动画等。Jiss 主题是为了与...
NOTY是一个通知库,可轻松创建警报-成功-错误-警告-信息-确认消息,以替代标准警报对话框。 通知可以放置在; 顶部-左上- topCenter - topRight -中心- centerLeft - centerRight -底- BOTTOMLEFT - bottomCenter -...
- 许多开源的jQuery插件如`SweetAlert`、`Noty`或`toastr`提供了创建自定义对话框的功能,包括右下角弹出。它们通常提供丰富的配置选项,如图标、颜色、动画效果等。 - 在服务器端代码(C#或VB.NET)中,可以使用`...
9. **jQuery通知插件**:如Noty、PNotify等,提供丰富的预设样式和自定义选项,方便快速构建提示功能。 10. **HTML5历史API**:结合History API,可以实现无刷新的弹出提示,保持URL不变,适合单页应用。 11. **...