Chico UI操作指南-1

来源：互联网发布：企业数据库er图编辑：程序博客网时间：2024/06/05 18:03

Chico UI使用起来不像jQuery那样需要写CSS也不会像jQuery EasyUI一样侵入代码，挺好的

DEMO下载地址

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打开是正常），注释信息如下：

Java代码

<!doctype html>
<html class="no-js" lang="es">

4、使用Chico UI

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

Java代码

<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自己已经实现）。下面是页面代码：

Java代码

<!doctype html>
<html class="no-js" lang="es">
<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、效果：