Chico UI使用指南-1
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>