apicloud apicloud

注册
查看: 612|回复: 0

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

版主

UID:83211

主题:
160
帖子:
8637
云币:
1449

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

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

612 0 | 发表于 2019-6-24 09:05:07 |阅读模式 | |
editDialog实现了iOS、Android系统的自定义编辑框,获取输入框内内容数据进行复制粘贴等操作。

点击进入模块详情

  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.                                 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  61.                                 <a class="button" tapmode="active" onclick="openEditText()" >打开输入框</a>
  62.                                 <a class="button" tapmode="active" onclick="hideEditText()" >隐藏输入框</a>
  63.                                 <a class="button" tapmode="active" onclick="showEditText()" >显示输入框</a>
  64.                                 <a class="button" tapmode="active" onclick="closeEditText()" >关闭输入框</a>
  65.                                 <a class="button" tapmode="active" onclick="insertData()" >插入数据</a>
  66.                                 <a class="button" tapmode="active" onclick="cleanAll()" >清除所有数据</a>
  67.                                 <a class="button" tapmode="active" onclick="getContent()" >获取编辑输入框内所有数据</a>
  68.                                 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  69.                         </div>
  70.                 </div>
  71.         </body>
  72.         <script type="text/javascript">
  73.                 var demo = null;
  74.                 var viewId;
  75.                 apiready = function() {
  76.                         demo = api.require('editDialog');
  77.                         if (!demo) {
  78.                                 alert("请添加模块后编译");
  79.                                 return;
  80.                         }
  81.                 }
  82.                 function openEditText() {
  83.                         demo.openEditText({
  84.                                 rect : {
  85.                                         x : 5,
  86.                                         y : 10,
  87.                                         w : api.frameWidth - 10,
  88.                                         h : 150
  89.                                 },
  90.                                 fixedOn : api.frameName,
  91.                                 fixed : true,
  92.                                 fontSize : 16, //字体大小,建议16-18
  93.                                 fontColor : '#000000', //字体颜色
  94.                                 inputType : 0, //键盘类型 0:正常  1:数字 2:email 3:url 4:密码
  95.                                 inputHint : '请输入密码', //提示文字
  96.                                 defaultText : '我是默认值', //默认显示文字
  97.                                 maxNum : 100,  //最大字数,如果为0,或者缺省长度无限制,并且不回调onNum方法;
  98.                         }, function(ret, err) {
  99.                                 //evenType.show //打开成功事件
  100.                                 //evenType.onNum //文本框字数改变时返回的剩余字数的回调函数 (num : 剩余字数)
  101.                                 //alert(JSON.stringify(ret)+"  "+JSON.stringify(err));
  102.                                 if (ret.evenType == 'show') {
  103.                                         viewId = ret.index;
  104.                                 } else {
  105.                                         api.toast({
  106.                                                 msg : JSON.stringify(ret)
  107.                                         });
  108.                                 }
  109.                         });
  110.                 }

  111.                 function hideEditText() {
  112.                         demo.hideEditText({
  113.                                 index : viewId
  114.                         }, function(ret, err) {
  115.                                 alert(JSON.stringify(ret) + "  " + JSON.stringify(err));
  116.                         });
  117.                 }

  118.                 function showEditText() {
  119.                         demo.showEditText({
  120.                                 index : viewId
  121.                         }, function(ret, err) {
  122.                                 alert(JSON.stringify(ret) + "  " + JSON.stringify(err));
  123.                         });
  124.                 }

  125.                 function closeEditText() {
  126.                         demo.closeEditText({
  127.                                 index : viewId
  128.                         }, function(ret, err) {
  129.                                 alert(JSON.stringify(ret) + "  " + JSON.stringify(err));
  130.                         });
  131.                 }

  132.                 function insertData() {
  133.                         demo.insertData({
  134.                                 index : viewId,
  135.                                 data : '我是插入内容'
  136.                         }, function(ret, err) {
  137.                                 alert(JSON.stringify(ret) + "  " + JSON.stringify(err));
  138.                         });
  139.                 }

  140.                 function cleanAll() {
  141.                         demo.cleanAll({
  142.                                 index : viewId
  143.                         }, function(ret, err) {
  144.                                 alert(JSON.stringify(ret) + "  " + JSON.stringify(err));
  145.                         });
  146.                 }

  147.                 function getContent() {
  148.                         demo.getContent({
  149.                                 index : viewId
  150.                         }, function(ret, err) {
  151.                                 alert(JSON.stringify(ret) + "  " + JSON.stringify(err));
  152.                         });
  153.                 }
  154.         </script>
  155. </html>
复制代码


您需要登录后才可以回帖 登录 | 立即注册

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