Input/Textarea文本输入

文本输入组件是根据AppCan 布局框架对<input type="text" />标签封装的HTML5代码片段，通过配合的样式，使开发者在界面中可以快速使用input标签。

依赖

  • appcan.js
  • appcan.control.js
  • appcan.control.css
例如

HTML5代码

  1. /*搜索框*/
  2. <div class="sc-bg-active uinput ub ub-f1  bc-border uba">
  3. <div class="uinn fa fa-search sc-text"></div>
  4. <input placeholder="请输入搜索城市" type="text" class="ub-f1">
  5. </div>
  6. /*登陆表单*/
  7. <form>
  8.   <div class="umar-a uba bc-border">
  9.       <div class="ub ub-ac ubb umh5 bc-border ">
  10.           <div class=" uinput ub ub-f1">
  11.                <div class="uinn fa fa-user sc-text"></div>
  12.             <input placeholder="请输入搜索城市" type="text" class="ub-f1">
  13.           </div>
  14.       </div>
  15.       <div class="ub ub-ac umh5 bc-border ">
  16.           <div class=" uinput ub ub-f1">
  17.             <div class="uinn fa fa-lock sc-text"></div>
  18.                <input placeholder="请输入登录秘密吗" type="password" class="umw4 ub-f1">
  19.           </div>
  20.       </div>
  21.   </div>
  22.   <div class="uinn">
  23.       <div class="btn ub ub-ac bc-text-head ub-pc bc-btn uc-a1"  id="submit">
  24.           <div class="uinn3 fa fa-shield umh1 umw1"></div>
  25.           登录
  26.       </div>
  27.   </div>
  28.   <button type="submit"class="uinvisible"></button>
  29. </form>

JS代码

  1. appcan.button("#submit", "ani-act", function() {
  2.             $("form").submit();
  3.         })
  5.         $("form").on('submit', function() {
  6.             appcan.request.postForm($("form"), function() {
  7.                 appcan.window.alert({
  8.                     title : "提醒",
  9.                     content : "您已经提交了表单:)",
  10.                     buttons : '确定',
  11.                     callback : function(err, data, dataType, optId) {
  12.                         console.log(err, data, dataType, optId);
  13.                     }
  14.                 });
  15.             },function(err){
  17.             });
  18.             return false;
  19.         });

配合form标签实现form的快捷提交。