UI组件库说明

标准版组件的主要目的是为了规范重构的代码标准和方便开发人员快速开发和维护，目前的组件包括布局 文本 表格 按钮 输入框五大块内容，webfont为可选内容。

组件内容均以ui作为前缀标示，避免和项目文件冲突，在项目中也可以使用:not(.ui)作为区分。

该组件目前仅适用于手机移动端开发。

基本布局

整体框架布局以上中下为准，基本代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"/><!--以手机屏幕为标准，禁止放大缩小-->
<meta name="format-detection" content="telephone=no"/><!--屏蔽IOS下自动转换数字为手机链接-->
<meta name="apple-mobile-web-app-capable" content="yes" /><!--IOS应用模式，自动隐藏默认的工具栏和菜单栏-->
<meta name="browsermode" content="application"><!--UC应用模式-->
<meta name="x5-page-mode" content="app"><!--腾讯X5浏览器应用模式-->
<title></title>
<link href="css/common.css" rel="stylesheet" /><!--引入标准版组件CSS，并保证在最前面引用-->
<body>
<section class="main" data-page="home">
	<header class="header">

	</header>
	<article class="artice">

	</article>
	<footer class="header">

	</footer>
</section>
</body>
</html>

页面分为header article footer三部分，默认为应用模式。section.main作为整体外框架，增加fixed属性即可开启头部底部固定模式。

<section class="main fixed" data-page="home">

自适应布局

栅格系统的配置，组件包含水平和垂直两种方案。

1
2
3
<div class="ui layout">
	<div class="row-1">1</div>
	<div class="row-2">2</div>
	<div class="row-3">3</div>
</div>

增加vertical属性即可实现垂直布局。

1
2
3
<div class="ui layout vertical">
	<div class="row-1">1</div>
	<div class="row-2">2</div>
	<div class="row-3">3</div>
</div>

目前仅支持三栏以下布局，移动端受限于屏幕宽度，三栏以上布局会显得臃肿。

文本

最基本的文本内容p元素

For the Greeks, beauty was a virtue: a kind of excellence. Persons then were assumed to be what we now have to call lamely, enviously whole persons. If it did occur to the Greeks to distinguish between a person’s “inside” and “outside”, they still expected that inner beauty would be matched by beauty of the other kind. The well-born young Athenians who gathered around Socrates found it quite paradoxical that their hero was so intelligent, so brave, so honorable, so seductive and so ugly. One of Socrates main pedagogical acts was to be ugly and teach those innocent, no doubt splendid-looking disciples of his how full of paradoxes life really was.

对于古希腊人来说，美丽是一种美德：一种出色表现。这样的人在今天会理所当然而又无不受嫉妒地被人们称为"完整"的人。即使古希腊人真的曾经将一个个体的"内在"与"外在"区分开来，他们依然会期望这个个体的内在美能够与他其他方面的美相匹配。当那些出身良好的年轻雅典人聚集在苏格拉底周围时，他们发现了一个非常矛盾的事实：他们的英雄是如此地睿智，如此英勇，如此高贵，如此有诱惑力——而且，如此其貌不扬。苏格拉底用自己的丑陋给他的那些天真无邪的，无疑也是非常俊美的始徒们上的其中最重要的一节课就是：生活中充满了矛盾。

<p>For the Greeks, beauty was a virtue: a kind of excellence. Persons then were assumed to be what we now have to call lamely, enviously whole persons. If it did occur to the Greeks to distinguish between a person’s “inside” and “outside”, they still expected that inner beauty would be matched by beauty of the other kind. The well-born young Athenians who gathered around Socrates found it quite paradoxical that their hero was so intelligent, so brave, so honorable, so seductive and so ugly. One of Socrates main pedagogical acts was to be ugly and teach those innocent, no doubt splendid-looking disciples of his how full of paradoxes life really was.</p>
<p>对于古希腊人来说，美丽是一种美德：一种出色表现。这样的人在今天会理所当然而又无不受嫉妒地被人们称为"完整"的人。即使古希腊人真的曾经将一个个体的"内在"与"外在"区分开来，他们依然会期望这个个体的内在美能够与他其他方面的美相匹配。当那些出身良好的年轻雅典人聚集在苏格拉底周围时，他们发现了一个非常矛盾的事实：他们的英雄是如此地睿智，如此英勇，如此高贵，如此有诱惑力——而且，如此其貌不扬。苏格拉底用自己的丑陋给他的那些天真无邪的，无疑也是非常俊美的始徒们上的其中最重要的一节课就是：生活中充满了矛盾。</p>

文本对齐

文本对齐通用样式text-left text-right text-center

文字靠左对齐

文字靠右对齐

文字居中对齐

<p class="text-left">文字靠左对齐</p>
<p class="text-right">文字靠右对齐</p>
<p class="text-center">文字居中对齐</p>

圆角

<img src="" class="rounded" />
<img src="" class="circle" />

提示文本

定义通用提示文本

normal notes

success notes

warning notes

danger notes

<p class="ui notice">normal notes</p>
<p class="ui notice success">success notes</p>
<p class="ui notice warning">warning notes</p>
<p class="ui notice danger">danger notes</p>

文本标签

javascript HTML5 javascript

<span class="ui tag">javascript</span>
<span class="ui tag primary">HTML5</span>
<span class="ui tag rounded">javascript</span>

表格

最基本的表格形式,可定义边框、圆角、背景色。默认只有下边框。

Name Registration Date E-mail address Premium Plan
John Lilki September 14, 2013 jhlilk22@yahoo.com No
Jamie Harington January 11, 2014 jamieharingonton@yahoo.com Yes
Jill Lewis May 11, 2014 jilsewris22@yahoo.com Yes 
<table class="ui table">
	<tr>
	  <th>Name</th>
	  <th>Registration Date</th>
	  <th>E-mail address</th>
	  <th>Premium Plan</th>
	</tr>
	<tr>
	  <td>John Lilki</td>
	  <td>September 14, 2013</td>
	  <td>jhlilk22@yahoo.com</td>
	  <td>No</td>
	</tr>
	<tr>
	  <td>Jamie Harington</td>
	  <td>January 11, 2014</td>
	  <td>jamieharingonton@yahoo.com</td>
	  <td>Yes</td>
	</tr>
	<tr>
	  <td>Jill Lewis</td>
	  <td>May 11, 2014</td>
	  <td>jilsewris22@yahoo.com</td>
	  <td>Yes</td>
	</tr>
</table>

全边框表格

Name Registration Date E-mail address Premium Plan
John Lilki September 14, 2013 jhlilk22@yahoo.com No
Jamie Harington January 11, 2014 jamieharingonton@yahoo.com Yes
Jill Lewis May 11, 2014 jilsewris22@yahoo.com Yes 
<table class="ui table border">
	<tr>
	  <th>Name</th>
	  <th>Registration Date</th>
	  <th>E-mail address</th>
	  <th>Premium Plan</th>
	</tr>
	<tr>
	  <td>John Lilki</td>
	  <td>September 14, 2013</td>
	  <td>jhlilk22@yahoo.com</td>
	  <td>No</td>
	</tr>
	<tr>
	  <td>Jamie Harington</td>
	  <td>January 11, 2014</td>
	  <td>jamieharingonton@yahoo.com</td>
	  <td>Yes</td>
	</tr>
	<tr>
	  <td>Jill Lewis</td>
	  <td>May 11, 2014</td>
	  <td>jilsewris22@yahoo.com</td>
	  <td>Yes</td>
	</tr>
</table>

圆角全边框表格

Name Registration Date E-mail address Premium Plan
John Lilki September 14, 2013 jhlilk22@yahoo.com No
Jamie Harington January 11, 2014 jamieharingonton@yahoo.com Yes
Jill Lewis May 11, 2014 jilsewris22@yahoo.com Yes 
<table class="ui table rounded">
	<tr>
	  <th>Name</th>
	  <th>Registration Date</th>
	  <th>E-mail address</th>
	  <th>Premium Plan</th>
	</tr>
	<tr>
	  <td>John Lilki</td>
	  <td>September 14, 2013</td>
	  <td>jhlilk22@yahoo.com</td>
	  <td>No</td>
	</tr>
	<tr>
	  <td>Jamie Harington</td>
	  <td>January 11, 2014</td>
	  <td>jamieharingonton@yahoo.com</td>
	  <td>Yes</td>
	</tr>
	<tr>
	  <td>Jill Lewis</td>
	  <td>May 11, 2014</td>
	  <td>jilsewris22@yahoo.com</td>
	  <td>Yes</td>
	</tr>
</table>

表格背景

为单行或者单个表格框增加背景色，包含info active success warning danger

Name Registration Date E-mail address Premium Plan
John Lilki September 14, 2013 jhlilk22@yahoo.com No
Jamie Harington January 11, 2014 jamieharingonton@yahoo.com Yes
Jill Lewis May 11, 2014 jilsewris22@yahoo.com Yes 
<table class="ui table">
	<tr class="info">
	  <th>Name</th>
	  <th>Registration Date</th>
	  <th>E-mail address</th>
	  <th>Premium Plan</th>
	</tr>
	<tr>
	  <td class="active">John Lilki</td>
	  <td>September 14, 2013</td>
	  <td>jhlilk22@yahoo.com</td>
	  <td>No</td>
	</tr>
	<tr>
	  <td class="success">Jamie Harington</td>
	  <td>January 11, 2014</td>
	  <td>jamieharingonton@yahoo.com</td>
	  <td>Yes</td>
	</tr>
	<tr>
	  <td class="warning">Jill Lewis</td>
	  <td>May 11, 2014</td>
	  <td>jilsewris22@yahoo.com</td>
	  <td class="danger">Yes</td>
	</tr>
</table>

内容过多的在外层可以放在table-responsive里实现自动滚动

Name Registration Date E-mail address Premium Plan
John Lilki September 14, 2013 jhlilk22@yahoo.com No
Jamie Harington January 11, 2014 jamieharingonton@yahoo.com Yes
Jill Lewis May 11, 2014 jilsewris22@yahoo.com Yes 
<div class="ui table-responsive">
	<table class="ui table border">
		<tr>
		  <th>Name</th>
		  <th>Registration Date</th>
		  <th>E-mail address</th>
		  <th>Premium Plan</th>
		</tr>
		<tr>
		  <td>John Lilki</td>
		  <td>September 14, 2013</td>
		  <td>jhlilk22@yahoo.com</td>
		  <td>No</td>
		</tr>
		<tr>
		  <td>Jamie Harington</td>
		  <td>January 11, 2014</td>
		  <td>jamieharingonton@yahoo.com</td>
		  <td>Yes</td>
		</tr>
		<tr>
		  <td>Jill Lewis</td>
		  <td>May 11, 2014</td>
		  <td>jilsewris22@yahoo.com</td>
		  <td>Yes</td>
		</tr>
	</table>
</div>

按钮

基本的按钮，可以修改大小、颜色

tiny small default large 

<a href="#" class="ui button tiny">tiny</a>
<a href="#" class="ui button small">small</a>
<a href="#" class="ui button">default</a>
<a href="#" class="ui button large">large</a>

active disabled primary 

<a href="#" class="ui button active">active</a>
<a href="#" class="ui button disabled">disabled</a>
<a href="#" class="ui button primary">primary</a>

success error warning secondary 

<a href="#" class="ui button success">success</a>
<a href="#" class="ui button error">error</a>
<a href="#" class="ui button warning">warning</a>
<a href="#" class="ui button secondary">secondary</a>

增加block border rounded实现全屏、边框、圆角样式。

button

button

<a href="#" class="ui button block">button</a>
<a href="#" class="ui button block border rounded">button</a>

多按钮

多个按钮并排

default default 
<div class="ui buttons">
	<a href="#" class="ui button block rounded"><i class="fa fa-adn"></i>default</a>
	<a href="#" class="ui button block rounded"><i class="fa fa-adn"></i>default</a>
</div>

切换按钮组

多个按钮成组横排或竖排

default default default 
<div class="ui button-group border">
	<a href="#" class="ui button block"><i class="fa fa-adn"></i>default</a>
	<a href="#" class="ui button block"><i class="fa fa-adn"></i>default</a>
	<a href="#" class="ui button block"><i class="fa fa-adn"></i>default</a>
</div>
default default default 
<div class="ui button-group border rounded">
	<a href="#" class="ui button small block"><i class="fa fa-adn"></i>default</a>
	<a href="#" class="ui button small block"><i class="fa fa-adn"></i>default</a>
	<a href="#" class="ui button small block"><i class="fa fa-adn"></i>default</a>
</div>
default default default 
<div class="ui button-list border">
	<a href="#" class="ui button block"><i class="fa fa-adn"></i>default</a>
	<a href="#" class="ui button block"><i class="fa fa-adn"></i>default</a>
	<a href="#" class="ui button block"><i class="fa fa-adn"></i>default</a>
</div>
default default default 
<div class="ui button-list border rounded">
	<a href="#" class="ui button block"><i class="fa fa-adn"></i>default</a>
	<a href="#" class="ui button block"><i class="fa fa-adn"></i>default</a>
	<a href="#" class="ui button block"><i class="fa fa-adn"></i>default</a>
</div>

输入框

常见input类型，包括text checkbox radio

<div class="ui field">
	<input type="text" class="ui input" placeholder="Input text" />
</div>

带边框的输入框

<div class="ui field border">
	<input type="text" class="ui input" placeholder="Input text" />
</div>

圆角带边框的输入框

<div class="ui field border rounded">
	<input type="text" class="ui input" placeholder="Input text" />
</div>

透明输入框

<div class="ui field border transparent">
	<input type="text" class="ui input" placeholder="Input text" />
</div>

输入框包含两种状态disable readonly

<div class="ui field border rounded">
	<input type="text" class="ui input" placeholder="disabled" disabled="disabled" />
</div>
<div class="ui field border rounded">
	<input type="text" class="ui input" placeholder="readonly" readonly="readonly" />
</div>

错误提示

<div class="ui field error">
	<input type="text" class="ui input" placeholder="Input text" />
</div>
<div class="ui field border rounded error">
	<input type="text" class="ui input" placeholder="Input text" />
</div>

带提示文字的输入框，提示文字放在ui label内。

Username
<div class="grid">
	<div class="ui field text">
		<div class="ui label">Username</div><input type="text" class="ui input" placeholder="Input text" />
	</div>
</div>

提示文字也支持边框和圆角

Username
Username
<div class="ui field border text">
	<div class="ui label">Username</div><input type="text" class="ui input" placeholder="Input text" />
</div>
<div class="ui field border rounded text">
	<div class="ui label">Username</div><input type="text" class="ui input" placeholder="Input text" />
</div>

部分项目用到模拟输入框，使用动画效果实现输入提示

Username
Username
<div class="grid">
	<div class="ui field text border rounded">
		<div class="ui label">Username</div><div class="ui input" date-placeholder="Input text"></div>
	</div>
</div>
<div class="grid">
	<div class="ui field text border rounded">
		<div class="ui label">Username</div><div class="ui input active" date-placeholder="Input text"></div>
	</div>
</div>

下拉列表

模拟下来列表，支持边框、圆角等属性

下拉选项 
<div class="ui field">
	<div class="ui dropdown">
		<strong>下拉选项</strong>
	</div>
</div>

带边框的下拉列表

下拉选项 
<div class="ui field border">
	<div class="ui dropdown">
		<strong>下拉选项</strong>
	</div>
</div>

圆角带边框的下拉列表

下拉选项 
<div class="ui field border rounded">
	<div class="ui dropdown">
		<strong>下拉选项</strong>
	</div>
</div>

透明背景下拉列表

下拉选项 
<div class="ui field transparent">
	<div class="ui dropdown">
		<strong>下拉选项</strong>
	</div>
</div>

带提示文字的下拉列表

Username
下拉选项 
<div class="ui field text">
	<div class="ui label">Username</div>
	<div class="ui dropdown">
		<strong>下拉选项</strong>
	</div>
</div>

提示文字也支持边框和圆角

Username
下拉选项
Username
下拉选项 
<div class="grid">
	<div class="ui field text">
		<div class="ui label">Username</div>
		<div class="ui dropdown">
			<strong>下拉选项</strong>
		</div>
	</div>
</div>
<div class="grid">
	<div class="ui field text border rounded">
		<div class="ui label">Username</div>
		<div class="ui dropdown">
			<strong>下拉选项</strong>
		</div>
	</div>
</div>

表单

单选多选需要使用label的关联标签激活。

<div class="ui checkbox"><input type="checkbox" id="checkbox_1" /><label>Username</label></div>
<div class="ui radio"><input type="radio" id="radio_1" checked="checked" /><label>Username</label></div>

切换键

默认样式是仿IOS原生切换，可以增加提示文字

ONOFF
<div class="ui switch">
	<input type="checkbox" />
	<div class="ui switch-inner">
		<div class="ui switch-btn"><span class="active">ON</span><span class="inactive">OFF</span></div>
		<div class="ui switch-arrow"></div>
	</div>
</div>
ONOFF
<div class="ui switch text">
	<input type="checkbox" />
	<div class="ui switch-inner">
		<div class="ui switch-btn"><span class="active">ON</span><span class="inactive">OFF</span></div>
		<div class="ui switch-arrow"></div>
	</div>
</div>

自定义组件

待整理

屏幕适配

待整理

Animate

待整理

WebFont

1234567890

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

常见问题整理

目前各种手机配置，浏览器版本不一，在移动端重构中出现很多性能或者兼容性问题，由于兼容性涉及比较多的CSS3样式，且大多是私有化属性，在这里不再列举，仅列出开发中遇到的实际问题。

滚动区域滑动不流畅

IOS下可以增加-webkit-overflow-scrolling:touch;改善问题。

-webkit-overflow-scrolling为滚动增加了快速滚动和回弹效果，调用的是原生硬件加速，能极大改善卡顿效果。

安卓下可以增加3D变换实现硬件加速

-webkit-transform: translate3d(0, 0, 0); 
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);