您的位置:首页 > Web前端 > jquery > 正文

使用 iosOverlay 弹出提示信息

更多 时间:2014-12-3 类别:Web前端 浏览量:485

使用 iosOverlay 弹出提示信息

使用 iosOverlay 弹出提示信息

一、iosOverlay效果图

 

二、iosOverlay插件下载的地址: http://taitems.github.io/iOS-Overlay/

 

三、iosOverlay 的使用方法

 

1、加载插件和jQuery

 

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

    2、例如页面html代码如下 

  •  
  •  
  • C# 代码   复制
  • 
        <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>
    
        <p class="container">
          <button id="loadToSuccess" class="btn">Loading Then Success</button>
        </p>
    
    			
  •  

    3、点击 id="loading" 触发的事件 (Loading提示

  •  
  •  
  • JScript 代码   复制
  • 
    $(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("li");
        document.body.appendChild(target);
        var spinner = new Spinner(opts).spin(target);
        iosOverlay({
            text: "Loading",   //提示的信息可以自定义
    
    			 duration: 2e3, //提示的时间长短  spinner: spinner  });  }); 
  •  

    4、点击 id="checkMark" 触发的事件  (成功提示

  •  
  •  
  • JScript 代码   复制
  • 
    $(document).on("click", "#checkMark", function(e) {
        iosOverlay({
            text: "Success!",
            duration: 2e3,
            icon: "img/check.png"
        });
        
    });
    
    		
  •  

    5、点击 id="cross" 触发的事件  (错误提示

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

    6、 点击 id="loadToSuccess"  触发的事件  (Loading提示后再提示成功或者失败

  •  
  •  
  • JScript 代码   复制
  • 
    $(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("li");
        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;
    });
    
    		
  •  

    7、如果需要修改提示字体的大小等样式信息

    全局修改:将 iosOverlay 样式表里面的 .ui-ios-overlay .title 里面的 font-size 修改

    Jquery 动态修改:$(" .ui-ios-overlay .title").css("font-size"," ")