DaleCloud（原NFine）介绍：前端framework-UI之对话框使
⽤分享
⽬录
⽬录
前⾔
许多朋友拿着这套框架不知道该怎么⽤，特别是前端框架的⼀些UI简直⼀头雾⽔。这篇⽂章就给⼤家讲讲前端开发过程中常常⽤到的⼀些前端UI使⽤，这些前端⽅法都存放在Content/js/framework-ui.js⽂件中；下⾯我将⽤案例⼀⼀给⼤家讲讲如何在实际开发过程中使⽤；
这些内容包括：
1、对话框dialog。
2、弹出层modal。
3、数据请求submit；
⼀、对话框（alert，confirm，prompt)使⽤
1.2 alert消息提⽰框
$.modalAlert(content, type);
content Type: String
提⽰对话框上显⽰的内容
type Type: String
消息类型：success，error，warning
⽰例：
$.modalAlert("删除成功","success");
1.2 confirm确认对话框
$.modalConfirm = function (content, callBack)
content Type: String
提⽰对话框上显⽰的内容
callBack Type: function
回调⽅法：返回function (state){……}  ；state值：true,false
⽰例：
$.modalConfirm("确定要执⾏删除吗？",
function (state) {
if (state == true) {
//……
}
}
);
1.3 prompt输⼊对话框
$.modalPrompt = function (type, title, callBack)
type Type: int
输⼊框类型：0  普通输⼊框，1 密码输⼊框，2 textarea⽂本框
title Type: String 对话框标题
callBack Type: function
回调⽅法：function (state,value){……} ；state：始终为true，value 为输⼊框返回内容；
⽰例：
$.modalPrompt(2,"请输⼊评论内容",
function (state,value) {
if (state == true) {
alert(vaue)
}
}
);
1.4 message消息框
$.modalMsg = function (content, type)
content Type: String
提⽰对话框上显⽰的内容
type Type: String
消息类型：success，error，warning
⽰例：
$.modalMsg("后台没有权限", "warning");
⼆、弹出层Model使⽤⽅法
2.1 打开弹出层
$.modalOpen = function (options)：option参数说明如下：
id Type: String
弹出层id，id很重要，在涉及多层弹出层⽅法之间调⽤的时候会涉及到
title Type: String 弹出层标题
width Type: String
宽度：100px；
height Type: String
⾼度：100px；
url Type: String
宽度：弹出层页⾯地址；
shade Type: Int
阴影效果：0~1之间；
btn Type: String数组
底部按钮名称：['确认', '关闭']；点击确认后会如果有回调⽅法会执⾏callBack内的⽅法；注意：当为null时，弹出层底部将⽆btn按钮。
btnclass Type: String数组
底部按钮样式：['btn btn-primary', 'btn btn-danger']；当btn为null时样式⽆效
callBack Type: function
回调⽅法：function (iframeId){……} ；iframeId：当前弹出层的frame的id值，可通过top.frames[id]来调⽤当前弹出层⼦页⾯的⽅法；
⽰例：
$.modalOpen({
id: "Form",
title: "新增项⽬",
url: "/ProjectManage/ProductionTask/Form",
width: "600px",
height: "680px",
callBack: function (iframeId) {
top.frames[iframeId].submitForm();
}
});
在callBack⽅法中，我们可以调⽤弹出层⼦页⾯内的⽅法或变量值。⽐如当点击弹出层【确认】按钮时候，通过以下⽅法top.frames[iframeId].submitForm()可以调⽤弹出层⼦页⾯的submitForm()⽅法；
2.2 关闭弹出层
$.modalClose()  ；会关闭当前iframe弹出层
⽰例：
$.modalClose()
2.3 多个弹出层交互应⽤
⽰例举例：系统中的系统管理=》数据字典管理中有三个页⾯：ItemDta / Index(1数据字典⾸页），ItemsType / Index(2字典分类列表页），ItemsType / Form(3字典分类添加页⾯）；
执⾏流程：【1数据字典⾸页】中通过弹出层打开【字典分类列表页】，再在【2字典分类列表页】中
通过弹出层打开【3字典分类添加页⾯】，添加完成之后，需要刷新【2字典分类列表页】；
那么如何调⽤对应的⽅法呢：
1、第⼀个页⾯⽅法，打开第⼀个弹出层【字典分类列表页】
function btn_itemstype() {
$.modalOpen({
id: "ItemsType",// 第⼀个弹出框的id
title: "字典分类",
url: "/SystemManage/ItemsType/Index",
width: "800px",
height: "550px",
btn: null,
});
}
2、第⼀个弹出层页⾯⽅法，打开第⼆个弹出层【字典分类添加页⾯】
function btn_add() {
$.modalOpen({
id: "Form",//第⼆个弹出层的ID
title: "新增分类",
url: "/SystemManage/ItemsType/Form",
width: "450px",
height: "380px",
callBack: function (iframeId) {
top.frames[iframeId].submitForm();
}
});
}
3、第⼆个弹出层页⾯保存数据后刷新第⼀个弹出层的⽅法
function submitForm() {
if (!$('#form1').formValid()) {
return false;
}
$.submitForm({
url: "/SystemManage/ItemsType/SubmitForm?keyValue=" + keyValue,
param: $("#form1").formSerialize(),
success: function () {
top.ItemsType.$('#dg').treegrid('reload');//top.ItemsType 表⽰第⼀个弹出层对象
}
})
}
top.ItemsType.$('#dg').function(); function为第⼀个弹出层的刷新⽅法，可以替换成任意你写的⽅法；
三、后台交互Ajax操作请求
3.1 Form表单提交$.submitForm
$.submitForm= function (options)：option参数说明如下：
url Type: String
宽度：数据提交的后台地址；
param Type: 数组
附带提交的传⼊参数；[keyValue:"001",UserId:"001"]
loading Type: String
数据提交时的提⽰内容：
success Type: function
回调⽅法：function (data){……} ；data：后台返回的值
close Type: bool
是否关闭当前弹出层frame：true，false
⽰例：
function submitForm() {
if (!$('#form1').formValid()) {
return false;前端ui框架是什么意思
}
var postData = $("#form1").formSerialize();
postData["F_ItemId"] = itemId;
$.submitForm({
url: "/SystemManage/ItemsData/SubmitForm?keyValue=" + keyValue,        param: postData,
success: function () {
$.currentWindow().$('#dg').datagrid('reload');
}
})
}
3.2 普通数据提交$.submitPost
$.submitPost= function (options)：option参数说明如下：
title
Type: String

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。