56 lines
2.0 KiB
HTML
56 lines
2.0 KiB
HTML
<!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组件组成的前端开发套件。"/>
|
||
|
||
<!-- 引入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>
|
||
</body>
|
||
</html>
|