jQuery通知提示插件overhang.js

使用方法

引用了最新版本的jQuery和jQuery UI。

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/jqueryui/1.12.0/jquery-ui.js"></script>

引用的JavaScript和CSS文件。

<link rel="stylesheet" type="text/css" href="dist/overhang.min.css" />
<script type="text/javascript" src="dist/overhang.min.js"></script>

配置参数

overhang.js有3个主要特点-通知、提示和确认。大多数的选择是定制所有这些特征。

默认值

type

这是您想要显示通知的类型。预设的类型都是成功，错误，警告信息，提示和确认。

如果你想使用一个自定义的主题，离开这个参数的空白，按照自定义的主题设置的规则。

$("body").overhang({
   custom: true, 
   primary: "#34495E", 
   accent: "#F4B350" 
});

• primary - 警报的背景颜色

• accent - 底边框颜色

如果你想显示一个提示或确认警报，设置类型促使或确认，分别。提示和确认都有预设的主题，但你可以自定义他们利用自定义选项

textColor

文本的颜色。默认设置为白色。

message

要在您的通知中显示的消息。

duration

以秒为单位显示的警报持续时间。默认值为 1.5 秒。

speed

下降速度，并提高警报以毫秒为单位。默认设置为500。

closeConfirm

设置为true，用户点击关闭警报，而不是它自动消失。

upper

设置为 true，如果你想要你所有字母均为大写的消息。默认值设置为 false。

easing

JQuery UI 缓动的效果的选项。默认设置为"easeOutBounce"

html

这是一个布尔值，如果消息参数应被解释为 HTML。默认值设置为 false。

基本的警报通知的例子

// Some error notification
$("body").overhang({
   type: "error",
   message: "You could not be logged in at this time.",
   closeConfirm: "true"
});

提示

当使用提示，所有你需要做的是设置类型参数"prompt"

提示的例子

// Some prompt notification
$("body").overhang({
   type: "prompt",
   message: "What is your name"
});

确认

在使用时确认，有您可以自定义的附加选项。

yesMessage

这是将显示"true"按钮上的文本。默认设置为"Yes"。

noMessage

这是将显示"false"按钮上的文本。默认设置为"No"。

yesColor

这是按钮的"true"的颜色。默认设置为"#2ECC71"。

noColor

这是"false"按钮的颜色。默认设置为"#E74C3C"。

验证实例

// Some confirmation
$("body").overhang({
   type: "confirm",
   yesMessage: "Yes please!",
   noMessage: "No thanks."
});

检索数据

提示和确认的功能都允许您从用户获取数据。回复存储作为目标元素的 DOM 中的数据。

要检索的数据应使用 jQuery 像这样┱

// From a prompt
alert($("target-element").data("overhangPrompt"));
// From a confirmation (either true or false)
alert($("target-element").data("overhangConfirm"));

如果用户还未予以响应，默认值将被设置为 null。

回调

该选项回调参数是一个函数，一旦用户上悬通知进行了操作。在任何这些情况后将运行回调┱

• 提交的提示

• 确认选择

• 与真正的closeConfirm 的正常通知关闭按钮

• 正常的通知的提高

注┱对于确认或提示，回调将不运行时单击关闭按钮，并且没有选定。

例子

$("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);
    }
});