当前位置: 萬仟网 > IT编程>网页制作>HTML > 【APICloud系列|30】UILoading 模块demo源码的实现

【APICloud系列|30】UILoading 模块demo源码的实现

2021年01月05日  | 萬仟网IT编程  | 我要评论
导读:UILoading 模块封装了两种款式的加载提示框,每一种款式都提供一个接口来调用。开发者可参考各个接口的样式来自定义加载提示框上的图片信息模块:http://www.apicloud.com/mod_detail/31494index.html<!doctype html><html><head> <meta charset="utf-8"> <meta name="viewport" content="m..

导读:UILoading 模块封装了两种款式的加载提示框,每一种款式都提供一个接口来调用。开发者可参考各个接口的样式来自定义加载提示框上的图片信息

模块:http://www.apicloud.com/mod_detail/31494

 index.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <style type="text/css">
        html{ background-color: white; }
        header{ border-bottom: 1px solid #ccc; padding: 25px 0; }
        span {
            padding: 10px 15px;
            margin: 10px;
            display: inline-block;
            background-color: #e8e8e8;
        }
        .hover{ opacity: .4; }
    </style>
</head>
<body>
    <header>
        <h1>UILoading</h1>
        <mark>
            使用前请详细阅读 文档 使用规则
        </mark>
    </header>
    <span tapmode="hover" onclick="fnFlower()">flower</span>
    <span tapmode="hover" onclick="fnKeyFrame()">keyFrame</span>
    <span tapmode="hover" onclick="fnCloseFlower()">closeFlower</span>
    <span tapmode="hover" onclick="fnCloseKeyFrame()">closeKeyFrame</span>
</body>
<script type="text/javascript">
    var UILoading;
    apiready = function() {
        UILoading = api.require('UILoading');
    };
    function fnFlower(){
        UILoading.flower({
            center: {                           
                x: 160,            
                y: 300         
            },
            size: 30,
            fixed: true
        }, function(ret){   
            alert(JSON.stringify(ret));
        });
    }
    function fnKeyFrame(){
        UILoading.keyFrame({
            rect: {
                w: 80,                              
                h: 100      
            },
            styles: {
                bg: 'rgba(0,0,0,0.5)',
                corner: 5,
                interval: 50,
                frame:{
                    w: 80,
                    h: 80
                }
            }
        }, function(ret){   
            alert(JSON.stringify(ret));
        });
    }
    function fnCloseFlower(){
        UILoading.closeFlower ({
            id: 0
        });
    }
    function fnCloseKeyFrame(){
        UILoading.closeKeyFrame();
    }
</script>
</html>

 config.xml

<?xml version="1.0" encoding="UTF-8"?>
<widget id="A0000000000001"  version="0.0.1">
    <name>UILoading</name>
    <description>
        Example For demo.
    </description>
    <author email="1978195254@qq.com" href="https://sunmenglei.blog.csdn.net/article/details/112027889">
        Developer
    </author>
    <content src="index.html" />
    <access origin="*" />
    <preference name="pageBounce" value="false"/>
        <preference name="appBackground" value="rgba(0,0,0,0.0)"/>
        <preference name="windowBackground" value="rgba(0,0,0,0.0)"/>
        <preference name="frameBackgroundColor" value="rgba(0,0,0,0.0)"/>
        <preference name="hScrollBarEnabled" value="true"/>
        <preference name="vScrollBarEnabled" value="true"/>
        <preference name="autoLaunch" value="true"/>
        <preference name="fullScreen" value="false"/>
        <preference name="autoUpdate" value="true" />
        <preference name="smartUpdate" value="false" />
        <preference name="debug" value="true"/>
        <preference name="statusBarAppearance" value="true"/>
        <permission name="readPhoneState" />
        <permission name="camera" />
        <permission name="record" />
        <permission name="location" />
        <permission name="fileSystem" />
        <permission name="internet" />
        <permission name="bootCompleted" />
        <permission name="hardware" />
</widget>

 

本文地址:https://blog.csdn.net/weixin_41937552/article/details/112224965

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
Copyright © 2017-2021  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com