jQueryMIniUI的使⽤教程⼊门
⽬录
⼀、为什么要使⽤MIniUI
1. 缩短开发时间,减少代码量,提升⽤户体验 ;
2. 快速开发web界⾯ ;
3. 丰富控件:包含表格、树、数据验证、布局导航等五⼗个以上的控件 ;
4. 超强表格:提供锁定⾏、多表头、分页排序、⾏过滤、数据汇总、单元格编辑、详细⾏、Excel导出等功能 ;
jquery学习在线教程5. 不⾜的是该UI框架不是开源的 ;
⼆、快速⼊门
1. 官⽹: ;
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>
三、项⽬常⽤控件(点击查看详情)
miniui icon
四、使⽤⽅法
1. 查在线⽰例
确定demo
拷贝code
2. 查看api⼿册
确定属性作⽤
修改属性值,绑定数据url (例:‘url="@url.Action(‘GetNodeRelationList’)"’) 3. 使⽤MIniUI控件
初始化mini.parse();
获取控件 (例: var grid = (“datagrid”); 使⽤ID获取控件)
调⽤控件⽅法 (例: grid.load(); 调⽤控件⽅法)
五、UI和数据分离
jQuery MiniUI 不关⼼服务器的处理。
它只关注:
1. url地址是什么;
2. 传递什么参数;
3. 服务器的url地址返回什么json数据;
服务器开发者可以集中精⼒,使⽤各种web开发框架。
$.ajax({
type:"post";
url:"@url.Action("Del")",
data:{id:row.id},
success:function(res){
de===0){
alert("删除成功!");
}else{
alert(res.msg)
}
grid.unmask();
}
})
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论