apicloud apicloud

注册
查看: 1029|回复: 0

[模块教程] UIAdaptiveInput 模块demo(输入框)

管理员

UID:253705

主题:
53
帖子:
309
云币:
687

[模块教程] UIAdaptiveInput 模块demo(输入框)

1029 0 | 发表于 2018-8-24 19:56:35 |阅读模式 | |
UIAdaptiveInput 是一个输入框,开发者可根据需求自定义其样式。该模块能巧妙的适配键盘高度,自定调整位置,始终紧贴软键盘
本模块在iOS平台上支持最低版本为 iOS9

文档地址:
https://docs.apicloud.com/Client-API/UI-Layout/UIAdaptiveInput

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

  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  6.     <title>title</title>
  7.     <link rel="stylesheet" type="text/css" href="../css/api.css" />
  8.     <style>
  9.         html,
  10.         body {
  11.             height: 1000px;
  12.         }

  13.         button {
  14.             margin: 10px;
  15.         }

  16.         input {
  17.             margin-top: 200px;
  18.         }

  19.         .content {
  20.             margin: 60px;
  21.         }
  22.     </style>
  23. </head>

  24. <body>
  25.     <div class="content">
  26.         <button type="button" onclick="fnclose()" name="button">fnclose</button>
  27.         <button type="button" onclick="fnshow()" name="button">fnshow</button>
  28.         <button type="button" onclick="fnhide()" name="button">fnhide</button>
  29.         <button type="button" onclick="fnsetValue()" name="button">fnsetValue</button>
  30.         <button type="button" onclick="fninsertValue()" name="button">fninsertValue</button>
  31.         <button type="button" onclick="fnsetPlaceholder()" name="button">fnsetPlaceholder</button>
  32.         <button type="button" onclick="fnbecomeFirstResponder()" name="button">fnbecomeFirstResponder</button>
  33.         <button type="button" onclick="fnresignFirstResponder()" name="button">fnresignFirstResponder</button>
  34.     </div>
  35. </body>
  36. <script type="text/javascript" src="../script/api.js"></script>
  37. <script type="text/javascript">
  38.     var UIAdaptiveInput;
  39.     apiready = function() {
  40.         //Android 不同键盘需监听不同事件
  41.         UIAdaptiveInput = api.require('UIAdaptiveInput');
  42.         UIAdaptiveInput.addEventListener({
  43.             name: 'search' // Android 上 name可取值send,search,done,return,next
  44.         }, function(ret) {
  45.             console.log('search:' + JSON.stringify(ret));
  46.         });
  47.         // iOS 不同键盘类型都是监听return事件
  48.         UIAdaptiveInput.addEventListener({
  49.             name: 'return'
  50.         }, function(ret) {
  51.             console.log('search:' + JSON.stringify(ret));
  52.         });

  53.         UIAdaptiveInput.addEventListener({
  54.             name: 'focus'
  55.         }, function(ret) {
  56.             console.log('focus:' + JSON.stringify(ret));
  57.         });
  58.         UIAdaptiveInput.addEventListener({
  59.             name: 'changeValue'
  60.         }, function(ret) {
  61.             console.log('changeValue:' + JSON.stringify(ret));
  62.         });
  63.         UIAdaptiveInput.addEventListener({
  64.             name: 'changeHeight'
  65.         }, function(ret) {
  66.             console.log('changeHeight:' + JSON.stringify(ret));
  67.         });
  68.         UIAdaptiveInput_open();
  69.     };

  70.     function UIAdaptiveInput_open() {
  71.         UIAdaptiveInput.open({
  72.             rect: {
  73.                 x: 10,
  74.                 y: 450,
  75.                 w: api.winWidth - 20,
  76.                 h: 35
  77.             },
  78.             styles: {
  79.                 size: 14,
  80.                 bgColor: '#FFF',
  81.                 color: '#000',
  82.                 borderColor: '#000',
  83.                 placeholderColor: '#000',
  84.                 marginBottom: 100
  85.             },
  86.             adaptive: {
  87.                 maxLines: 1,
  88.                 maxLength: 1000,
  89.                 direction: 'down',
  90.                 layoutInBottom: true
  91.             },
  92.             placeholder: '请输入文本...',
  93.             autoFocus: false,
  94.             keyboardType: 'search', //  number  search  next send done
  95.             fixedOn: api.frameName,
  96.             fixed: false
  97.         }, function(ret) {
  98.             console.log('open:' + JSON.stringify(ret));
  99.             id = ret.id;
  100.         });
  101.     }

  102.     function fnclose() {
  103.         var UIAdaptiveInput = api.require('UIAdaptiveInput');
  104.         UIAdaptiveInput.close({
  105.             id: id
  106.         });
  107.     }

  108.     function fnshow() {
  109.         var UIAdaptiveInput = api.require('UIAdaptiveInput');
  110.         UIAdaptiveInput.show({
  111.             id: id
  112.         });
  113.     }

  114.     function fnhide() {
  115.         var UIAdaptiveInput = api.require('UIAdaptiveInput');
  116.         UIAdaptiveInput.hide({
  117.             id: id
  118.         });
  119.     }

  120.     function fnbecomeFirstResponder() {
  121.         var UIAdaptiveInput = api.require('UIAdaptiveInput');
  122.         UIAdaptiveInput.becomeFirstResponder({
  123.             id: id
  124.         });
  125.     }

  126.     function fnresignFirstResponder() {
  127.         var UIAdaptiveInput = api.require('UIAdaptiveInput');
  128.         UIAdaptiveInput.resignFirstResponder({
  129.             id: id
  130.         });
  131.     }

  132.     function fnsetValue() {
  133.         var UIAdaptiveInput = api.require('UIAdaptiveInput');
  134.         UIAdaptiveInput.setValue({
  135.             value: '设置的文字',
  136.             id: id
  137.         });
  138.     }

  139.     function fngetValue() {
  140.         var UIAdaptiveInput = api.require('UIAdaptiveInput');
  141.         UIAdaptiveInput.getValue({
  142.             id: id
  143.         }, function(ret) {
  144.             if (ret) {
  145.                 alert(JSON.stringify(ret));
  146.             }
  147.         });
  148.     }

  149.     function fninsertValue() {
  150.         var UIAdaptiveInput = api.require('UIAdaptiveInput');
  151.         UIAdaptiveInput.insertValue({
  152.             value: '这里是插入的字符串',
  153.             index: 2,
  154.             id: id
  155.         });
  156.     }

  157.     function fnsetPlaceholder() {
  158.         var UIAdaptiveInput = api.require('UIAdaptiveInput');
  159.         UIAdaptiveInput.setPlaceholder({
  160.             placeholder: '我是占位提示文字',
  161.             id: id
  162.         });
  163.     }
  164. </script>

  165. </html>
复制代码



本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

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

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