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:消息通知框的类型。类型可以是:successerrorwarninfopromptconfirm

    如果你想自定义主题,可以将这个参数留空,然后按照下面的方法来定义主题:

    $("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."
});                  
                
接收数据

类型为promptconfirm的消息框能够从用户输入中接收数据。要接收数据可以如下操作:

// 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