概述

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,'width: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

APICloud APP前端框架——手机APP开发、APP制作、APP定制平台的更多相关文章

  1. Framework7 – 赞!功能齐全的 iOS7 App 前端框架

    Framework7 是一个功能很全的 HTML 框架,用来构建 iOS7 应用程序. Framework7 允许您灵活搭建列表视图(表视图) .你可以让他们作为导航菜单,你可以在列表里面使用图标,输 ...

  2. Github上最全的APICloud开源前端框架效果盘点(转)

    1.微信网站几分钟变身“原生 App” 微信推出了微信JS-SDK,使微信公共号可以直接调用微信原生的接口,具备部分原生应用的能力.微信JS-SDK的推出,将大大提高微信公共号的 用户体验,但是如果存 ...

  3. Framework7功能齐全的 iOS7 App 前端框架

    Framework7 是一个功能很全的 HTML 框架,用来构建 iOS7 应用程序. Framework7 允许您灵活搭建列表视图(表视图) .你可以让他们作为导航菜单,你可以在列表里面使用图标,输 ...

  4. Spring框架入门之开发环境搭建(MyEclipse2017平台)

    基于MyEclipse2017平台搭建Spring开发环境,这里MyEclipse已将Spring集成好了,我们只需要做一简单配置即可 一.环境配置 OS:Windows7 64位 IDE工具:MyE ...

  5. 闲暇时间开发的个人app

    最近一段时间公司不是很忙,晚上基本没怎么加班.所以自己利用晚上在家的时间开发了一个app(奇趣营),其实自从转android开发以来,就有想过要自己开发一个app.一方面可以提升自己的经验:另一方面可 ...

  6. 【转】基于laravel制作APP接口(API)

    这篇文章主要介绍了基于laravel制作APP接口(API)的相关资料,需要的朋友可以参考下 前期准备 前言,为什么做以及要做个啥本人姓小名白,不折不扣编程届小白一名,但是自从大一那会儿接触到编程这件 ...

  7. 2015 年开源前端框架盘点 TOP 20

    1.名称:Bootstrap 类别/语言:HTML.CSS.JavaScript 创建者: Twitter 人气:在Github上有91007 stars 描述:主流框架中毋庸置疑的老大,Bootst ...

  8. vue 前端框架

    什么是vue.js 1.vue是目前最火的一个前端框架,react 是最流行的前端框架(react除了开发网站,还可以开发手机APP,vue语法也是可以进行手机app开发的,需要借助于weex) 2. ...

  9. 2015年开源前端框架盘点TOP20

    2015年,榜单根据github上star数作为排名依据.(榜单中大部分为组件式框架, react.Angular等基础框架不在此篇讨论) 1.Bootstrap 类别/语言:HTML.CSS.Jav ...

随机推荐

  1. web中浏览PDF文件

    1.在web中浏览pdf文件. 2.支持大多数主流浏览器,包括IE8 3.参考网址: https://pdfobject.com/ http://mozilla.github.io/pdf.js/ & ...

  2. .net core Ocelot Consul 实现API网关 服务注册 服务发现 负载均衡

    大神张善友 分享过一篇 <.NET Core 在腾讯财付通的企业级应用开发实践>里面就是用.net core 和 Ocelot搭建的可扩展的高性能Api网关. Ocelot(http:// ...

  3. (C#)字符串反转

    方法一: public static string Reverse(string name) {     if (String.IsNullOrEmpty(name))       {        ...

  4. 用 vs 2017创建 windows 服务

    转载自:http://www.cnblogs.com/xujie/p/5695673.html 1.新建windows服务项目,我这里选择的是Framework4.0,没有选择高版本是为了防止在服务在 ...

  5. c# 判断当前时间是否在某一时间段内

    //获取当前系统时间并判断是否为服务时间 TimeSpan nowDt = DateTime.Now.TimeOfDay; TimeSpan workStartDT = DateTime.Parse( ...

  6. SFML从入门到放弃(3) 视角和碰撞检测

    SFML从入门到放弃(3) 视角和碰撞检测 视角 window.draw();所画出的对象是在世界坐标的绝对位置. 视角可以选定在窗口中显示世界坐标下的的哪一个区域. sf::View init_vi ...

  7. UIVisualEffectView(高斯模糊效果)

    ///高斯模糊. UIView *tempView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)]; tempView. ...

  8. 听补天漏洞审核专家实战讲解XXE漏洞

    对于将“挖洞”作为施展自身才干.展现自身价值方式的白 帽 子来说,听漏洞审核专家讲如何挖掘并验证漏洞,绝对不失为一种快速的成长方式! XXE Injection(XML External Entity ...

  9. Android安全防护防护———加密算法

    摘要 这篇文章本来早就应该写了,但是由于项目一直开发新的需求,就拖后了.现在有时间了,必须得写了.现在Android应用程序对安全防范这方面要求越来越高了.特别是金融行业,如果金融app没有没有做好相 ...

  10. 系统可能不会保存你所做的修改 onbeforeunload

    网上找了好多实现这个的方法,说的还是不明白.害得我(我自己的原因)以为是需要在服务器环境下才能跑通 window.onbeforeunload; 后来猜想是不是函数返回值发生变化就会触发. <! ...