【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="[email protected]" 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>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章