最新活动温馨提示:99元终身VIP,整站资源免费下载!
头像

iosOverlay.js苹果手机操作提示

来源:http://www.erdangjiade.com/ 二当家的 2015-08-21 07:03浏览(1481)

本文演示了IOS常用的四种不同的提示效果,兼容所有浏览器。

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,99元整站资源免费下载!3、充值VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:368848856 在线 充值

iosOverlay.js苹果手机操作提示
分类:悬浮层/弹出层 > 弹窗 难易:中级
查看演示 下载资源: 110

关注微信号获取此Demo视频教程:

下载资源 下载积分: 30 积分

HTML

<p class="container">
      <button id="loading" class="btn">Loading Spinner</button>
      <button id="checkMark" class="btn">Success</button>
      <button id="cross" class="btn">Error</button>
</p>

引入相关组件

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/iosOverlay.css">
<script src="js/jquery.min.js"></script>
<script src="js/iosOverlay.js"></script>
<script src="js/custom.js"></script>

Loading Spinner

$(document).on("click", "#loading",
function(e) {
    var opts = {
        lines: 13,
        // The number of lines to draw
        length: 11,
        // The length of each line
        width: 5,
        // The line thickness
        radius: 17,
        // The radius of the inner circle
        corners: 1,
        // Corner roundness (0..1)
        rotate: 0,
        // The rotation offset
        color: '#FFF',
        // #rgb or #rrggbb
        speed: 1,
        // Rounds per second
        trail: 60,
        // Afterglow percentage
        shadow: false,
        // Whether to render a shadow
        hwaccel: false,
        // Whether to use hardware acceleration
        className: 'spinner',
        // The CSS class to assign to the spinner
        zIndex: 2e9,
        // The z-index (defaults to 2000000000)
        top: 'auto',
        // Top position relative to parent in px
        left: 'auto' // Left position relative to parent in px
    };
    var target = document.createElement("div");
    document.body.appendChild(target);
    var spinner = new Spinner(opts).spin(target);
    iosOverlay({
        text: "Loading",
        duration: 2e3,
        spinner: spinner
    });
    return false;
});

Success

$(document).on("click", "#checkMark",
function(e) {
    iosOverlay({
        text: "Success!",
        duration: 2e3,
        icon: "img/check.png"
    });
    return false;
});

Error

$(document).on("click", "#cross",
function(e) {
    iosOverlay({
        text: "Error!",
        duration: 2e3,
        icon: "img/cross.png"
    });
    return false;
});

loadToSuccess

$(document).on("click", "#loadToSuccess",
function(e) {
    var opts = {
        lines: 13,
        // The number of lines to draw
        length: 11,
        // The length of each line
        width: 5,
        // The line thickness
        radius: 17,
        // The radius of the inner circle
        corners: 1,
        // Corner roundness (0..1)
        rotate: 0,
        // The rotation offset
        color: '#FFF',
        // #rgb or #rrggbb
        speed: 1,
        // Rounds per second
        trail: 60,
        // Afterglow percentage
        shadow: false,
        // Whether to render a shadow
        hwaccel: false,
        // Whether to use hardware acceleration
        className: 'spinner',
        // The CSS class to assign to the spinner
        zIndex: 2e9,
        // The z-index (defaults to 2000000000)
        top: 'auto',
        // Top position relative to parent in px
        left: 'auto' // Left position relative to parent in px
    };
    var target = document.createElement("div");
    document.body.appendChild(target);
    var spinner = new Spinner(opts).spin(target);
    var overlay = iosOverlay({
        text: "Loading",
        spinner: spinner
    });

    window.setTimeout(function() {
        overlay.update({
            icon: "img/check.png",
            text: "Success"
        });
    },
    3e3);

    window.setTimeout(function() {
        overlay.hide();
    },
    5e3);

    return false;
});

详细方法请下载压缩包,查看custom.js

iosOverlay.js相关API

参数 描述 默认值
onbeforeshow Function noop()
onshow Function noop()
onbeforehide Function noop()
onhide notification.hide(); noop()
update notification.update({ text: &amp;amp;quot;Success!&amp;amp;quot;, icon: &amp;amp;quot;img/smiley.png&amp;amp;quot; }); -
text 文字 -
icon 图标路径 -
spinner 引入Spin.js -
duration 延时效果 毫秒ms -
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/258.html
评论0
头像

友情提示:垃圾评论一律封号,下载出错或任何技术问题请联系QQ 826096331

1 2