目录
- 下载安装
- 基础介绍
下载安装
- 去官网地址: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>
文章转载自:
原文所在
更多推荐
MiniUI/jQuery MIniUI使用教程(一)
发布评论