iosOverlay.js苹果手机操作提示

收藏

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

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 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