zyy
/
ziqim


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
							<!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="原内容">&nbsp;&nbsp;<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>