MiniUI/jQuery MIniUI使用教程(一)

下载安装

去官网地址：http://www.miniui/download/ 下载试用版本代码
核心文件

这里我们只需要关注这两个文件夹，其中res里面是静态资源、css文件、三方插件等

scripts(核心文件夹)里面包含miniui核心文件和boot.js启动js，启动js对文件引入进行归类，我们在使用的时候，只需要引入boot.js即可。
测试代码

新建文件夹-拷入res和scripts两个核心文件夹
新建测试文件，拿tree控件举例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="./scripts/boot.js"></script>
</head>
<body>
	<ul id="tree1" class="mini-tree" style="width:300px;padding:5px;" showTreeIcon="true" textField="text" idField="id"></ul>

		<script>
			mini.parse();
			var tree1 = mini.get("tree1");
			var data = [
				{
					id: "base", text: "Base",
					children: [
						{ id: "ajax", text: "Ajax" },
						{ id: "json", text: "JSON" }
					]
				},
				{
					id: "forms", text: "Forms",
					children: [
						{ id: "button", text: "Button" },
						{ id: "listbox", text: "ListBox" }
					]
				},
				{
					id: "lists", text: "Lists",
					children: [
						{ id: "datagrid", text: "DataGrid" },
						{ id: "tree", text: "Tree" }
					]
				},
				{
					id: "layouts", text: "Layouts",
					children: [
						{ id: "panel", text: "Panel" },
						{ id: "splitter", text: "Splitter" },
						{ id: "layout", text: "Layout " }
					]
				},
				{
					id: "navigations", text: "Navigations",
					children: [
						{ id: "pager", text: "Pager" },
						{ id: "tabs", text: "Tabs" }
					]
				}
			]
			tree1.setData(data);
		</script>
	</ul>
</body>
</html>

基础介绍

miniui全局方法

这里需要注意mini.parse()这个全局对象，在js加载时候先写上这个方法，它是将标签转换为miniui控件，后面要用到miniui的属性和方法才不会报错。
mini.get(id)：根据id获取miniui控件对象

控制基类
提供宽度、高度、样式外观、显示\隐藏、启用\禁用等功能操作。

set打钩表示当前属性具有set方法，当前属性可以用set方法来设置，get同理。如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="./scripts/boot.js"></script>
</head>
<body>
	<input id="test" class="mini-textbox">
		<script>
			mini.parse();
			// 将miniui的输入框置为不可输入
			mini.get("test").setEnabled(false)
		</script>
	</ul>
</body>
</html>

Tag打钩表示这个属性可以写在html标签中。

<input id="test" class="mini-textbox" enabled="false">

MessageBox 消息框
比较常用的是打开弹窗
如下演示：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="./scripts/boot.js"></script>
</head>
<body>
	<a class="mini-button" iconCls="icon-add" onclick="add()">打开弹窗</a>
	<script>
		mini.parse();
		//打开弹窗
		function add() {
			mini.open({
				url: './002-子页面.html',        //页面地址
				title: '打开子页面',      //标题
				iconCls: '',    //标题图标
				width: 600,      //宽度
				height: 500,     //高度
				allowResize: true,       //允许尺寸调节
				allowDrag: true,         //允许拖拽位置
				showCloseButton: true,   //显示关闭按钮
				showMaxButton: true,     //显示最大化按钮
				showModal: true,         //显示遮罩
				loadOnRefresh: false,       //true每次刷新都激发onload事件
				onload: function () {       //弹出页面加载完成
					var iframe = this.getIFrameEl();
					var data = {};
					//调用弹出页面方法进行初始化
					iframe.contentWindow.SetData(data);

				},
				ondestroy: function (action) {  //弹出页面关闭前
					if (action == "ok") {       //如果点击“确定”
						var iframe = this.getIFrameEl();
						//获取选中、编辑的结果
						var data = iframe.contentWindow.GetData();
						data = mini.clone(data);    //必须。克隆数据。
					}
				}
			});
		}
	</script>
	</ul>
</body>
</html>