easyUI插件：借助easyUI插件封装的提示框，开发多输入框的消息窗口
程序员文章站
2024-01-27 12:00:46
...
最近接有个项目，页面基于easyUI开发，需要扩展一个两个输入框的弹窗；做一次信息采集。样式当然与原有提示框相同。但是easyUI封装的提示框框有限（没有双输入框的）；所以这里我自己借助easyUI原有的样式自己写了一个双输入框代码；作为自己保存和分享。
（传统的弹窗这里不做赘述，可以参考链接）jQueryEasyUI Messager基本使用
ps：我也是萌新，代码可能都点low大佬见谅，我做的笔记，比我更萌更新的可以瞅瞅。
1、直接上代码（这个代码是我自己测试的，直接复制到一个一面就能查看效果）
2、需要按照自己存储位置，修改应用link与script的路径，路径没问题应该用能应用呢
jsp代码：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="/EstateBusiness/lib/common/jquery-easyui-1.4.2/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/EstateBusiness/lib/common/jquery-easyui-1.4.2/themes/icon.css">
<script type="text/javascript" src="/EstateBusiness/lib/common/jquery/jquery-core/jquery-2.1.1/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/EstateBusiness/lib/common/jquery-easyui-1.4.2/jquery.easyui.min.js"></script>
</head>
<body>
<!-- 点击按钮弹出登录弹窗 -->
<div>
<input type="button" id="button" value="双输入口弹窗" onclick="view();">
</div>
<!-- 登录窗口代码 -->
<div id="n1" class="panel window messager-window"
style="display: none; width: 410px; top: 160px; left: 25%; z-index: 9005;">
<div class="panel-header panel-header-noborder window-header"
style="width: 410px;">
<div class="panel-title" style="">提示</div>
<div class="panel-tool">
<a href="javascript:void(0)" class="panel-tool-close"></a>
</div>
</div>
<div class="messager-body panel-body panel-body-noborder window-body"
title="" style="width: 388.021px;">
<div class="popOut">
<table>
<tr>
<td colspan="2" style="text-align: center;"><span id="msg" style="color: red;display:none">输入项不能为空！</span></td>
</tr>
<tr>
<td style="width: 150px; text-align: right;">操作行为批准机构：</td>
<td><input id="val1" type="text" class="inp"
placeholder="" /></td>
</tr>
<tr>
<td style="text-align: right;">确权机构名称：</td>
<td><input id="val2" type="text" class="inp" placeholder="" /></td>
</tr>
</table>
</div>
<div style="clear: both;"></div>
<div class="messager-button">
<a href="javascript:void(0)" style="margin-left: 10px"
class="l-btn l-btn-small" group="" id="ok"><span
class="l-btn-left"><span class="l-btn-text">确定</span></span></a>
</div>
</div>
</div>
<div id="n3" class="window-mask"
style="width: 100%; height: 637px; display: none; z-index: 9003;"></div>
<script type="text/javascript">
//触发弹窗弹出的函数
function view(){
$("#n1").css("display", "block");
$("#n3").css("display", "block");
}
//点击红叉关闭窗口
$(".panel-tool-close").click(function() {
$("#n1").css("display", "none");
$("#n3").css("display", "none");
});
//点击确定关闭窗口，也可以进行其他业务逻辑操作
$("#ok").click(function() {
$("#n1").css("display", "none");
$("#n3").css("display", "none");
//填写的值获取并弹出
var val1 = $("#val1").val();
var val2 = $("#val2").val();
alert(val1+val2);
});
</script>
</body>
</html>
效果：
1、点击按钮弹出窗口
2、
先看一下原版easyUI的窗口：
然后是我的，我就用原版样式做的：（还将就吧）。
总结：
1、思路就是先找到easyUI控制样式的类（F12找），然后copy代码修改。
2、消息框内的内容自己随意定义，按钮输入框什么的跟页面一样。这样就能得到一个类似原来弹窗，功能更多的窗口了；
上一篇： 用MySQL内建复制来最佳化可用性（三）