jQuery MIniUI 的使用教程入门

以你之姓@ 2023-02-13 11:05 11阅读 0赞

### 目录 ###

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

### 一、为什么要使用MIniUI ###

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

### 二、快速入门 ###

1.  官网：[http://miniui.com][http_miniui.com] ;
2.  下载MIniUI，并引用jquery.js、miniui.js、miniui.css即可 ；

<script src="../jquery.js" type="text/javascript"></script>
    
    <link href="../themes/default/miniui.css" rel="stylesheet" type="text/css">
    <script src="../miniui.js" type="text/javascript"></script>

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

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

![数据验证][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA_size_16_color_FFFFFF_t_70]![表格控件][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA_size_16_color_FFFFFF_t_70 1]![树形控件][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA_size_16_color_FFFFFF_t_70 2]![多选输入框][20200528170616654.png]![标题面板][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA_size_16_color_FFFFFF_t_70 3]![弹出面板][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA_size_16_color_FFFFFF_t_70 4]![折叠分割器][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA_size_16_color_FFFFFF_t_70 5]![布局器][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA_size_16_color_FFFFFF_t_70 6]![表单布局期][20200528170808102.png]![分页导航器][2020052817081961.png]![导航树][20200528170842891.png]![选项卡][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA_size_16_color_FFFFFF_t_70 7]![横向菜单][20200528170906840.png]![右键菜单][20200528170917148.png]![工具栏][20200528170929480.png]![日期选择框][20200528170950824.png]![下拉选择框　：多列][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA_size_16_color_FFFFFF_t_70 8]![弹出选择框][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA_size_16_color_FFFFFF_t_70 9]![富文本编辑器][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA_size_16_color_FFFFFF_t_70 10]![图表][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA_size_16_color_FFFFFF_t_70 11]  
miniui icon  
![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 文档][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();
        }
    })

[MIniUI]: https://img-blog.csdnimg.cn/20200528134622436.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA==,size_16,color_FFFFFF,t_70
[http_miniui.com]: http://miniui.com
[Layout]: http://www.miniui.com/demo/#src=layout/layout.html
[Toolbar]: http://www.miniui.com/demo/#src=toolbar/toolbar.html
[Datagrid]: http://www.miniui.com/demo/#src=treegrid/treegrid.html
[Button]: http://www.miniui.com/demo/#src=button/button.html
[Buttonedit]: http://www.miniui.com/demo/#src=buttonedit/buttonedit.html
[Textbox]: http://www.miniui.com/demo/#src=textbox/textbox.html
[Combobox]: http://www.miniui.com/demo/#src=combobox/combobox.html
[Spinner]: http://www.miniui.com/demo/#src=spinner/spinner.html
[Checkbox]: http://www.miniui.com/demo/#src=checkbox/checkbox.html
[Link 1]: http://www.miniui.com/demo/#src=form/rules.html
[Datapicker]: http://www.miniui.com/demo/#src=datepicker/datepicker.html
[form]: http://www.miniui.com/demo/#src=form/form.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200528172918130.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200528170410888.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200528170537654.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA==,size_16,color_FFFFFF,t_70
[20200528170616654.png]: https://img-blog.csdnimg.cn/20200528170616654.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200528170634121.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/2020052817072424.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200528170742568.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200528170752832.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA==,size_16,color_FFFFFF,t_70
[20200528170808102.png]: https://img-blog.csdnimg.cn/20200528170808102.png
[2020052817081961.png]: https://img-blog.csdnimg.cn/2020052817081961.png
[20200528170842891.png]: https://img-blog.csdnimg.cn/20200528170842891.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200528170853674.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA==,size_16,color_FFFFFF,t_70
[20200528170906840.png]: https://img-blog.csdnimg.cn/20200528170906840.png
[20200528170917148.png]: https://img-blog.csdnimg.cn/20200528170917148.png
[20200528170929480.png]: https://img-blog.csdnimg.cn/20200528170929480.png
[20200528170950824.png]: https://img-blog.csdnimg.cn/20200528170950824.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200528171002651.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20200528171028295.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20200528171102658.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20200528171115673.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA==,size_16,color_FFFFFF,t_70
[miniui icon]: https://img-blog.csdnimg.cn/20200528172046465.png
[MIniUI _api]: http://www.miniui.com/docs/api/index.html