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