芯片验证自学网芯片验证自学网芯片验证自学网

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


导读: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>


未经允许不得转载:芯片验证自学网 » 【APICloud系列|30】UILoading 模块demo源码的实现