`

Jsp页面使用jquery ui制作弹出层的详细方法

阅读更多
Jsp页面使用jquery ui制作弹出层的详细方法


//本方法主要业务需求是:在页面点击按钮弹出层 在弹出层中有文本框和table 在文本框中输入内容 查询结果返回到弹出层中的table中 点击table中的某一条数据 返回所需信息到主页面的文本框上

//附本文使用到的js文件 css 文件和 弹出层示例

首现引入jquery ui 各个相关js文件和我们要使用的弹出层css样式


<link rel="stylesheet" href="themes/base/demos.css">
<link rel="stylesheet" href="themes/base/jquery.ui.all.css">

<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/validation.js"></script>
<script type="text/javascript" src="js/date.js"></script>
<script src="exter/jquery.bgiframe-2.1.2.js"></script>
<script src="ui/jquery.ui.core.js"></script>
<script src="ui/jquery.ui.widget.js"></script>
<script src="ui/jquery.ui.mouse.js"></script>
<script src="ui/jquery.ui.button.js"></script>
<script src="ui/jquery.ui.draggable.js"></script>
<script src="ui/jquery.ui.position.js"></script>
<script src="ui/jquery.ui.resizable.js"></script>
<script src="ui/jquery.ui.dialog.js"></script>
<script src="ui/jquery.effects.core.js"></script>







//弹出层控制方法
	$(function() {
		$("#dialog:ui-dialog").dialog("destroy");
		tips = $(".validateTips");

		function updateTips(t) {
			tips.text(t).addClass("ui-state-highlight");
			setTimeout(function() {
				tips.removeClass("ui-state-highlight", 1500);
			}, 500);
		}

		function checkLength(o, n, min, max) {
			if (o.val().length > max || o.val().length < min) {
				o.addClass("ui-state-error");
				updateTips("Length of " + n + " must be between " + min
						+ " and " + max + ".");
				return false;
			} else {
				return true;
			}
		}

		function checkRegexp(o, regexp, n) {
			if (!(regexp.test(o.val()))) {
				o.addClass("ui-state-error");
				updateTips(n);
				return false;
			} else {
				return true;
			}
		}

		$("#dialog-form").dialog({
			autoOpen : false,
			height : 505,
			width : 655,
			modal : true,
			buttons : {
				"查询" : function() {
					var comName = $('#comName').val();
findByAjax(jmsTable,compannyID);//弹出层tableID和ajax查询条件
					//此处因为是添加所以需要ajax返回查询数据
					//ajax方法紧跟在下面贴出						
				},
				"选择" : function() {
					var checkboxs = document.getElementsByName('cb');
					var len = 0;
					var comname = "";
					for ( var i = 0; i < checkboxs.length; i++) {
						if (checkboxs[i].checked) {
							comname = checkboxs[i].value;
							comname2 = checkboxs[i].title;
							len++;
						}
					}
					if (len > 1 && len != 1) {
						alert("只能选择一条记录!");
						return false;
					}
					$('#jmsName').val(comname);//给加盟商文本框赋值
					$('#jmsNameID').val(comname2);//给加盟商隐藏ID赋值
					$(this).dialog("close");

				},
				"取消" : function() {
					$(this).dialog("close");
				}
			},
			close : function() {
				
				}
			}
		});
	});


//Ajax查询方法

function findByAjax (jmsTable, compannyID) {

				$.ajax({
					url : 'companyAction!findJms.action',
					type : 'post',
					data : {
						'companyID' : compannyID
					},
					error : function() {
						alert("加载信息失败,请重试!");
					},
					success : function(date) {
						var json = eval("(" + date + ")");
						try {
							deleteSelectSub(jmsTable);//清楚原有主页面目标元素所有子元素 并重新向该元素追加元素 把查询出的数据添加到每条元素
							$("#jmsTable")
									.append(
											"<tr><th><input type='checkbox' name='checkAll' value=''></th><th>公司名称</th><th>公司法人</th></tr>");
							if (json.length >= 1) {
								for ( var i = 0; i < json.length; i++) {
									$("#jmsTable")
											.append(
													"<tr><td><input type='checkbox' name='cb' value='"+ json[i].compName +"' title='" +json[i].id+ "' ></td><td>"
															+ json[i].compName
															+ "</td><td>"
															+ json[i].legalPerson
															+ "</td></tr>");
								}
							} else {
								$("#jmsTable").append(
										"<tr><td colspan=4>没有类似的数据!</td></tr>");
							}
						} catch (e) {
							deleteSelectSub(jmsTable);
						}
					}
				});
	}






//页面内容

//弹出层
<div class="demo">
		<div id="dialog-form" title="选择加盟商">
			<p class="validateTips">请查询您需要的加盟商名称!</p>
			<form>
				<fieldset>
					<label for="name">加盟商名称</label> <input type="text" name="name"
						id="comName" class="text ui-widget-content ui-corner-all" />
					<table class="listing" cellpadding="0" cellspacing="0"
						id="jmsTable">
						<tr>
							<th><input type="checkbox" name="checkAll" value="">
							</th>
							<th>公司名称</th>
							<th>公司法人</th>
							<th>创建时间</th>
						</tr>
						
					</table>
					<p>&nbsp;</p>
				</fieldset>
			</form>
		</div>
	</div>
	
//主页面文本框

<tr height="35" id="jms" >
									<td width="172">加盟商</td>
									<td class="last"><input type="text" id="jmsName" />
									</td>
								</tr>



分享到:
评论
1 楼 qq313944823 2015-03-19  
[url][img][list]
[*]

[/list][/img][/url]

相关推荐

    蓝色OA管理页面模板,用于前后端交互

    ├── layer layer弹出层插件 ├── laypage laypage 翻页插件 ├── jquery.contextmenu 右键菜单插件 ├── ueditor 百度编辑器 ├── Highcharts 图表插件 ├── echarts 百度图标插件 ├── datatables ...

    仿QQ+webso框架·开源

    里面的弹出层,滚动条,还有右键菜单等控件的UI都在这里,有兴趣的可以自己试着改一下,改成属于自己的弹出层也说不定哦~这些控件就不细说了,等下几篇文章在详说。 然后是key值为defaultTemplated的,不用说,肯定...

    Web应用前端技术的探索与实践

    6.5.2.20 消息提示、弹出广告组件 162 6.5.2.20.1 效果 162 6.5.2.20.2 方法说明 165 6.5.2.20.3 扩展说明 166 6.5.2.21 Panel组件 166 6.5.2.21.1 效果 166 6.5.2.21.2 参数说明 168 6.5.2.21.3 事件说明 169 6.5....

    JAVA上百实例源码以及开源项目

    Java波浪文字制作方法及源代码 1个目标文件 摘要:Java源码,初学实例,波浪文字  Java波浪文字,一个利用Java处理字符的实例,可以设置运动方向参数,显示文本的字符数组,高速文本颜色,显示字体的 FontMetrics对象...

    java开源包8

    它能够在日期输入框后面弹出一个日历。 网页搜索爬虫 BlueLeech BlueLeech是一个开源程序,它从指定的URL开始,搜索所有可用的链接,以及链接之上的链接。它在搜索的同时可以下载遇到的链接所指向的所有的或预定义...

    JAVA上百实例源码以及开源项目源代码

    Java波浪文字制作方法及源代码 1个目标文件 摘要:Java源码,初学实例,波浪文字 Java波浪文字,一个利用Java处理字符的实例,可以设置运动方向参数,显示文本的字符数组,高速文本颜色,显示字体的 FontMetrics对象,...

    java开源包1

    它能够在日期输入框后面弹出一个日历。 网页搜索爬虫 BlueLeech BlueLeech是一个开源程序,它从指定的URL开始,搜索所有可用的链接,以及链接之上的链接。它在搜索的同时可以下载遇到的链接所指向的所有的或预定义...

    java开源包11

    它能够在日期输入框后面弹出一个日历。 网页搜索爬虫 BlueLeech BlueLeech是一个开源程序,它从指定的URL开始,搜索所有可用的链接,以及链接之上的链接。它在搜索的同时可以下载遇到的链接所指向的所有的或预定义...

    java开源包2

    它能够在日期输入框后面弹出一个日历。 网页搜索爬虫 BlueLeech BlueLeech是一个开源程序,它从指定的URL开始,搜索所有可用的链接,以及链接之上的链接。它在搜索的同时可以下载遇到的链接所指向的所有的或预定义...

    java开源包3

    它能够在日期输入框后面弹出一个日历。 网页搜索爬虫 BlueLeech BlueLeech是一个开源程序,它从指定的URL开始,搜索所有可用的链接,以及链接之上的链接。它在搜索的同时可以下载遇到的链接所指向的所有的或预定义...

    java开源包6

    它能够在日期输入框后面弹出一个日历。 网页搜索爬虫 BlueLeech BlueLeech是一个开源程序,它从指定的URL开始,搜索所有可用的链接,以及链接之上的链接。它在搜索的同时可以下载遇到的链接所指向的所有的或预定义...

    java开源包5

    它能够在日期输入框后面弹出一个日历。 网页搜索爬虫 BlueLeech BlueLeech是一个开源程序,它从指定的URL开始,搜索所有可用的链接,以及链接之上的链接。它在搜索的同时可以下载遇到的链接所指向的所有的或预定义...

    java开源包10

    它能够在日期输入框后面弹出一个日历。 网页搜索爬虫 BlueLeech BlueLeech是一个开源程序,它从指定的URL开始,搜索所有可用的链接,以及链接之上的链接。它在搜索的同时可以下载遇到的链接所指向的所有的或预定义...

    java开源包4

    它能够在日期输入框后面弹出一个日历。 网页搜索爬虫 BlueLeech BlueLeech是一个开源程序,它从指定的URL开始,搜索所有可用的链接,以及链接之上的链接。它在搜索的同时可以下载遇到的链接所指向的所有的或预定义...

    java开源包7

    它能够在日期输入框后面弹出一个日历。 网页搜索爬虫 BlueLeech BlueLeech是一个开源程序,它从指定的URL开始,搜索所有可用的链接,以及链接之上的链接。它在搜索的同时可以下载遇到的链接所指向的所有的或预定义...

    java开源包9

    它能够在日期输入框后面弹出一个日历。 网页搜索爬虫 BlueLeech BlueLeech是一个开源程序,它从指定的URL开始,搜索所有可用的链接,以及链接之上的链接。它在搜索的同时可以下载遇到的链接所指向的所有的或预定义...

    java开源包101

    它能够在日期输入框后面弹出一个日历。 网页搜索爬虫 BlueLeech BlueLeech是一个开源程序,它从指定的URL开始,搜索所有可用的链接,以及链接之上的链接。它在搜索的同时可以下载遇到的链接所指向的所有的或预定义...

    Java资源包01

    它能够在日期输入框后面弹出一个日历。 网页搜索爬虫 BlueLeech BlueLeech是一个开源程序,它从指定的URL开始,搜索所有可用的链接,以及链接之上的链接。它在搜索的同时可以下载遇到的链接所指向的所有的或预定义...

Global site tag (gtag.js) - Google Analytics