LUNGO 框架：CLASS 标识属性列表

CLASS 标识

CLASS

作用

说明

active

元素将会被激活或选中状态

list下的active：

背景色设为#0EC8FF，蓝色

section .list li a.active

section .list li.active

show

元素将会被显示

on-right

header右边的按钮部件

<header>

<nav class="on-right">

<button data-icon="user"></button>

</nav>

</header>

list

列表应用的样式，在不同组件下样式有不同的设置

Eg：Menu下的list作用

1.对li标签设置list-style，padding，line-height，position等样式。

li的padding都设为padding：0.8em

除了li.big不设置padding

（.list li:not(.big){ padding:0.8em; }）

2.对li.active/li:hover标签设置背景颜色和字体 颜色

3.对li下的strong、small标签变为block

4.对li下的.icon设为float:left

scroll

横向不允许滚动

纵向按需滚动

设置内容水平滚动

overflow-y: scroll;

overflow-x: hidden;

Eg：Menu下的scroll作用

1.让过高的Menu垂直滚动

2.横向过长将会隐藏。

3.Menu的宽度框架定为了256px

horizontal

与scroll配合使用

.scroll.horizontal

设置内容水平滚动

overflow-x: scroll;

overflow-y: hidden;

eg：

<ul class="horizontal scroll">

<img style="height:500px;"src="http://127.0.0.1/320/164/food/">

<img src="http://127.0.0.1/320/164/sports/">

</ul>

=>

<ul style="height:500px;"class="horizontal scroll">

<img style="height:500px;"src="http://127.0.0.1/320/164/food/">

<img src="http://127.0.0.1/320/164/sports/">

</ul>

红色部分为框架自动补充的，高度与第一张图的高度为准。

on-right

Float:right

on-left

Float:left

contrast

在列表中用于区分行，设置一种不同于其他行的背景色

框架预设的背景色为#CFCFCF

anchor

锚，一般用于list下的li

或者button

框架预设的整站字体大小为16px,

框架预设的anchor：

Font-size:0.9em; padding: 0.25em 0.5em;

此处anchor作用将button宽度占满整行

<button data-label="Warning"class="anchor warning"></button>

small

主要用于.button

框架预设.button.small

font-size: 0.9em;

line-height: 2.25em;

但list下的button.small.on-right的会改变font-size为11px。

thumb

带左图的li

<article class="list">

<ul>

<li class="thumb">

<img src="">

<div>

content....

</div>

</li>

</ul>

</article>

img尺寸为44px*44px

li.thumb padding:.8em

div padding-left:.8em

在firefox对img的宽高设置失效。在其他现代浏览器正常。

big

带左图的li,与thumb一起用

<article class="list">

<ul>

<li class="thumb big">

<img src="">

<div>

content....

</div>

</li>

</ul>

</article>

img尺寸为65px*65px

div padding:0.25em 0.4em

selectable

激活后（点击）有效果，背景设为#0EC8FF，蓝色

应用位置：

.list ul li.selectable:active

.list ul li a.selectable:active

theme

背景设为#0EC8FF，蓝色

应用位置：

.list ul li.theme

.list ul li a.theme

accept

左边框：绿色 #2ecc71

应用位置：

.list ul li.accept

button.accept

cancel

左边框：红色 #e74c3c

应用位置：

.list ul li.accept

button.cancel

warning

左边框：橙色 #edba22

应用位置：

.list ul li.accept

button.warning

disabled

灰色#bababa

应用位置：

button.disabled

color

淡白色 #f5f5f5

应用位置：

button.color

text

结合italic、underline、line-through、align_left、align_right、align_center、align_align_justify、tiny（0.8em）、small（0.9em）、big（1.2em）、large（1.4em）、opacity（0.5）、bold一起使用

控制文字

应用方式：

<input type="text"class="text align_right">

select

框架重写下拉框默认样式，使其与input['type'=='date']保持一致的风格（向下的三角箭头）

lungo.css 199line：

form label.select:after,.form label.select:after

对select标签去除默认样式

-webkit-appearance:none

<label class="select">

<select>

<option value="1">HTML5 Jedi</option>

.....

</select>

</label>

<input type="range">

框架重新设计其按钮

<input type="range">

form

框架重新设计checkbox的样式

<divclass="form">

<input type="checkbox">

</div>

其中checked的状态下的绿色底色填充方式

box-shadow:inset 0 0 0 13px #2ecc71

border-color:#2ecc71

过度效果：

transition:border .25s,box-shadow .25s,padding .25s .15s

success

在不同对象下会有不同的css样式设置

应用方式

<input class="border success">

效果：边框，内容字体颜色为绿色

error

在不同对象下会有不同的css样式设置

应用方式

<input class="border error">

效果：边框，内容字体颜色为红色

indented

主要对list设计，让list外留间隔

应用位置：

.list.indented

对list下一级子元素设置paddding：0.5333em

对list下的li设置margin-bottom：0.8em

注意

section块底部的工具栏要依照约定的HTML结构，才能应用lungo.theme.css样式。

<footer>

<nav>

<a data-icon="user"data-view-article="layout-art1"></a>

......

<nav>

</footer>

section块footer的tag与data-control="groupbar"中的tag会自动关联。

data-control="groupbar"：

<nav data-control="groupbar">

<a data-label="Profile"data-view-article="layout-art1"></a>

</nav>

footer的tag：

<footer>

<nav>

<a data-icon="user"data-view-article="layout-art1"></a>

</nav>

</footer>

任意选其一，另外一组的tag都会被选中。关联依据为 data-view-article。

Menu有约定的标签，要使用aside，使用div会应用不上框架自带样式库

<aside id="features">

.....

</aside>

data-icon

<fieldset data-icon="plus">

<span class="icon plus"></span>

</fieldset>

在form fieldset .icon,.form fieldset .icon

icon靠右布局

<button data-icon="plus">

<span class="icon plus"></span>

</button>

icon靠左布局

accept、cancel、warning、disabled、color

同一个class控制的元素的颜色值一致。整站只要见到该颜色值就能知道是什么意思。

Lungo.init方法的复合参数说明

1.name：应用的名字

2.version：Lungo的版本号，默认有一个版本号如2.2.0

3.resources：一开始加载的时候就先load下来，不管是否需要显示。

[

'static_html/asides/features.html'

,'static_html/asides/right.html'

,'static_html/sections/form.html'

]

注意与data-async区别，data-async是当用户点击后才去异步获取资源。

4.history：boolean。

意义未明。

button标签

默认底色为蓝色#0095c1

aside

在aside的li，如果 data-view-section、data-view-article 设为aside的id或为空，则点击它的时候，aside自动隐藏。

容错处理： data-view-article指向有问题，如指向section块，那么点击后也会做自动隐藏。

<li data-view-section="">

<strong>Tap to close</strong>

</li>

或

<li data-view-article="">

<strong>Tap to close</strong>

</li>

list的约定HTML结构

<article class="list indented">

<ul>

<li>content</li>

<li>content</li>

</ul>

</article>

或者：

<sectionclass="list">

<ul>

<li>content</li>

<li>content</li>

</ul>

</section>

aside的list要手工加active

，否则不显示aside的内容

黑屏遮罩会预先设置好

加载时机：加载完 lungo.min.js就会被设置。

设置的位置：

<script src="../js/lib/quo.min.js"></script>

<script src="../js/lib/lungo.min.js"></script>

系统环境的获取

var environment = Lungo.Core.environment();

// 是否是手机

environment.isMobile

// 横向分辨率【不可靠】

environment.screen.width

// 纵向分辨率【不可靠】

environment.screen.height

// 系统名称

environment.os.name

// 系统版本

environment.os.version

// 浏览器UA信息（内核/版本号---eg：WebKit/534.30）

environment.browser

事件注册方式

事件类型触发时机：

load ：页显示时

unload ： 页隐藏时

touch：触摸时

Lungo.Events.init({

'load section#pull': function(event) {

// 事件类型： load

// 绑定对象： section#pull

}

,'touch article#notification a[data-action=normal]': function() {

// 事件类型： touch

// 绑定对象：article#notification a[data-action=normal]

}

})