LUNGO 框架 DATA-SET属性列表

DATA-SET

属性

值

说明

data-transition

slide/cover/fade

left/right

动画模式

应用场景

left:

<aside data-transition="left"></aside>

效果：从左边滑入

right:

<aside data-transition="right"></aside>

效果：从右边滑入

data-direction

in/out/back-in/back-out

修改记录：

1.phoneSlideBackOut 与 phoneSlideOut keyframe名称对换

动画方向

slide-in 右向左

slide-back-in 先收缩再向左扩张

slide-out 左向右

slide-back-out向右收缩再淡出

cover-in 右向左

cover-out 上至下

cover-back-in 内陷到平面

cover-back-out 平面到内陷

fade-in/fade-back-in 淡入

fade-out/fade-back-out 淡出

data-icon

glass/music/search..

lungo.icon.css文件中已罗列

框架会做相应渲染

（请看表“渲染前后对比”）

data-view-article

article标签元素的id

跳转到指定的article

Eg:

<a data-view-article="form-indented"></a>

data-view- section

section 标签元素的id或者”back”

跳转到指定的 section

Eg:

<a data-view-section="splash"></a>

跳转到上一页

<a data-view-section="back"></a>

data-async

异步加载文件内容

（注意 data-async负责获取内容，跳转还是要依赖 data-view-section）

Eg:

<a data-async="static/sections/splash.html"data-view-section="splash">

</a>

data-label

tab的名称

框架会做相应渲染

data-count

数字

标识一个统计数字

框架会做相应渲染

data-back

chevron-left/chevron-right

返回上一页操作。

chevron-left：箭头向左

chevron-right ： 向右

框架会做相应渲染

data-aside

Menu的id

指定应用的Menu，一般应用于<section id="main"></section>

<section id="main"data-aside="features">

data-control

"groupbar"

不做相应渲染，但辅助控制样式

应用场景：

<section>

<nav data-control="groupbar">

<a data-view-article="form-normal"></a>

....

</nav>

</section>

实现等分样式：

nav : display:-moz-box;

-moz-box-pack:justify;

nav a : -moz-box-flex: 1;

data-progress

进度条

框架会做相应渲染

data-layout

middle、third、quarter

基于box-flex

默认为box-flex:1

水平分割：

middle：width:50%

third：width:33%

quarter：width:25%

意义：

middle是third的50/33 倍

middle是quarter的33/25 倍，表示的是相互间的比例，而不是占总长度的比例。

third是third的50/33 倍

垂直分割：

middle：height:50%

third：height:33%

quarter：height:25%

secondary：box-flex:2

primary：box-flex:3

水平分割：

此例实际为2:1等分

<div class="layout horizontal">

<div data-layout="middle"></div>

<div data-layout="quarter"></div>

</div>

垂直分割：

此例实际为1:1等分

<div class="layout">

<div data-layout="quarter"></div>

<div data-layout="quarter"></div>

</div>

此例实际为1:2等分

<div class="layout horizontal">

<div></div>

<div data-layout="secondary"></div> </div>

disabled

true

框架会将其改为不可用的样式：变灰色

css文件：lungo.theme.css

注意：设为false依然会变灰，要去除变灰，要移除disabled属性

data-pull

arrow-down、arrow-up

框架会做相应渲染。

arrow-down：初始化图标为向下的箭头

arrow-up：初始化图标为向上的箭头

data-action

自定义如（Normal、loading、confirm、html、success、error...）

框架会做相应渲染。

通过框架JS接口，调用实现定制的弹出框。

如：

Lungo.Notification.show('user', 'Title', 2);