请选择 进入手机版 | 继续访问电脑版
帖子
帖子
用户
博客
课程
显示全部楼层
216
帖子
5
勋章
5752
Y币

ruler模块demo示例

[复制链接]
发表于 2019-7-8 15:58:02
本模块封装了iOS和Android下尺子UI的功能,方便实现一些拖动刻度的功能(备注:iOS和Android的UI效果有差异)。

点击进入模块详情

  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, body {
  9.                                 height: 100%
  10.                         }
  11.                         body {
  12.                                 background-color: #fff;
  13.                                 margin: 0;
  14.                         }
  15.                         #wrap {
  16.                                 height: 100%;
  17.                                 position: relative;
  18.                         }
  19.                         #header {
  20.                                 padding-top: 20px;
  21.                                 background-color: #5082c2;
  22.                                 height: 44px;
  23.                                 position: relative;
  24.                         }
  25.                         #header h1 {
  26.                                 font-size: 20px;
  27.                                 height: 44px;
  28.                                 line-height: 44px;
  29.                                 margin: 0em;
  30.                                 color: #fff;
  31.                                 margin-left: 100px;
  32.                                 margin-right: 100px;
  33.                                 text-align: center;
  34.                         }
  35.                         #main {
  36.                                 display: -webkit-box;
  37.                                 -webkit-box-orient: vertical;
  38.                                 -webkit-box-pack: center;
  39.                         }
  40.                         a.button {
  41.                                 display: -webkit-box;
  42.                                 -webkit-box-orient: vertical;
  43.                                 -webkit-box-pack: center;
  44.                                 -webkit-box-align: center;
  45.                                 height: 32px;
  46.                                 margin: 8px;
  47.                                 background-color: rgba(240,240,240,1.0);
  48.                                 border-color: rgba(220,220,220,1.0);
  49.                                 border-width: 2px;
  50.                                 border-style: solid;
  51.                         }
  52.                         a.active {
  53.                                 background-color: rgba(240,240,240,0.7);
  54.                         }
  55.                 </style>
  56.         </head>
  57.         <body>
  58.                 <div id="wrap">
  59.                         <div id="main">
  60.                                 <a class="button" tapmode="active" onclick="openRuler()" >openRuler</a>
  61.                                 <a class="button" tapmode="active" onclick="hideRuler()" >hideRuler</a>
  62.                                 <a class="button" tapmode="active" onclick="showRuler()" >showRuler</a>
  63.                                 <a class="button" tapmode="active" onclick="closeRuler()" >closeRuler</a>
  64.                         </div>
  65.                 </div>
  66.         </body>
  67.         <script type="text/javascript">
  68.                 var demo = null;
  69.                 apiready = function() {
  70.                         demo = api.require('ruler');
  71.                         if (!demo) {
  72.                                 alert("请添加模块后编译");
  73.                                 return;
  74.                         }
  75.                 }

  76.                 function openRuler() {
  77.                     demo.openRuler({
  78.                         rect : {
  79.                             x : 0,
  80.                             y : 300,
  81.                             //w : 300,
  82.                         },
  83.                         rulerCount : 200,
  84.                         currentValue : 150,
  85.                         fixedOn : api.frameName,
  86.                         fixed : true
  87.                     },function(ret, err){
  88.                                    api.toast({ msg:JSON.stringify(ret) });
  89.                     });
  90.                 }

  91.                 function hideRuler() {
  92.                     demo.hideRuler(function(ret,err){api.toast({ msg:JSON.stringify(ret) });});
  93.                 }

  94.                 function showRuler() {
  95.                     demo.showRuler(function(ret,err){api.toast({ msg:JSON.stringify(ret) });});
  96.                 }

  97.                 function closeRuler() {
  98.                     demo.closeRuler(function(ret,err){api.toast({ msg:JSON.stringify(ret) });});
  99.                 }
  100.         </script>
  101. </html>
复制代码


37
帖子
2
勋章
3711
Y币
感谢分享
50
帖子
2
勋章
1322
Y币
厉害了
您需要登录后才可以回帖 登录

本版积分规则