Easyui-交互式消息弹出框
由于项目在优化的时候需要用到弹出框,按自己的想法是傻傻的用一些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')
}
}
});
}
})
}
想要了解更多的关于提示框的点击:快来瞧瞧
感谢您的宝贵时间···
Easyui-交互式消息弹出框的更多相关文章
- 移动web:Tips消息弹出框
在web开发中经常会用到像alert这样的弹出消息,每个浏览器自带的消息弹出框都不相同.为了统一外观,实现自定义的功能,动手写一个弹出框插件. 对弹出框的实现要求如下: 1. 仿照IOS系统弹出外观 ...
- MessageBox页面消息弹出框类
MessageBox页面消息弹出框类: public class MessageBox { /// <summary> /// 自定义弹出窗口内容,不跳转 /// </summary ...
- WPF实战之一 桌面消息框(右下角消息弹出框)
此版本是根据别人的项目改造的,记录下笔记 原文:https://blog.csdn.net/catshitone/article/details/75089069 一.即时弹出 1.创建弹出框 新建一 ...
- Js:消息弹出框、获取时间区间、时间格式、easyui datebox 自定义校验、表单数据转化json、控制两个日期不能只填一个
(function ($) { $.messageBox = function (message) { $.messager.show({ title:'消息框提示', msg:message, sh ...
- windows phone 8.1开发:(消息弹出框)强大的ContentDialog
原文出自:http://www.bcmeng.com/contentdialog/ 在应用开发中我们必不可少的会使用到消息框,windows phone8中的messagebox在windows ph ...
- Android----消息弹出框
关于Android的知识,自从工作了就没有什么时间去总结学习过的知识,我个人比较喜欢学习后总结,今天就写一下关于android中消息弹出框的几种方式的简单示例,按照自己的思路写了一段,希望对和我一样在 ...
- Windows Phone 几种弹出框提示方式
首先,我们需要在网络上下载一个Coding4Fun 然后,引用 using Coding4Fun.Phone.Controls.Toolkit; using Codin ...
- js简单显示和隐藏div,触发超链接,动态更改button值,setInterval()简单使用,jquery easyui弹出框简单使用 .
js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...
- 玩转EasyUi弹出框
这两天在搞EasyUi的弹出框,弹出框之前也搞过很多个版本,总是觉得不那么完美,刚好最近有时间,就往多处想了想,功能基本上达到我的预期,并且在开发过程中遇到很多小技巧,特撰文如下. 走起:在EasyU ...
随机推荐
- Python:内置split()方法
描述 Python split()通过指定分隔符对字符串进行切片,如果参数num 有指定值,则仅分隔 num 个子字符串 语法 split()方法语法: str.split(str="&qu ...
- java中如何将OutputStream转换为InputStream
在不需要文件生成的情况下,直接将输出流转换成输入流.可使用下面的三种方法: 如果你曾经使用java IO编程,你会很快碰到这种情况,某个类在OutputStream上创建数据而你需要将它发送给某个需要 ...
- 数据库:ubantu下MySQL安装指南
http://wiki.ubuntu.org.cn/MySQL%E5%AE%89%E8%A3%85%E6%8C%87%E5%8D%97 安装MySQL sudo apt-get install mys ...
- scrapy-redis源码抛析
#scrapy-redis--->queue.py-->class FifoQueue 队列 LifoQueue(lastinfirstout栈) #self.server父类Base中链 ...
- 10-16C#for...循环语句(2)
for....循环语句 格式:for(初始条件:循环条件:状态改变) { 循环体: } 一.课前作业:打印等腰直角三角形 第一种方法:是运用一开始学习的从上往下执行控制台程序,用一个for循环语句执行 ...
- 具有避障和寻线功能的Arduino小车
标签: Arduino 乐高 机器人 创客对于成年人来说,多半是科技娱乐,或者是一种是一种向往科技的人生态度,总是希望自己不仅可以看到或者听到科技的资讯,还希望能够亲身制作科技玩意,从而更好地体 ...
- SpringMVC + AJAX 实现多文件异步上传
转自:https://www.jianshu.com/p/f3987f0f471f 今天,我就这个问题来写一篇如何用 SpringMVC + AJAX 实现的多文件异步上传功能.基本的代码还是沿用上篇 ...
- elastic(8)版本控制
转自: http://www.cnblogs.com/AK47Sonic/p/7563393.html elasticsearch 版本控制: 内部版本控制 外部版本控制 内部版本控制: 内部版本会检 ...
- 将openfire部署到CentOS云服务器上
http://ishere.cn/2014/07/25/centos-64bit-openfire.html CentOS 64位安装openfire http://www.cnblogs. ...
- Spring装配各种类型bean
一.单属性值的装配 //setter注入,提供无参构造器,提供setXX方法 <property name="" value=""></pro ...