zoukankan      html  css  js  c++  java
  • APICloud APP前端框架——手机APP开发、APP制作、APP定制平台

    概述

    APICloud前端框架,包括api.js和api.css。api.css处理不同平台浏览器的默认样式。api.js是一个JavaScript库。是APICloud为混合移动开发定制的轻量JavaScript库。具有小巧高效的特性。很容易学习和使用。使用APICloud前端框架需引入api.js和api.css文件。api.js,api.css在创建APICloud项目时自动创建。

    开源地址:https://github.com/apicloudcom/apicloud-js-framework

    CSS Framework

    • 清除浏览器默认样式(借鉴CSS Reset,Normalize.css)
    • 禁用系统长按菜单(-webkit-touch-callout:none)
    • 禁用字体大小自动调整(-webkit-text-size-adjust:none)
    • 去掉点击高亮(-webkit-tap-highlight-color:rgba(0,0,0,0))
    • 禁止选择内容(-webkit-user-select:none)
    • 清除浮动(.clearfix)
    • 加载更多默认样式(.loading_more)

    JavaScript Framework

    命名空间为$api,所有方法如下:
    .trim()
    • 描述:去掉字符串首尾空格
    • 用法:trim(str)
    • 参数: str (类型:String)
    • 返回值:去除首尾空格的字符串
    • 示例:
      $api.trim('   abc  123   ');  // => "abc  123"

    .trimAll()

     
    • 描述:去掉字符串所有空格
    • 用法:trimAll(str)
    • 参数:str (类型:String)
    • 返回值:去除所有空格的字符串
    • 示例:
      $api.trimAll('  abc 123  ');  // => "abc123"

    .isArray()

     
    • 描述:判断对象是否为数组
    • 用法:.isArray(obj)
    • 参数: obj (类型:Object)
    • 返回值:Boolean
    • 示例:
      $api.isArray([1,2,3]);  // => true
      $api.isArray('123')  // => false

    .addEvt()

     
    • 描述:为DOM元素绑定事件
    • 用法:.addEvt(el, name, fn, useCapture)
    • 参数:

      el (类型:Element):DOM元素

      name (类型:String):事件类型

      fn (类型:Function):事件回调

      useCapture (类型:Boolean):事件捕获,默认为 false

    • 示例:

      $api.addEvt(element, 'click', function(){
      //do something
      });

    .rmEvt()

     
    • 描述:移除DOM元素绑定的事件
    • 用法:.rmEvt(el, name, fn, useCapture)
    • 参数:

      el (类型:Element):DOM元素

      name (类型:String):事件类型

      fn (类型:Function):事件回调

      useCapture (类型:Boolean):事件捕获,默认为 false

    • 示例:

      $api.rmEvt(element, 'click', function(){
      //do something
      });

    .one()

     
    • 描述:为DOM元素绑定事件,事件只执行一次
    • 用法:.one(el, name, fn, useCapture)
    • 参数:

      el (类型:Element):DOM元素

      name (类型:String):事件类型

      fn (类型:Function):事件回调

      useCapture (类型:Boolean):事件捕获,默认为 false

    • 示例:

      $api.one(element, 'click', function(){
      //do something
      });
      

    .dom()

     
    • 描述:选择首个匹配的DOM元素
    • 用法:

      .dom(el, selector)

      从el元素开始查找

    • 参数:
      el (类型:Element):DOM元素

      selector (类型:Selector):CSS 选择器

    • 返回值: 返回首个匹配的DOM元素

    • 示例:

      $api.dom(el, '#id');
      $api.dom(el, '.list[type="text"]');
      

      .dom(selector)

      从document元素开始查找

    • 参数: selector (类型:Selector):CSS 选择器

    • 返回值:返回首个匹配的DOM元素
    • 示例:
      $api.dom('#id');
      $api.dom('.list[type="text"]');
      

    .domAll()

     
    • 描述:选择所有匹配的DOM元素
    • 用法:

      .domAll(el, selector)

      从el元素开始查找

    • 参数:

      el (类型:Element):DOM元素

      selector (类型:Selector):CSS 选择器

    • 返回值: 返回所有匹配的DOM元素

    • 示例:

      $api.domAll(el, '.class');
      $api.domAll(el, '.list:fist-child');
      

      .domAll(selector)

      从document元素开始查找

    • 参数: selector (类型:Selector):CSS 选择器

    • 返回值:返回所有匹配的DOM元素
    • 示例:
      $api.domAll('.class');
      $api.domAll('.list:fist-child');
      

    .byId()

     
    • 描述:通过Id选择DOM元素
    • 用法:.byId(id)
    • 参数: id(类型:String):CSS id 字符串
    • 返回值: 返回匹配的DOM元素
    • 示例:
      $api.byId('idStr')
      

    .first()

     
    • 描述:选择DOM元素的第一个子元素
    • 用法:.first(el, selector)
    • 参数:

      el (类型:Element):DOM元素

      selector (类型:Selector):CSS 选择器

    • 返回值: 返回DOM元素的第一个子元素

    • 示例:
      $api.first(el,'li');
      
      .first(el)
    • 参数:el (类型:Element):DOM元素
    • 返回值:返回DOM元素的第一个子元素
    • 示例:
      $api.first(el);
      

    .last()

     
    • 描述:选择DOM元素的最后一个子元素
    • 用法:.last(el, selector)
    • 参数:

      el (类型:Element):DOM元素

      selector (类型:Selector):CSS 选择器

    • 返回值: 返回DOM元素的最后一个子元素

    • 示例:
      $api.last(el,'li');
      
      .last(el)
    • 参数: el (类型:Element):DOM元素
    • 返回值:返回DOM元素的最后一个子元素
    • 示例:
      $api.last(el);
      

    .eq()

     
    • 描述:选择第几个子元素
    • 用法:.eq(el, index)
    • 参数:

      el (类型:Element):DOM元素

      index (类型:String | Number):索引值

    • 返回值:根据索引值返回子元素

    • 示例:
      $api.eq(el, 2);
      $api.eq(el, '2');
      

    .not()

     
    • 描述:根据排除选择器选择子元素
    • 用法:.not(el, selector)
    • 参数:

      el (类型:Element):DOM元素

      selector (类型:Selector):CSS 选择器

    • 返回值:返回不匹配选择器的所有子元素

    • 示例:
      $api.not(el, '.active');
      

    .prev()

     
    • 描述:选择相邻的前一个元素
    • 用法:.prev(el)
    • 参数:el (类型:Element):DOM元素
    • 返回值:返回前一个元素
    • 示例:
      $api.prev(el);
      

    .next()

     
    • 描述:选择相邻的下一个元素
    • 用法:.next(el)
    • 参数:el (类型:Element):DOM元素
    • 返回值:返回下一个元素
    • 示例:
      $api.next(el);
      

    .contains()

     
    • 描述:判断某一个元素是否包含目标元素
    • 用法:.contains(parentEl, targetEl)
    • 参数:

      parentEl (类型:Element):DOM元素

      targetEl (类型:Element):DOM元素

    • 返回值:返回布尔值(true 或 false)

    • 示例:
      $api.contains(parentEl, targetEl);
      

    .closest()

     
    • 描述:根据选择器匹配最近的父元素
    • 用法:.closest(el, selector)
    • 参数:

      el (类型:Element):DOM元素

      selector (类型:Selector):CSS 选择器

    • 返回值:根据选择器匹配最近的父元素

    • 示例:
      $api.closest(el, '.parent');
      

    .remove()

     
    • 描述:移除DOM元素
    • 用法:.remove(el)
    • 参数:el (类型:Element):DOM元素
    • 示例:
      $api.remove(el);
      

    .attr()

     
    • 描述:获取或设置DOM元素的属性
    • 用法:.attr(el, name, value)

      设置属性值

    • 参数:

      el (类型:Element):DOM元素

      name (类型:String):属性名

      value (类型:String):属性值

    • 返回值: 返回当前DOM元素

    • 示例:

      $api.attr(el,'data','123');
      

      .attr(el, name)

      获取属性值

    • 参数:

      el (类型:Element):DOM元素

      name (类型:String):属性名

    • 返回值:返回属性值

    • 示例:
      $api.attr(el,'data');
      

    .removeAttr()

     
    • 描述:移除DOM元素的属性
    • 用法:.removeAttr(el, name)
    • 参数:

      el (类型:Element):DOM元素

      name (类型:String):属性名

    • 示例:

      $api.removeAttr(el, 'data')
      

    .hasCls()

     
    • 描述:DOM元素是否含有某个className
    • 用法:.hasCls(el, cls)
    • 参数:

      el (类型:Element):DOM元素

      cls (类型:String):className

    • 返回值:Boolean

    • 示例:
      $api.hasCls(el, 'classname'); // => true
      

    .addCls()

     
    • 描述:为DOM元素增加className
    • 用法:.addCls(el, cls)
    • 参数:

      el (类型:Element):DOM元素

      cls (类型:String):className

    • 返回值:返回当前DOM元素

    • 示例:
      $api.addCls(el, 'newclass');
      

    .removeCls()

     
    • 描述:移除指定的className
    • 用法:.removeCls(el, cls)
    • 参数:

      el (类型:Element):DOM元素

      cls (类型:String):className

    • 返回值:返回当前DOM元素

    • 示例:
      $api.removeCls(el, 'newclass');
      

    .toggleCls()

     
    • 描述:切换指定的className
    • 用法:.toggleCls(el, cls)
    • 参数:

      el (类型:Element):DOM元素

      cls (类型:String):className

    • 返回值:返回当前DOM元素

    • 示例:
      $api.toggleCls(el, 'display');
      

    .val()

     
    • 描述:获取或设置常用 Form 表单元素的 value 值
    • 用法:.val(el, val)

      设置表单元素value值

    • 参数:

      el (类型:Element):DOM元素

      val (类型:String):想设置的value值

    • 返回值:返回当前DOM元素

    • 示例:

      $api.val(el,'123');
      

      .val(el)

      获取表单元素value值

    • 参数:el (类型:Element):DOM元素

    • 返回值:返回表单元素的value值
    • 示例:
      $api.val(el);
      

    .prepend()

     
    • 描述:在DOM元素内部,首个子元素前插入HTML字符串
    • 用法:.prepend(el, html)
    • 参数:

      el (类型:Element):DOM元素

      html (类型:htmlString):HTML字符串

    • 返回值:返回当前DOM元素

    • 示例:
      $api.prepend(el,'<li>hello</li>');
      

    .append()

     
    • 描述:在DOM元素内部,最后一个子元素后面插入HTML字符串
    • 用法:.append(el, html)
    • 参数:

      el (类型:Element):DOM元素

      html (类型:htmlString):HTML字符串

    • 返回值:返回当前DOM元素

    • 示例:
      $api.append(el,'<li>hello</li>');
      

    .before()

     
    • 描述:在DOM元素前面插入HTML字符串
    • 用法:.before(el, html)
    • 参数:

      el (类型:Element):DOM元素

      html (类型:htmlString):HTML字符串

    • 返回值:返回当前DOM元素

    • 示例:
      $api.before(el,'<h1>world</h1>');
      

    .after()

     
    • 描述:在DOM元素后面插入HTML字符串
    • 用法:.after(el, html)
    • 参数:

      el (类型:Element):DOM元素

      html (类型:htmlString):HTML字符串

    • 返回值:返回当前DOM元素

    • 示例:
      $api.after(el,'<h1>world</h1>');
      

    .html()

     
    • 描述:获取或设置DOM元素的innerHTML
    • 用法:.html(el, html)

      设置innerHTML

    • 参数:

      el (类型:Element):DOM元素

      html (类型:htmlString):HTML字符串

    • 返回值:返回当前DOM元素

    • 示例:

      $api.html(el,'<h1>world</h1>');
      

      .html(el)

      获取innerHTML

    • 参数:el (类型:Element):DOM元素

    • 返回值:返回当前DOM元素的innerHTML
    • 示例:
      $api.html(el);
      

    .text()

     
    • 描述:设置或者获取元素的文本内容
    • 用法:. text (el, txt)
    • 参数:

      el(类型:Element):DOM元素

      txt(类型:String):字符串

    • 返回值:当前DOM元素

    • 示例:
      var a = document.getElementById('a');
      $api.text(a, 'text'); // => <a id=''a''>text</a>
      
      . text (el)
    • 参数:el(类型:Element):DOM元素
    • 返回值:DOM元素的文本内容
    • 示例:
      <a id=''a''>text</a>
      var a = document.getElementById('a');
      $api.text(a); // => text
      

    .offset()

     
    • 描述:获取元素在页面中的位置与宽高,(此为距离页面左侧及顶端的位置,并非距离窗口的位置)
    • 用法:. offset (el)
    • 参数:el(类型:Element):DOM元素
    • 返回值:该元素的位置(left,top)及宽高(width,height),返回值是json类型的,包括l,t,w,h属性
    • 示例:
      var offset = $api.offset(el);
      var left = offset.l;
      var top = offset.t;
      var width = offset.w;
      var height = offset.h;
      

    .css()

     
    • 描述:设置所传入的DOM元素的样式,可传入多条样式
    • 用法:.css (el, css)
    • 参数:

      el(类型:Element):DOM元素

      css(类型:String):想要设置的CSS样式

    • 示例:

      $api.css(el,'800px;border:1px solid red');
      

    .cssVal()

     
    • 描述:获取指定DOM元素的指定属性的完整的值,如800px
    • 用法:. cssVal (el, prop)
    • 参数:

      el(类型:Element):DOM元素

      prop(类型:String):CSS属性

    • 返回值:完整的CSS属性值

    • 示例:
      $api.cssVal(el,'width'); // => 800px
      

    .jsonToStr()

     
    • 描述:将标准的JSON 对象转换成字符串格式
    • 用法:. jsonToStr (json)
    • 参数:json(类型:JSON)
    • 返回值:转换后的字符串
    • 示例:
      var json = {a:111, b:222};
      $api.jsonToStr(json); // => "{"a":111,"b":222}"
      

    . strToJson ()

     
    • 描述:将JSON字符串转换成JSON对象
    • 用法:. strToJson (str)
    • 参数:str(类型:String):JSON字符串
    • 返回值:JSON对象
    • 示例:
      var a = '{"a":"111", "b":"222"}';
      $api.strToJson(a); // => Object {a: "111", b: "222"}
      

    .setStorage()

     
    • 描述:设置localStorage数据
    • 用法:. setStorage (key,value)
    • 参数:

      key(类型:String):键名

      value(类型:任意类型):值

    • 示例:

      $api.setStorage('name','Tom');
      

    .getStorage()

     
    • 描述:获取localStorage数据,必须与$api.setStorage()配套使用
    • 用法:. getStorage(key)
    • 参数:key(类型:String):键名
    • 返回值:localStorage中与键名对应的值
    • 示例:
      $api.getStorage('name'); // => "Tom"
      

    .rmStorage()

     
    • 描述:清除localStorage中与键名对应的值
    • 用法:. rmStorage(key)
    • 参数:key(类型:String):键名
    • 示例:
      $api.rmStorage('name')
      

    .clearStorage ()

     
    • 描述:清除localStorage的所有数据,慎用
    • 用法:. clearStorage ()
    • 示例:
      $api.clearStorage ();
      

    .fixIos7Bar()

     
    • 描述:适配iOS7+系统状态栏,为传入的DOM元素增加20px的上内边距
    • 用法:.fixIos7Bar(el)
    • 参数:el (类型:Element) : DOM元素
    • 备注:自动识别iOS7+,避免应用与状态栏重叠,无法跟config.xml里面的 <preference name="iOS7StatusBarAppearance" value="false" /> 一起使用。
    • 示例:
      var header = document.querySelector('#header');
      $api.fixIos7Bar(header);
      

    .fixStatusBar()

     
    • 描述:适配iOS7+、Android4.4+系统状态栏,为传入的DOM元素增加适当的上内边距,避免header与状态栏重叠
    • 用法:.fixStatusBar(el)
    • 参数:el (类型:Element) : DOM元素
    • 备注:自动识别iOS7+,避免应用与状态栏重叠,无法跟config.xml里面的 <preference name="statusBarAppearance" value="false" /> 一起使用。
    • 示例:
      var header = document.querySelector('#header');
      $api.fixStatusBar(header);
      

    .toast()

     
    • 描述:延时提示框
    • 用法:.toast(title,text,time)
    • 参数:

      title (类型:String) : 标题(可选参数)

      text(类型:String):内容(可选参数)

      time(类型:Number):延时的时间(可选参数),单位为毫秒,默认值为500

    • 示例:

      $api.toast('你好啊');
      $api.toast(2000);
      $api.toast('你好啊',2000);
      $api.toast('你好啊','hello');
      $api.toast('演示','延时提示框',1000);
      

    .get()

     
    • 描述:api.ajax()方法的get方式简写
    • 用法:.get(url,fnSuc,dataType)
    • 参数:

      url (类型:String) : url(必传参数)

      fnSuc (类型:Function):成功回调函数(可选参数)

      dataType(类型:String):返回值的类型(可选参数),有text与json两种类型,默认为json

    • 返回值:根据dataType在成功回调函数里返回相应数据

    • 示例:
      $api.get('http://www.pm25.in/api/querys/pm2_5.json?city=beijing&token=5j1znBVAsnSf5xQyNQyq',function(ret){
        alert(ret);
      },'text');
      

    .post()

     
    • 描述:api.ajax()方法的post方式简写
    • 用法:.post(url,data,fnSuc,dataType)
    • 参数:

      url (类型:String) :url(必传参数)

      data(类型:JSON): 可以有body:请求体(字符串类型)values:post参数(JSON对象)

      files:post文件(JSON对象)等参数(可选参数)

      fnSuc (类型:Function):成功回调函数(可选参数)

      dataType(类型:String):返回值的类型(可选参数),有text与json两种类型,默认为json

    • 返回值:向url地址发送ajax请求,并发送数据data,根据dataType在成功回调函数返回相应数据

    • 示例:
      $api.post('http://192.168.1.233:4321/getString',{
        body: 'String'
      },function(ret){
        alert(ret);
      },'text');

    附:网址 http://docs.apicloud.com/Front-end-Framework/framework-dev-guide

     

     

     

  • 相关阅读:
    Apache+Tomcat+Mysql+php整合jsp,php
    mysql数据类型详析(转)
    有向图(拓扑排序算法)
    FLEX获取GET数据
    Flex对象与组件的数据 双向绑定
    D3D学习摘记(I)中
    [转贴]深入理解Javascript闭包
    一个相当愚蠢的概念错误
    近日小记
    D3D学习摘记(I)上
  • 原文地址:https://www.cnblogs.com/shuibi/p/6408553.html
Copyright © 2011-2022 走看看