请选择 进入手机版 | 继续访问电脑版
帖子
帖子
用户
博客
课程
12下一页
返回列表 发新帖
显示全部楼层
216
帖子
5
勋章
5939
Y币

floatButton模块demo示例

[复制链接]
发表于 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>
复制代码


42
帖子
4
勋章
1万+
Y币
66感谢分享
11
帖子
0
勋章
46
Y币
请问一下这个免费试用模块,不能用吗
216
帖子
5
勋章
5939
Y币
可以用的,,,
88
帖子
0
勋章
1万+
Y币
52yaoer 发表于 2019-6-26 11:07
可以用的,,,

点击软件提示我未受信任的企业级开发者
38
帖子
1
勋章
201
Y币
一个frame里只能打开一个悬浮按钮吗?
216
帖子
5
勋章
5939
Y币
13
帖子
0
勋章
63
Y币
ios 不能使用gif图片么,为啥会闪退呢
216
帖子
5
勋章
5939
Y币
小王姐姐 发表于 2020-10-22 16:38
ios 不能使用gif图片么,为啥会闪退呢

用的是最新版本么?我这里测试可以
13
帖子
0
勋章
63
Y币
是最新版本 , 我这边就是闪退 , 可以看这个https://community.apicloud.com/bbs/thread-166925-1-1.html
12下一页
您需要登录后才可以回帖 登录

本版积分规则