Chico UI使用指南-1 -

weiliuhong1

浏览: 65364 次
性别:
来自: 成都

最近访客更多访客>>

漂流的面包

zhangjinxi

Arog

bleachccb

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Chico UI使用指南-1

博客分类：

Chico UI

Chico UI jQuery easyUI 操作指南 get start

1、Chico UI 简介

Chico UI 是一款基于jQuery的支持HTML5和CSS3的前端页面工具。帮助开发人员编写CSS和JS，提供常用的页面效果，比直接写JS和CSS轻松。同时提供的UI组件相对于jQuery easyUI侵入性小，用户可以相对灵活的编写前端页面（easyUI提供了一套自己的页面渲染方式和dom操作方法，传统jQuery操作基本失去了意义），并且渲染速度快，页面延时低（我自己的一个应用页面查询时间大约在10毫秒，但是easyUI渲染到相应完成时间大约是300毫秒到3秒不等，除了网络延时外，主要消耗就在easyUI的渲染上了）。

2、Chico UI 资料

官方网站地址：http://www.chico-ui.com.ar/

API地址：http://www.chico-ui.com.ar/api/0.13.3/index.html

下载地址：http://www.chico-ui.com.ar/download

3、Chico UI兼容性

ChicoUI采用条件注释的方式来兼容不同版本的浏览器（主要是IE）,加入下面的注释之后Chico UI就会自动的适配浏览器，将合适的效果展现在页面上（挺不错的用IE7打开是正常），注释信息如下：

<!doctype html>
<!--[if IE 7]>	<html class="no-js  lt-ie10 lt-ie9 lt-ie8 ie7" lang="en"> <![endif]-->
<!--[if IE 8]>	<html class="no-js lt-ie10 lt-ie9 ie8" lang="en"> <![endif]-->
<!--[if IE 9]>	<html class="no-js lt-ie10 ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="es"> <!--<![endif]-->

4、使用Chico UI

在页面中增加CSS和JS，由于Chico UI是对jQuery的扩展，故必须依赖jQuery，还有文件顺序最好是jQuery在最前面，Chico UI在后面，防止页面先加载Chico UI出现js异常：

<link rel="stylesheet" href="css/reset-min-0.13.3.css">
<link rel="stylesheet" href="css/chico-min-0.13.3.css">
<link rel="stylesheet" href="css/mesh-min-2.1.css">
<script src="js/jquery.js"></script>
<script src="js/chico-min-0.13.3.js"></script>

5、Hello World!

下面使用Chico UI写一个简单的Hello World! 弹出层的例子，这里使用了Chico UI的提供的modal方法用于弹出层。实现逻辑：1、使用css隐藏Hello World所在DIV；2、系统加载时默认加载Chico UI的modal方法；3、发生点击事件时弹出层展示Hello World所在DIV（Chico UI自己已经实现）。下面是页面代码：

<!doctype html>
<!--[if IE 7]>	<html class="no-js  lt-ie10 lt-ie9 lt-ie8 ie7" lang="en"> <![endif]-->
<!--[if IE 8]>	<html class="no-js lt-ie10 lt-ie9 ie8" lang="en"> <![endif]-->
<!--[if IE 9]>	<html class="no-js lt-ie10 ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="es"> <!--<![endif]-->
<head>
	<script></script>
	<meta charset="GBK" />
	<title>Chico UI</title>
    <link rel="stylesheet" href="css/chico-min-0.13.3.css">
</head>

<body>
	<h1>Chico UI</h1>
	<div class="ch-box-lite">
		<button class="YOUR_SELECTOR_Modal_invisible ch-btn ch-btn-small">使用Modal弹出层</button>
		<!--隐藏要展示的内容-->
		<div id="invisible-content" class="ch-hide">
			<h1>Chico UI</h1>
			<p>Hello world!</p>
			<p>欢迎使用Chico UI! </p>
			<div class="ch-actions">
				<button class="ch-btn">确定</button>
			</div>
		</div>
	</div>

	<script src="js/jquery.js"></script>
	<script src="js/chico-min-0.13.3.js"></script>
	<script>
		// 给出标题名称和版本信息
		document.title = document.getElementsByTagName("h1")[0].innerHTML = document.title + " v" + ch.version;
		// 调用chicoUI的modal方法展示出指定的内容
		var modal2 = $(".YOUR_SELECTOR_Modal_invisible").modal($("#invisible-content"));
	</script>
</body>
</html>

6、效果：