Zhiqim UI是一套集成Javascript库、Css库、Font库、常用ico图标等，并在其上开发的大量UI组件组成的前端开发套件。
test.htm2KB
<!DOCTYPE html>
<html>
<head>
<title>知启蒙前端框架</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
<meta name="Author" content="知启蒙" />
<meta name="Keywords" content="ZhiqimUI 知启蒙 zhiqim 开发教程 Java HTML5"/>
<meta name="Description" content="知启蒙前端框架（ZhiqimUI）是一套集成Javascript库、Css库、Font库、常用ico图标等，并在其上开发的大量UI组件组成的前端开发套件。"/>
${Styles.src("/src/zhiqim.css")}
<!-- 引入zhiqimUI的css文件 -->
<link rel="stylesheet" href="https://zhiqim-org.oss-cn-shenzhen.aliyuncs.com/service/res/zhiqim_v1.5.0.r2018091201.css">
<!-- 引入zhiqimUI的js文件 -->
<script src="https://zhiqim-org.oss-cn-shenzhen.aliyuncs.com/service/res/zhiqim_v1.5.0.r2018091201.min.js"></script>
<script>
var i = 1;
function doUpdate()
{
//以下代码将把id为text的input的value值改为"新的内容"。
Z("#text").val("新的内容"+(i++));
}
function doDialog()
{
//以下代码弹出一个对话框。支持两种（dialog.text和dialog.url）
var dialog = new Z.Dialog();
dialog.text = "<div class='z-absolute-center-middle z-w100 z-h60 z-px20'>对话框内容</div>";//弹出对话框的内置HTML
//dialog.url = location.href;//使用iframe弹出加新URL
dialog.width = 500;
dialog.height = 300;
dialog.execute();
}
</script>
</head>
<body>
<!-- 使用zhiqimUI的CSS定义 -->
<table class="z-table z-bordered z-bd-rd8 z-absolute-center-middle zi-w300 z-h200">
<tr>
<td class="z-text-center">
<input id="text" class="z-input z-large" value="原内容"> <button class="z-button z-blue z-large" onclick="doUpdate();">点击</button>
</td>
</tr>
<tr>
<td class="z-text-center">
<button class="z-button z-blue z-large" onclick="doDialog();">弹出对话框</button>
</td>
</tr>
</table>
<table class="z-table z-bordered z-bd-rd8 zi-w300 z-h200">
<tr>
<td>
<i class="z-font z-timetable z-px18 z-mg-r10"></i>
<i class="z-font z-bell z-px18 z-mg-r10"></i>
<i class="z-font z-alarm-clock z-px18 z-mg-r10"></i>
<i class="z-font z-w-doc z-px18 z-mg-r10"></i>
<i class="z-font z-news z-px18 z-mg-r10"></i>
<i class="z-font z-codesign z-px18 z-mg-r10"></i>
</td>
</tr>
<tr>
<td>
<button class="z-button z-blue z-large" onclick="doDialog();">弹出对话框</button>
</td>
</tr>
</table>
</body>
</html>