overhang.js是一款非常实用的窗口顶部消息通知、提示和确认jQuery插件。实际上它可以在任何指定元素的顶部制作出消息通知框、消息提示框和消息确认框。
安装
可以通过npm或bower来安装overhang.js插件。
$ npm install overhang $ bower install overhang
使用方法
在页面中引入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." });
接收数据
类型为prompt
和confirm
的消息框能够从用户输入中接收数据。要接收数据可以如下操作:
// From a prompt alert($("target-element").data("overhangPrompt")); // From a confirmation (either true or false) alert($("target-element").data("overhangConfirm"));
回调函数
callback
参数是回调函数,它在以下任何一种情况下会被触发:
- prompt点击确认时。
- confirmation点击确认时。
- 带
closeConfirm
为true的消息提示框上的关闭按钮被点击时。 - 消息提示框向上回缩时。
示例代码:
$("body").overhang({ type: "confirm", message: "Are you sure?", // This code will run once an option is clicked. callback: function () { var selection = $("body").data("overhangConfirm"); alert("You made your selection of " + selection); } });
overhang.js插件的github地址为:https://github.com/paulkr/overhang.js