apicloud apicloud

注册
查看: 415|回复: 4

[模块教程] floatButton模块demo示例

版主

UID:83211

主题:
151
帖子:
6870
云币:
43999

APICloud粉丝端午节模块开发者一周年你吃屎!女朋友SB侠APICloud大会专属勋章捣蛋鬼

[模块教程] floatButton模块demo示例

415 4 | 发表于 2019-6-24 09:17:40 |阅读模式 | |
floatButton 用原生代码实现了在app内部实现悬浮按钮功能。

点击进入模块详情

  1. <!DOCTYPE html>
  2. <html>

  3. <head>
  4.     <title>Module Develop</title>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  7.     <style type="text/css">
  8.         html,
  9.         body {
  10.             height: 100%
  11.         }

  12.         body {
  13.             background-color: #fff;
  14.             margin: 0;
  15.         }

  16.         #wrap {
  17.             height: 100%;
  18.             position: relative;
  19.         }

  20.         #header {
  21.             padding-top: 20px;
  22.             background-color: #5082c2;
  23.             height: 44px;
  24.             position: relative;
  25.         }

  26.         #header h1 {
  27.             font-size: 20px;
  28.             height: 44px;
  29.             line-height: 44px;
  30.             margin: 0em;
  31.             color: #fff;
  32.             margin-left: 100px;
  33.             margin-right: 100px;
  34.             text-align: center;
  35.         }

  36.         #main {
  37.             display: -webkit-box;
  38.             -webkit-box-orient: vertical;
  39.             -webkit-box-pack: center;
  40.         }

  41.         a.button {
  42.             display: -webkit-box;
  43.             -webkit-box-orient: vertical;
  44.             -webkit-box-pack: center;
  45.             -webkit-box-align: center;
  46.             height: 32px;
  47.             margin: 8px;
  48.             background-color: rgba(240, 240, 240, 1.0);
  49.             border-color: rgba(220, 220, 220, 1.0);
  50.             border-width: 2px;
  51.             border-style: solid;
  52.         }

  53.         a.active {
  54.             background-color: rgba(240, 240, 240, 0.7);
  55.         }
  56.     </style>
  57. </head>

  58. <body>
  59.     <div id="wrap">
  60.         <div id="main">
  61.                                                 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  62.             <a class="button" tapmode="active" onclick="setOnCoordinateListener()">坐标移动监听</a>
  63.             <a class="button" tapmode="active" onclick="setOnClickListener()">按钮点击监听</a>
  64.             <a class="button" tapmode="active" onclick="openButton()">打开悬浮按钮</a>
  65.             <a class="button" tapmode="active" onclick="hidenButton()">隐藏悬浮按钮</a>
  66.             <a class="button" tapmode="active" onclick="showButton()">显示悬浮按钮</a>
  67.             <a class="button" tapmode="active" onclick="closeButton()">关闭悬浮按钮</a>
  68.             <a class="button" tapmode="active" onclick="updateButtonPic()">修改悬浮按钮图片</a>
  69.             <a class="button" tapmode="active" onclick="startAnimation()">开启旋转动画</a>
  70.             <a class="button" tapmode="active" onclick="stopAnimation()">停止旋转动画</a>
  71.             <a class="button" tapmode="active" onclick="startMove()">开启移动</a>
  72.             <a class="button" tapmode="active" onclick="stopMove()">停止移动</a>
  73.                                                 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  74.         </div>
  75.     </div>
  76. </body>
  77. <script type="text/javascript" src="../script/api.js"></script>
  78. <script>
  79.     var demo;

  80.     function apiready() {
  81.         demo = api.require('floatButton');
  82.         if (!demo) {
  83.             alert("请添加模块后编译");
  84.             return;
  85.         }
  86.     }

  87.     function setOnCoordinateListener() {
  88.         demo.setOnCoordinateListener(function(ret, err) {
  89.             api.toast({
  90.                 msg: JSON.stringify(ret)
  91.             });
  92.         });
  93.     }

  94.     function setOnClickListener() {
  95.         demo.setOnClickListener(function(ret, err) {
  96.             alert(JSON.stringify(ret));
  97.         });
  98.     }

  99.     function openButton() {
  100.         demo.openButton({
  101.             rect: {
  102.                 x: 10,
  103.                 y: 10,
  104.                 w: 60,
  105.                 h: 60
  106.             },
  107.             lineColor: '#000000',
  108.             btnPic: 'widget://image/refresh.png'
  109.         }, function(ret, err) {
  110.             alert(JSON.stringify(ret));
  111.         });
  112.     }

  113.     function closeButton() {
  114.         demo.closeButton(function(ret, err) {
  115.             alert(JSON.stringify(ret));
  116.         });
  117.     }

  118.     function hidenButton() {
  119.         demo.hidenButton(function(ret, err) {
  120.             alert(JSON.stringify(ret));
  121.         });
  122.     }

  123.     function showButton() {
  124.         demo.showButton(function(ret, err) {
  125.             alert(JSON.stringify(ret));
  126.         });
  127.     }

  128.     function updateButtonPic() {
  129.         demo.updateButtonPic({
  130.             btnPic: 'widget://image/refresh.png'
  131.         }, function(ret, err) {
  132.             alert(JSON.stringify(ret));
  133.         });
  134.     }

  135.     function startAnimation() {
  136.         demo.startAnimation(function(ret, err) {
  137.             alert(JSON.stringify(ret));
  138.         });
  139.     }

  140.     function stopAnimation() {
  141.         demo.stopAnimation(function(ret, err) {
  142.             alert(JSON.stringify(ret));
  143.         });
  144.     }

  145.     function startMove() {
  146.         demo.startMove(function(ret, err) {
  147.             alert(JSON.stringify(ret));
  148.         });
  149.     }

  150.     function stopMove() {
  151.         demo.stopMove(function(ret, err) {
  152.             alert(JSON.stringify(ret));
  153.         });
  154.     }
  155. </script>

  156. </html>
复制代码


主题:
39
帖子:
9161
云币:
9892

端午节社会摇圣诞节老司机你吃屎!首长好!我还是个孩子!托马斯全旋女朋友不想上班!装逼侠单身狗超人锤子侠SB侠我李白贼6APICloud大会专属勋章狗年旺旺旺足球狗捣蛋鬼儿童节快乐APICloud五岁啦

发表于 2019-6-24 17:11:03 |
66感谢分享
微信公众号、小程序、app、webapp、pc网页端项目合作点击QQ455600672

主题:
6
帖子:
18
云币:
30
发表于 2019-6-26 10:44:14 |
请问一下这个免费试用模块,不能用吗

版主

UID:83211

主题:
151
帖子:
6870
云币:
43999

APICloud粉丝端午节模块开发者一周年你吃屎!女朋友SB侠APICloud大会专属勋章捣蛋鬼

 楼主| 发表于 2019-6-26 11:07:00 |
可以用的,,,

主题:
44
帖子:
191
云币:
222
发表于 2019-9-27 08:57:55 |
52yaoer 发表于 2019-6-26 11:07
可以用的,,,

点击软件提示我未受信任的企业级开发者
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表