下载文档

Input/Textarea文本输入
更新时间:2015-06-16

文本输入组件是根据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. })
  4. $("form").on('submit', function() {
  5. appcan.request.postForm($("form"), function() {
  6. appcan.window.alert({
  7. title : "提醒",
  8. content : "您已经提交了表单:)",
  9. buttons : '确定',
  10. callback : function(err, data, dataType, optId) {
  11. console.log(err, data, dataType, optId);
  12. }
  13. });
  14. },function(err){
  15. });
  16. return false;
  17. });

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