noty是一个jQuery的通知(信息提示)插件,灵活轻便,是一个非常棒的用于替代传统提示对话框的插件。
当前最新版本为2.1.0: 从 https://github.com/needim/noty 可以获取最新源代码。
布局样式
支持的提示样式,每种样式都有预定义好的css样式:
"background-color: #ccffcc">支持的布局位置:
"htmlcode">
如果你使用的是jQuery 1.6以下版本, 那么还需要引入promise.js文件。 使用方法 一般情况下,直接使用noty(options)全局函数来创建提示信息即可: noty({text: "noty - jQuery 通知插件 - -http://jb51.net/jesu/", layout: "center", timeout: 5000})以上代码将创建一个在屏幕中间显示的提示信息,并在5秒后自动关闭。 注意:如果没有对应布局的js文件将不会被正常呈现。 默认选项 noty有以下可供设置的选项: 自定义容器 通过noty(options)函数创建的提示信息默认被添加到body上, noty支持在自定义容器中显示提示的方式: $('.custom_container').noty({text: "noty - jQuery 通知插件 - - https://www.jb51.net/jesu/"}); 按钮及确认对话框 可以像这样设置提示信息上的按钮: 主要有以下api可用: "htmlcode">
而$.noty空间最常用的就是clearQueue()和closeAll()方法了,其他几个方法一般不被使用,主要是因为noty的id是随机生成的。 除了文档里公开的,noty还有一些没在文档里公开的属性: •$.noty.queue 消息队列, Array •$.noty.layouts 可以获取当前加载的布局, Object •$.noty.themes 获取可用的主题, Object •$.noty.store 获取当前显示在页面中的noty对象,然后可以通过api进行操作, Array •$.noty.returns 获取noty(options)函数返回的值, 默认为object返回noty对象,可以改成其他值返回noty对象的id 此外,noty还提供了方法用来替代window.alert函数: •$.noty.consumeAlert 替代window.alert •$.noty.stopConsumeAlert 取消替代 noty整体设置比较简单,没有过多的参数设置,使用起来也很方便,特别是默认不用按钮来让用户点确定这点特别值得称赞,体验相当不错。 以上这篇noty – jQuery通知插件全面解析就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
<!--jQuery文件-->
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.min.js">
$.noty.defaults = {
layout: 'top', // 默认布局
theme: 'defaultTheme', // 默认主题
type: 'alert', // 默认类型
text: '', //默认文本
dismissQueue: true, // 是否添加到队列
template: '<div class="noty_message"><span class="noty_text"></span><div class="noty_close"></div></div>', // 消息默认模板
animation: { //默认的显示及关闭动画
open: {height: 'toggle'},
close: {height: 'toggle'},
easing: 'swing',
speed: 500 // opening & closing animation speed
},
timeout: false, // 自动关闭时间,默认不会自动关闭
force: false, // 添加到队列开始处
modal: false, // 遮罩
maxVisible: 5, // 一个队列的消息最大可见数量, 即一个队列中同一时间最多显示的数量
closeWith: ['click'], // ['click', 'button', 'hover'] 关闭的事件,默认点击消息关闭
callback: { // 回调函数
onShow: function() {}, // 显示之前
afterShow: function() {}, // 显示之后
onClose: function() {}, // 关闭之前
afterClose: function() {} // 关闭之后
},
buttons: false // 按钮,用于在弹出的消息框中显示按钮
};
noty({
text: '你要继续吗"color: #ff00ff">API
var n = noty({text: "noty - jQuery 通知插件 - - https://www.jb51.net/jesu/"});
n.setText("囧月 - lwme.cnblogs.com"); // 更新内容
n.setTimeout(10000); // 设置超时时间
n.setType("error"); // 更新提示类型
n.close();
// 此外, noty还有几个属性用于查看它的状态
n.closed // 是否已关闭
n.showing // 是否正在显示
n.shown // 是否已显示
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]