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> </p>
				</fieldset>
			</form>
		</div>
	</div>

//主页面文本框

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