对话框/Tips
顶部消息通知提示确认jQuery插件
PetitQ
Overhang 是一款非常实用的窗口顶部消息通知、提示和确认 jQuery 插件。实际上它可以在任何指定元素的顶部制作出消息通知框、消息提示框和消息确认框。
使用方法:
在页面中引入 jQuery 和 jQuery UI 文件，以及 overhang.js 相关文件。
也想出现在这里？联系我们吧
<script type="text/javascript" src="path/to/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="path/to/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="dist/overhang.min.css" />
<script type="text/javascript" src="dist/overhang.min.js"></script>
通用配置参数:
overhang.js 可以用来制作消息通知框、消息提示框和消息确认框。下面是一些通用的配置参数。
type：消息通知框的类型。类型可以是：success，error，warn，info，prompt 和 confirm。如果你想自定义主题，可以将这个参数留空，然后按照下面的方法来定义主题：
$("body").overhang({
custom: true, // Set custom to true
primary: "#34495E", // 背景颜色
accent: "#F4B350" // 按钮边框的颜色
});
textColor：文本的颜色，默认为白色
message：提示框中的内容
duration：显示提示框的持续时间。默认为 1.5 秒
speed：提示框向下弹出或向上缩回的时间，默认为 500 毫秒
closeConfirm：是否自动关闭提示框，默认为 false
upper：是否将内容全部转换为大写字母。默认为 false
easing：JQuery UI 的 easing 效果。默认为 easeOutBounce
html：该参数设置 message 参数的内容是否为 HTML。默认为 false
消息提示框的代码如下：
// Some error notification$("body").overhang({
type: "error",
message: "You could not be logged in at this time.",
closeConfirm: "true"
});
消息确认框的代码如下：
// Some prompt notification$("body").overhang({
type: "prompt",
message: "What is your name"
});
当使用消息确认框的时候，还可以使用下面的一些额外参数：
yesMessage：确认按钮上的文本。默认为“YES”
noMessage：取消按钮上的文本。默认为“NO”
yesColor：确认按钮的颜色。默认为#2ECC71
noColor：取消按钮的颜色。默认为#E74C3C
使用例子：
// Some confirmation$("body").overhang({
type: "confirm",
yesMessage: "Yes please!",
noMessage: "No thanks."
});
overhang.js 插件的 github 地址为：https://github.com/paulkr/overhang.js
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
