html5app实例,GitHub - dawncc/html5--app: 轻量级的html5响应式框架和移动app框架实例

html5--app

轻量级的html5响应式框架和移动app框架实例

lungo.js

一个使用 HTML5/CSS3 和 JavaScript 技术的移动 Web 开发框架。

http://lungo.tapquo.com/

结构

主页面引用

section 单个页面的ui容器

Your content

使用js加载

//Load resource on app init

Lungo.init({

name: 'example',

resources: ['section_to_load.html']

});

使用link加载

Go to section

使用 data-view-section 跳转页面

Go to load

Your loader

返回按钮

使用data-view-*属性跳转页面不记录在浏览器后退栈中,浏览器默认后退无用

在header中使用 data-back

在或者中使用 data-view-section="back" 或者 href="#back"

Back to section

主要元素

Section & Article

一个Section表示可表示一个完整的ui，其中可包括、、等元素。

如果需要制定当前活动页，可使用class="active"

{{CONTENT}}

Header

{{CONTENT}}

header中可以添加导航按钮, 使用class="on-right"或者class="on-left"可以指定按钮位置

Footer

{{CONTENT}}

Aside

侧边栏的UI模板

{{CONTENT}}

UI模板生成以后需要将aside链接到主页面中

用data-aside="features"指定启用aside的id，使用data-view-aside指定点击按钮显示或隐藏的aside

{{CONTENT}}

导航

Data-View

使用 data-view-*进行页面跳转，需要指定被跳转页面为、还是

To article_2

Groupbar

页面中的分类导航使用data-control="groupbar"，如果作为header导航的推展，需要在中添加class="extended"

Art-1

Art-2

{{CONTENT}}

{{OTHER_CONTENT}}

Menu

弹出下拉菜单，使用data-control="menu"来指定nav的样式为menu，使用data-view-menu="id"来指定按钮弹出下拉菜单

Home

Explore

Activity

Profile

数据绑定

Data-title

指定title data-title="Default title"

Data-label

指定内容 data-label="Default label"

JavaScript API

Core

log()

调试打印信息,其中 (1)Log, (2)Warn, (>2)Error

Example

Lungo.Core.log(1, "Launched event");

Lungo.Core.log(2, "Warning!!");

Lungo.Core.log(3, "Error!!!!");

execute()

顺序执行指定回调方法

Example

var myFunc = function(){

//Do something

};

var myFunc2 = function(){

//Do something

};

Lungo.Core.execute(myFunc, myFunc2);

isMobile()

Returns 检测是否为移动设备

Example

Lungo.Core.isMobile();

//Result:false

environment()

Returns 当前环境

Example

Lungo.Core.environment();

//Result: "Object {browser: "WebKit/537.36", os: null, isMobile: false, screen: Object}"

Cache

lungo 提供类似于session的缓存机制,

set()

使用key/value形式存储缓存

Parameters

string: Key for the new value.

string: [OPTIONAL] Subkey in LungoJS Cache System.

object: Value asigned to the key.

Example

var framework = {name: "Lungo", twitter: "lungojs"};

Lungo.Cache.set("lungoFramework", framework);

get()

Returns the cached value of a given key.

Parameters

string: Key in LungoJS Cache System.

string: [OPTIONAL] Subkey in LungoJS Cache System.

This method return an object containing the value.

Example

var cachedFramework = Lungo.Cache.get("lungoFramework");

//Result: {name: "Lungo", twitter: "lungojs"}

remove()

Removes the instance of a given key in LungoJs Cache System.

Parameters

string: Key in LungoJS Cache System.

string: [OPTIONAL] Subkey in LungoJS Cache System.

Example

Lungo.Cache.remove("lungoFramework");

exists()

Checks if the given key is stored in the cache.

Parameters

string Key in LungoJS Cache System.

This method return a boolean value which is true if the key is found

Example

Lungo.Cache.exists("lungoFramework");