您的位置:首页 > 产品设计 > UI/UE

Easyui-交互式消息弹出框

2016-08-17 19:38 471 查看
    由于项目在优化的时候需要用到弹出框,按自己的想法是傻傻的用一些alert直接弹出得了,但是这样用户体验度不是特别好,影响界面美观,所以自己还是用了封装好的easyui给的消息框,怎么用呢,这个里面很有文章。

    我用的是那种弹出框有确定、取消功能的消息提示框,所以重点说一下这个的用法。

需求:需要对一个事件进行判断是否往下进行?

做法:

引用easyui封装部分:
 

<script src="../../Scripts/jquery-1.7.1.min.js"></script>
<script src="../../Scripts/jquery-1.7.1.js"></script>
<script src="../../EasyuiSource/jquery.easyui.min.js"></script>
<link href="../../Content/base-master/src/base.css" rel="stylesheet" />
<link href="../../Content/iconfont-master/index.css" rel="stylesheet" />
<link href="../../Content/jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" />
<link href="../../Content/jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" />


Html部分:
 

<a href="#" class="easyui-linkbutton" id="up1" data-options="iconCls:'icon-redo'" type="text/html" onclick="Next()" style="margin-left: 750px;">完成</a>


JavaScript部分:
 

function Next() {
$.messager.confirm('温馨提示', '完成后信息无法修改,确定完成吗?', function (r) {
if (r)//选择确定或者OK
{
$.ajax({
type: "POST",
url: "/FreshNewReport/UpdateBasicStudentinfo",
success: function (data) {
if (data == "True") {
window.location.href = "../FreshNewReport/SuccessReport";
}
else {
$.messager.alert('警告','信息入库失败,请联系管理员','info')
}
}
});
}
})
}


效果:
 


上面的点击按钮为英文的,如果想变为中文的,修改JavaScript部分即可,如下:

function Next() {
$.extend($.messager.defaults, {
ok: "确定",
cancel: "取消"
});
$.messager.confirm('温馨提示', '完成后信息无法修改,确定完成吗?', function (r) {
if (r)//选择确定或者OK
{
$.ajax({
type: "POST",
url: "/FreshNewReport/UpdateBasicStudentinfo",
success: function (data) {
if (data == "True") {
window.location.href = "../FreshNewReport/SuccessReport";
}
else {
$.messager.alert('警告','信息入库失败,请联系管理员','info')
}
}
});
}
})
}

想要了解更多的关于提示框的点击:快来瞧瞧

感谢您的宝贵时间···

 
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: