Note for Ducumentation of jQuery MiniUI

Posted on Edited on In Disqus:

那本厚厚的JavaScript高级程序设计还没看完，先开动jQuery。早就听说jQuery的强大，这个jQuery MiniUI是基于它的，强于处理表格数据，提供了方便的API，可以研究一波。

概述

MiniUI

在MiniUI官网下载对应版本的MiniUI。不过其实开发前端只用到里面的几个js文件和miniui文件夹而已。对于我下载的这个mini_java版本而言，就是WebContent\scripts中的miniui文件夹、boot.js、jquery-1.6.2.min.js、tongji.js。这里的tongji其实是个空文件，暂时不知用途。

其他开发环境配置

除了前端的MiniUI，事实上这边还需要用Java的maven来构建ssh框架。为此安装了jdk-6u20-windows-i86, mysql-5.0.22-win32, Eclipse Java EE Indigo。暂时还没有学这些。

表格(CRUD)

CRUD增查改删

C-create, R-retrieve, U-update, D-delete，对应到数据库中最常用的四个操作“增查改删”。在MiniUI中，主要是以表格的形式呈现数据的，MiniUI提供了对这些数据的可视化CRUD操作。在MiniUI文档中，主要介绍了4种方式来update数据。

单元格编辑

直接在数据列表中，点击每个单元格直接进行修改，不需要二级界面。在MiniUI中为div添加class="mini-datagrid"属性即可使用内置的数据表格样式。而设置单元格点击编辑其实十分简单，首先为mini-datagrid的div添加allowCellEdit="true"和allowCellSelect="true"，然后在对应的div列的单元格添加input标签并添加property="editor"属性。具体如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="datagrid" class="mini-datagrid" allowCellEdit="true" allowCellSelect="true" multiSelect="true" allowResize="true" pageSize="20" url="../data/AjaxService.aspx?method=SearchEmployees"
>
  <div property="columns">
    <div type="checkcolumn"></div>
    <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号
      <input property="editor" class="mini-textbox" style="width:100%;"/>
      <!--此外class还有mini-combobox, mini-spinner, mini-datepicker, mini-textarea等选择，对应不同的输入内容-->
    </div>
    <div field="gender" width="100" headerAlign="center" align="center">性别
      <input property="editor" class="mini-combobox" data="Genders" />
    </div>
    <div field="age" allowSort="true">年龄
      <input property="editor" class="mini-spinner" minValue="0" maxValue="200" value="25" />
    </div>
    ......
  </div>
</div>

在demo中顶部有三个按钮控制数据操作，对应的JavaScript也需要在前端进行处理，不过有现成的grid的API方法可以直接调用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// 增加行
function addRow() {
	var newRow = {
		name: "New Row"
	}
	grid.addRow(newRow, 0);  //addRow ( row, index )
}

// 删除行
function removeRow() {	// 不需要传入参数，只需要在后面调用API获得勾选项目即可
	var rows = grid.getSelecteds();
	if (rows.length > 0) {
		grid.removeRows(rows, true); 
		// removeRows ( rows, autoSelect )，表示是否自动勾选下一项
	}
}

// 保存
function saveData() {
	var data = grid.getChanges();
	var json = mini.encode(data);
	grid.loading("这是弹窗显示的内容...");
	$.ajax({
		url: "../data/AjaxService.aspx?method=SaveChangedEmployees",
		data: {data: json},
		type: "post",
		success: function(text) {
			grid.reload();
		},
		error: function(jqXHR, textStatus, errorThrown) {
			alert(jqXHR.responseText);
		}
	});
}

注意上面的post方法就是指明了要修改服务端的数据。在前面用到的SaveChangedEmployees方法如下，不过我暂时不太明白这个看着像是Java的程序怎么在aspx文件中工作。其中用到的TestDB是Java定义的一个类。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
public void SaveChangedEmployees() {
	String json = Request["data"];
	ArrayList rows = (ArrayList)PluSoft.Utils.JSON.Decode(json);
	
	foreach(Hashtable row in rows) {
		String state = row["_state"] == null? "": row["_state"].toString();
		if  (state == "added") {
			row["createTime"] = DateTime.Now;
			new TestDB().InsertEmployee(row);
		} else if (state == "removed" || state == "deleted") {
			String id = row["id"].ToString();
			new TestDB().DeleteEmployee(id);
		} else if (state == "modified") {
            new TestDB().UpdateEmployee(row);
        }
	}
}

行编辑

在每一行的最前面有三个控制按钮，New, Edit, Delete.增和删与前面一个例子相同，而改则不是通过点击各个单元格修改，而是点击Edit后整行都变为可编辑的input输入框（需设置property="editor"）。行编辑器html定义如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="datagrid1" class="mini-datagrid" 
    url="../data/DataService.aspx?method=SearchEmployees" 
>
    <div property="columns">
        <div name="action" width="120" headerAlign="center" align="center" renderer="onActionRenderer" cellStyle="padding:0;">#</div>
        <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号
            <input property="editor" class="mini-textbox" />
        </div>                
        <div field="gender" width="100" allowSort="true" renderer="onGenderRenderer" align="center" headerAlign="center">性别
            <input property="editor" class="mini-combobox" style="width:100%;" data="[{id:1, text:'男'}, {id:2, text: '女'}]"/>                
        </div>            
        <div field="age" width="100" allowSort="true">年龄
            <input property="editor" class="mini-spinner" minValue="0" maxValue="200" value="25" style="width:100%;"/>
        </div>
        <div field="birthday" width="100" allowSort="true" dateFormat="yyyy-MM-dd">出生日期
            <input property="editor" class="mini-datepicker" style="width:100%;"/>
        </div>                                    
        <div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>                
    </div>
</div>

而开始编辑的JavaScript代码也是用到grid对象的API方法，非常方便:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 触发编辑
grid.beginEditRow(row);	// row通过grid.getSelected()获得

// 取消编辑
grid.cancelEdit();

// 提交数据
var rowData = grid.getEditRowData(row);
grid.loading("保存中，请稍后......");
var json = mini.encode([rowData]);
$.ajax({
    url: "../data/DataService.aspx?method=SaveEmployees",
    data: { employees: json },
    success: function (text) {
        grid.reload();
    },
    error: function (jqXHR, textStatus, errorThrown) {
        alert(jqXHR.responseText);
    }
});

表单提交/弹出面板提交

反正基本套路就是这样，CRUD还有两种内置提供方式可以编辑数据。
表单编辑的html是使用一个隐藏的table表格作为编辑面板，然后利用grid的方法获取原数据，生成表单并嵌入原详细行下方。

1
2
3
4
5
6
grid.hideAllRowDetail();
gird.showRowDetail(row);

var td = grid.getRowDetailCellEl(row); // 获取DOM对象
td.appendChild(editForm);
editForm.style.display="";	// 取消隐藏

需要将原行的数据加载到的动态插入的表单中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var form = new mini.Form("editForm1");
if (grid.isNewRow(row)) {                    
    form.reset();
} else {
    form.loading();
    $.ajax({
        url: "../data/DataService.aspx?method=GetEmployee&id=" + row.id,
        success: function (text) {
            var o = mini.decode(text);
            form.setData(o);                            

            form.unmask();
        }
    });
}

弹出窗口的html是用class=”mini-window”的div作为弹出面板来编辑，这就不涉及嵌入原数据行下方的操作了，直接获取原数据填入面板即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 加载面板数据
var editWindow = mini.get("editWindow");	// get的是id
editWindow.show();
var form = new mini.Form("#editform");
form.loading();
$.ajax({
    url: "../data/DataService.aspx?method=GetEmployee&id=" + row.id,
    success: function (text) {
        var o = mini.decode(text);
        form.setData(o);
        form.unmask();
    },
    error: function () {
        alert("表单加载错误");
    }
});

这两个方法实际上都用到了form表单，所以提交数据可用mini内置对form的处理:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 提交数据
var form = new mini.Form("#editform");
var o = form.getData();

grid.loading("some message...");
var json = mini.encode([0]);
$.ajax({
    url: "../data/DataService.aspx?method=SaveEmployees",
    data: { employees: json },
    success: function (text) {
                    
        grid.reload();
    },
    error: function (jqXHR, textStatus, errorThrown) {
        alert(jqXHR.responseText);
    }
});

editWindow.hide();

表单控件

数据绑定

前面CRUD中的update时，要想让更新后的数据实时反映在原数据中（不是真的保存到数据库，只是修改显示的数据），就可以使用databinding将表单/控件的数据与原表格绑定。

1
2
3
4
5
6
7
8
9
10
// API
// 绑定表单：bindForm(formnamestr, grid)
// 绑定控件：bindField(controlname, grid, fieldnamestr)

//绑定表单
var db = new mini.DataBinding();
db.bindForm("editForm1", grid);

//绑定控件
db.bindField(textbox, grid, "username");

表单

  • 创建表单: 只要你在html中为div设置好了id，就可以利用这个id创建JavaScript中的表单对象。
    var form = new mini.Form("#form1");
  • 加载表单: 使用到了jQuery的$.ajax方法。$.ajax(option)是jQuery最底层的Ajax实现。所谓最底层是相对于$.load(), $.get(), $.post(), $.getJSON(), $.getScript()这些方法来说的，用$.ajax可以实现所有方法，较为全能。该方法只有一个对象参数，这个对象包含了$.ajax()方法所需的请求设置和回调函数等信息，以键:值的形式给出url(发送请求过去的地址)、type(GET或POST)、data（要传送的键值对形式数据）、success（请求成功后的回调函数）等等参数。下面这里虽然用到的是POST，不过其实是抓数据的，所以没有要上传的data。
1
2
3
4
5
6
7
8
$.ajax({
    url: "../data/FormService.aspx?method=LoadData",
    type: "post",
    success: function (text) {
        var data = mini.decode(text);   //反序列化成对象
        form.setData(data);             //设置多个控件数据
    }
});
  • 提交表单: 必然用到POST，与上面例子相比就需要data来上传了。
1
2
3
4
5
6
7
8
9
10
11
12
//提交表单数据
var form = new mini.Form("#form1");            
var data = form.getData();      //获取表单多个控件的数据
var json = mini.encode(data);   //序列化成JSON
$.ajax({
    url: "../data/FormService.aspx?method=SaveData",
    type: "post",
    data: { submitData: json },
    success: function (text) {
        alert("提交成功，返回结果:" + text);
    }
});
  • 清除表单: form.clear();
  • 重置表单: form.reset();
  • 表单验证: 在input控件中加入onvalidation="onUserNameValidation"属性，然后手动编写验证函数绑定过去。当然也可以使用mini-textbox内置的vtype="email"属性来验证，包括了email、url、int、float、maxLength、minLength、rangeLength、rangeChar、range、date等规则。这些都只是基于控件的验证，随后提交表单时还可以进行一波验证。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 绑定validation事件
function onUserNameValidation(e) {
    if (e.isValid) {
        if (isEmail(e.value) == false) {
             e.errorText = "必须为合法的邮箱地址";
             e.isValid = false;
        }
    }
}

// 验证表单
var form = new mini.Form("#form1");
form.validate();
if (!form.isValid()) {
    alert("表单验证失败！");
}

弹出选择表格

使用mini.open弹出子页面，这里就用于弹出带有选择按钮的表格，该子页面存放在url指向的html中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
mini.open({
    url: bootPATH + "../demo/CommonLibs/SelectGridWindow.html",           
    title: "选择列表",
    width: 650,
    height: 380,
    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);    //必须拷贝数据(why???)

            btnEdit.setValue(data.id);
            btnEdit.setText(data.name);
        }
    }
});

小部件

这一部分包含了很多控件，多数都是细节，直接查看样例就好了，就不做笔记了。

树形控件

创建树

实际上都是使用ul实现的，为ul添加class="mini-tree"属性就可以使用内置的树形控件了。而根据数据树中显示的数据来源，又分为以下四种实现方式。

  • 树形结构: 首先是建立ul控件并添加class="mini-tree"。设置url指明树显示的内容来源，拿到的数据就是树形结构的数据。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<ul id="tree1" class="mini-tree" url="../data/tree.txt" showTreeIcon="true" 
textField="text" idField="id">
</ul>

抓回来txt中的树形结构大致如下
[
    {id: "base", text: "Base", expanded: false,
     children: [
        {id: "ajax", text: "Ajax"},
        {id: "json", text: "JSON"},
        {id: "date", text: "Date"},
        {id: "control", text: "Control"},
        {id: "messagebox", text: "MessageBox"},
        {id: "window", text: "Window"}
     ]
        
    },

    more nodes...
]
  • 列表结构: 与上面的树形结构的区别在于数据来源的格式以及ul部分属性的微调。注意下方的拿回的txt数据格式以及ul中到底parentField、resultAsTree属性。id与pid是父子关系，拥有pid的元素是子，对应的id是父元素。
1
2
3
4
5
6
7
8
9
10
11
12
<ul id="tree2" class="mini-tree" url="../data/listTree.txt" 
    showTreeIcon="true" textField="text" idField="id" parentField="pid" resultAsTree="false"  
    >
</ul>

抓回来txt中的列表结构大致如下，比前面的树形结构更直观好懂一些
[
    {id: "base", text: "Base", expanded: false},    
    {id: "ajax", text: "Ajax", pid: "base"},
    {id: "json", text: "JSON", pid: "base"},
    ......
]
  • 本地JSON: 不需要设置url拿数据，而是通过JavaScript以JSON的格式设置树中要显示的数据，这个格式与树形结构的txt是一样的，区别只在于不是url中txt定死的，而是JavaScript来加载。
1
2
3
<ul id="tree3" class="mini-tree" style="width:300px;padding:5px;" 
    showTreeIcon="true" textField="text" idField="id" >        
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var tree3 = mini.get("tree3");
tree3.loadData([
    { id: "lists", text: "Lists", expanded: false,
        children: [
            { id: "datagrid", text: "DataGrid" },
            { id: "tree", text: "Tree" },
            { id: "treegrid", text: "TreeGrid " }
        ]
    },
    { id: "layouts", text: "Layouts", expanded: false,
        children: [
            { id: "panel", text: "Panel" },
            { id: "splitter", text: "Splitter" },
            { id: "layout", text: "Layout " }
        ]
    }

]);
  • HTML创建: 这个方法是最原始最直接的想法，用HTML标签把树拼出来。但从下面可以看出来，这个方式就像是普通的无序列表的HTML了，不够简洁。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<ul id="tree4" class="mini-tree" style="width:200px;padding:5px;" showTreeIcon="true">
    <li>
        <span>MiniUI</span>
        <ul>
            <li>
                <span expanded="false">Form</span>
                <ul>                           
                    <li>ComboBox</li>
                    <li>DatePicker</li>
                    <li>Spinner</li>
                    <li>TreeSelect</li>
                </ul>
            </li>
            <li>
                <span expanded="false">Lists</span>
                <ul>
                    <li><a href="../datagrid/datagrid.html" target="_blank" style="color:Blue;text-decoration:underline;">DataGrid</a></li>
                    <li>Tree</li>
                </ul>
            </li>    
            <li>
                <span expanded="false">Layouts</span>
                <ul>
                    <li>Panel</li>
                    <li>Splitter</li>
                    <li>Layout</li>
                </ul>
            </li>         
            <li>
                <span expanded="false">Navigations</span>
                <ul>
                    <li>Tabs</li>
                    <li>NavBar</li>
                    <li>Menu</li>
                    <li>Pager</li>                            
                </ul>
            </li>             
        </ul>
    </li>                       
</ul>

树的懒加载

只有当用户点击了展开才会加载当前树节点的子孙。点击”+”图标时，当前节点的id就会传到后台，不过可以在前台利用onbeforeload在传递之前做一些额外操作再交给后台去加载子孙。服务端则根据Request获取的节点id来搜索数据库取出子节点

1
2
3
<ul id="tree1" class="mini-tree" url="../data/TreeService.aspx?method=LoadNodes" style="width:300px;height:200px;padding:5px;" 
    showTreeIcon="true" textField="name" idField="id" onbeforeload="onBeforeTreeLoad" >
</ul>
1
2
3
4
5
6
7
8
9
// 在加载节点之前，在前端执行的操作
function onBeforeTreeLoad(e) {
    var tree = e.sender;    //树控件
    var node = e.node;      //当前节点
    var params = e.params;  //参数对象

    //可以传递自定义的属性
    params.myField = "123"; //后台就可以用request对象获取"myField"字段了
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 服务端程序，根据节点id拿子节点
String id = Request["id"];
if (String.IsNullOrEmpty(id)) id = "-1";

//获取下一级节点
String sql = "select * from plus_file where pid = '" + id + "' order by updatedate";
ArrayList folders = DBUtil.Select(sql);

//判断节点，是否有子节点。如果有，则处理isLeaf和expanded。
for (int i = 0, l = folders.Count; i < l; i++)
{
    Hashtable node = (Hashtable)folders[i];
    String nodeId = node["id"].ToString();

    String sql2 = "select * from plus_file where pid = '" + nodeId + "' order by updatedate";
    ArrayList nodes = DBUtil.Select(sql2);

    if (nodes.Count > 0)
    {
        node["isLeaf"] = false;
        node["expanded"] = false;
    }

}

//返回JSON
String json = PluSoft.Utils.JSON.Encode(folders);
Response.Write(json);

树的操作

提供了增删改移的内置操作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 增加节点
var tree = mini.get("tree1");
var node = tree.getSelectedNode();
var newNode = {};
//addNode ( node, index, parentNode )
tree.addNode(newNode, "before", node);

// 删除节点
var node = tree.getSelectedNode();
tree.removeNode(node);

// 编辑节点
var node = tree.getSelectedNode();            
tree.beginEdit(node);  

// 移动节点
tree.moveNode(node, targetNode, "before");

为树创建右键菜单

除了利用工具栏按钮的形式操作树的节点，还可以直接在节点上右键弹出菜单进行操作，称之为ContextMenu。ContextMenu的HTML其实就是ul+li的列表，然后要想让右键点击树能够弹出这个ContextMenu，则需要为树的HTML标签添加contextMenu属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<ul id="treeMenu" class="mini-contextmenu" onbeforeopen="onBeforeOpen">
    <li iconCls="icon-move" onclick="onMoveNode">移动节点</li>
    <li class="separator"></li>
    <li>
        <span iconCls="icon-add">新增节点</span>
        <ul>
            <li onclick="onAddBefore">插入节点前</li>                
            <li onclick="onAddAfter">插入节点后</li>    
            <li onclick="onAddNode">插入子节点</li>                 
        </ul>
    </li>
    <li name="edit" iconCls="icon-edit" onclick="onEditNode">编辑节点</li>
    <li name="remove" iconCls="icon-remove" onclick="onRemoveNode">删除节点</li>
</ul>

而对于树而言只需要把contextMenu属性赋上这个contextMenu的id值即可完成绑定。
<ul id="tree1" class="mini-tree" url="../data/tree.txt" style="width:200px;padding:5px;" 
    showTreeIcon="true" textField="text" idField="id" 
    contextMenu="#treeMenu"
    >        
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
在contextMenu中的onbeforeopen属性绑定的函数是：
function onBeforeOpen(e) {
    var menu = e.sender;
    var tree = mini.get("tree1");

    var node = tree.getSelectedNode();
    if (!node) {
        e.cancel = true;
    }

    // 若点击的是Base，不弹出
    if (node && node.text == "Base") {  
        e.cancel = true;
        //阻止浏览器默认右键菜单
        e.htmlEvent.preventDefault();
        return;
    }

    var editItem = mini.getbyName("edit", menu);
    var removeItem = mini.getbyName("remove", menu);
    editItem.show();
    removeItem.enable();    // 防止之前的禁用效果无法恢复

    if (node.id == "forms") {
        editItem.hide();    // 隐藏编辑选项
    }
    if (node.id == "lists") {
        removeItem.disable();// 禁用删除选项
    }
}

导航

MiniUI提供了很多内置方式实现页面切换，如toolbar、菜单、ContextMenu、Tabs选项卡、OutlookBar折叠面板、OutlookMenu折叠菜单、OutlookTree折叠树、Pager分页。

Toolbar工具栏

其实就是div+a的组合，只不过对应地加上MiniUI的class就可以用内置的CSS显示为导航栏。

1
2
3
4
5
6
7
8
9
10
11
12
<div class="mini-toolbar">
    <a class="mini-button" iconCls="icon-add">增加</a>
    <a class="mini-button" iconCls="icon-edit">修改</a>
    <a class="mini-button" iconCls="icon-remove">删除</a>
    <span class="separator"></span>
    <a class="mini-button" plain="true">增加</a>
    <a class="mini-button" plain="true">修改</a>
    <a class="mini-button" plain="true">删除</a>
    <span class="separator"></span>
    <input class="mini-textbox" />   
    <a class="mini-button" plain="true">查询</a>
</div>

要复杂点的话可以加入table表格控制内部小按钮靠左靠右(例如用width: 100%)。

菜单

类似于Windows顶部的菜单栏，直接用ul结合url定出菜单中的内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<ul id="menu1" class="mini-menubar" style="width:100%;" 
    url="../data/listMenu.txt" idField="id" parentField="pid">
</ul>
其中txt文件的格式和之前建树的类似，利用id和pid确定父子关系。既然和建树类似，那必然就有类似的[原始HTML构建菜单方式](http://www.miniui.com/docs/tutorial/menu_html.html)。
[
    { id: "1", text: "文件(F)"},        
    '-',
    { id: "2", text: "新建", iconCls: "icon-new", pid: "1"},    
    { id: "3", text: "文件", pid: "2"},
    { id: "4", text: "文件夹", pid: "2"},        
    { id: "5", text: "打开", iconCls: "icon-folderopen", pid: "1"},
    { id: "6", text: "保存", pid: "1"},
    { id: "7", text: "关闭", pid: "1"},
        
    { id: "8", text: "编辑(E)"},
    { id: "9", text: "剪切", iconCls: "icon-cut", pid: "8"},
    { id: "10", text: "复制", pid: "8"},
    { id: "11", text: "粘贴", pid: "8"},
        
    { id: "12", text: "查看(V)"},
    { id: "13", text: "帮助(H)", iconCls: "icon-help"}
]

ContextMenu

这是右键点击，根据上下文弹出的菜单。前面已经提到了在树的节点上可以实现右键弹出菜单，只需要把contextMenu的id绑定到对应的树就可以了。而这里构建菜单也是类似的，先用ul+li把菜单建起来，然后用JavaScript把菜单绑定到右键点击事件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ul id="contextMenu" class="mini-contextmenu" >
    <li>
        <span >操作</span>
        <ul>
            <li iconCls="icon-new" onclick="onItemClick">新建</li>
            <li class="separator"></li>
            <li iconCls="icon-add" onclick="onItemClick">增加</li>    
            <li iconCls="icon-edit" onclick="onItemClick">修改</li>
            <li iconCls="icon-remove" onclick="onItemClick">删除</li>                      
        </ul>
    </li>
    <li class="separator"></li>
    <li iconCls="icon-open" >打开</li>
    <li iconCls="icon-remove" >关闭</li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
function onItemClick(e) {   // 点击某项后的操作
    var item = e.sender;
    alert(item.getText());     
}

window.onload = function () {   // 将contextMenu绑定到指定元素
    $("#region1").bind("contextmenu", function (e) {
        var menu = mini.get("contextMenu");
        menu.showAtPos(e.pageX, e.pageY);
        return false;
    });
}

Tabs选项卡

使用div，然后加入class="mini-tabs"属性即可。每个tabs里面可以是静态1的div定义，也可以使用外部txt来懒加载。每个tab都有很多内置属性可以使用。

1
2
3
4
5
6
7
8
9
10
11
12
<div id="tabs1" class="mini-tabs" activeIndex="0" style="width:350px;height:200px;"
     url="../data/tabs.txt">
</div>

txt中保存的格式，每个子页面的内容都由新的url定义。
[
    {title: "Tab1", url: "../tabs/pages/page1.html", refreshOnClick: true},
    {title: "Tab2", url: "../tabs/pages/page2.html", showCloseButton: true},
    {title: "Tab3", url: "../tabs/pages/page3.html"},
    {title: "Tab4", url: "../tabs/pages/page4.html"},
    {title: "Tab5", url: "../tabs/pages/page5.html"}
]

Outlook面板系列

  • OutlookBar折叠面板: 为div加入class="mini-outlookbar属性即可。面板内部的内容直接通过子div提供。
  • OutlookMenu折叠菜单: 为div加入class="mini-outlookmenu属性，然后提供url导入菜单中要显示的内容即可。
  • OutlookTree折叠树: 为div加入class="mini-outlooktree属性，然后提供url导入树中要显示的内容即可。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!--折叠面板，直接提供内部div的内容-->
<div id="outlookbar1" class="mini-outlookbar " activeIndex="0" style="width:180px;height:250px;" autoCollapse="true">
    <div title="权限管理">            
        1
    </div>
    <div title="用户管理">
        2
    </div>
</div>

<!--折叠面板中的菜单-->
<div class="mini-outlookmenu" url="../data/outlookmenu.txt" onitemselect="onItemSelect"
    idField="id" parentField="pid" textField="text"
>
</div>
其中url提供的内容格式和前面通过外部文件定义菜单的方式类似
[
    { id: "user", text: "用户管理"},
    { id: "addUser", pid: "user", text: "增加用户", iconCls: "icon-add", url: "../navbartree/navbartree.html" },
    { id: "editUser", pid: "user", text: "修改用户", iconCls: "icon-edit", url: "../buttonedit/openwindow.html" },
    { id: "removeUser", pid: "user", text: "删除用户", iconCls: "icon-remove", url: "../datagrid/datagrid.html" },
        
    { id: "right", text: "权限管理"},
    { id: "addRight", pid: "right", text: "查询权限", iconCls: "Note", url: "../navbartree/navbartree.html", iconPosition: "top" },
    { id: "editRight", pid: "right", text: "操作权限", iconCls: "Reports", url: "../buttonedit/openwindow.html", iconPosition: "top" }        
]

<!--折叠面板中的树-->
<div id="leftTree" class="mini-outlooktree" url="../data/outlooktree.txt" onnodeselect="onNodeSelect"
    textField="text" idField="id" parentField="pid"
>
</div>
其中url提供的树的txt内容格式与前面提过的类似，通过id和pid确定父子关系。
[
    {id: "user", text: "用户管理"},
        
        {id: "lists", text: "Lists", pid: "user" },
            
            {id: "datagrid", text: "DataGrid", pid: "lists"},            
            {id: "tree", text: "Tree" , pid: "lists"},
            {id: "treegrid", text: "TreeGrid " , pid: "lists"},
        
        {id: "layouts", text: "Layouts", expanded: false, pid: "user"},
        
            {id: "panel", text: "Panel", pid: "layouts"},
            {id: "splitter", text: "Splitter", pid: "layouts"},  
]

Pager分页

为div加入class="mini-pager"属性即可。可以为onpagechanged属性提供JavaScript函数进行额外处理。

1
2
3
4
5
<div class="mini-pager" style="width:600px;background:#ccc;" 
    totalCount="123" onpagechanged="onPageChanged" sizeList="[5,10,20,100]"
    showTotalCount="true"
    >        
</div>

这篇博客其实可能以后都不会怎么看了，因为人家官网写得也足够详细了，直接参考官方文档就行了。而且大多都是一些控件什么的，用一用就会了，用不着写个博客总结什么思想，弃坑啦。