中国最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2

Jquery集合

浏览声明

UI

分类插件

模态框

滚动轮播

拖拉排序

多选框

滚动条

Loading

移动端

提示框

功能性插件

瀑布流

  • CSS3立方体小照片
  • D3.js logo可视化库 D3.js
  • 图片处理

    banner特效

    jQuery通知提示插件overhang.js

    阅读 (2426)

    ie兼容10
    插件描述: overhang.js 是一个JQuery插件显示即时通知、 确认或给定元素中的提示。

    使用方法

    引用了最新版本的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);
        }
    });



    关闭
    程序员人生