目录

      • 一、为什么要使用MIniUI
      • 二、快速入门
      • 三、项目常用控件(点击查看详情)
      • 四、使用方法
      • 五、UI和数据分离

一、为什么要使用MIniUI

  1. 缩短开发时间，减少代码量，提升用户体验 ；
  2. 快速开发web界面 ；
  3. 丰富控件：包含表格、树、数据验证、布局导航等五十个以上的控件 ；
  4. 超强表格：提供锁定行、多表头、分页排序、行过滤、数据汇总、单元格编辑、详细行、Excel导出等功能 ；
  5. 不足的是该UI框架不是开源的 ;

二、快速入门

  1. 官网：http://miniui ;
  2. 下载MIniUI，并引用jquery.js、miniui.js、miniui.css即可 ；
<!--jquery js-->
<script src="../jquery.js" type="text/javascript"></script>
<!--MiniUI-->
<link href="../themes/default/miniui.css" rel="stylesheet" type="text/css">
<script src="../miniui.js" type="text/javascript"></script>

三、项目常用控件(点击查看详情)

Layout (布局)
Toolbar (工具栏)
Datagrid (数据网格)
Button (按钮)
Buttonedit (按钮编辑框)
Textbox (文本框)
Combobox (下拉列表框)
Spinner (数值调节器)
Checkbox (复选框)
数据验证
Datapicker (日期选择框)
form (表单)


miniui icon

四、使用方法

  1. 查找在线示例
    确定demo
    拷贝code
  2. 查看api手册
    确定属性作用
    修改属性值，绑定数据url （例：‘url="@url.Action(‘GetNodeRelationList’)"’)
  3. 使用MIniUI控件
    初始化mini.parse();
    获取控件 (例: var grid = mini.get(“datagrid”); 使用ID获取控件)
    调用控件方法 (例: grid.load(); 调用控件方法)

点击查看 MIniUI 完整的api 文档

五、UI和数据分离

jQuery MiniUI 不关心服务器的处理。

它只关注：

  1. url地址是什么;
  2. 传递什么参数;
  3. 服务器的url地址返回什么json数据;

服务器开发者可以集中精力,使用各种web开发框架。

$.ajax({
    type:"post";
    url:"@url.Action("Del")",
    data:{id:row.id},
    success:function(res){
        if(res.code===0){
            grid.removeRow(row,true);
            alert("删除成功!");
        }else{
            alert(res.msg)
        }
        grid.unmask();
    }
})

更多推荐

jQuery MIniUI 的使用教程入门