zoukankan      html  css  js  c++  java

  • 点击某个功能 界面变化

    页面起初效果：

    对应代码：

    <%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<%@include file="../../util/loading.jsp" %>
<%@include file="../../util/checkParentFrame.jsp" %>
<%@ taglib prefix="s" uri="/struts-tags"%>

<html>
	<head>
	

</script>
</head>
<body >
	<DIV class=tab>
		<DIV class=tabOn>
			管理
		</DIV>
	<DIV class=clearer></DIV>
</DIV>
<DIV class=column>
<div id="man_zone" >
  <table width="99%" border="0" align="left"  cellpadding="3" cellspacing="1" >
    <tr>
      <td width="30%"  align="left" valign="top" class="treetd">
      
		<span>
			<font size="2"><b>管理</b></font>
			<a href="#" onclick="location.reload();"><img src="../../img/refresh.gif" title="点击刷新站点" /></a>
			
			<s:if test="%{   ？ ？ ？ }">
				<br/>
				<input type="button" class="button" value="添加一级站点" onclick="document.getElementById('siteFrame').src='site_edit.do'"></input>
			</s:if>
		</span>
			
		
		<ul id="mixedpar" >
			<s:if test="%{ ？ ？ ？ }">
				<s:iterator value="List" status="bean">
					<li id="<s:property value="id"/>" class="hasChildren">
						<span><font size="2">
							<a href="edit.do?site.id=<s:property value="id"/>" target="siteFrame"><b><s:property value="name"/></b></a></font>
						</span>
						<ul>
							<li><span  > </span></li>
						</ul>
					</li>
				</s:iterator>
			</s:if>
			<s:if test="%{ ！ ？ ？ ？ }">
				<s:iterator value="List" status="bean">
					<li id="<s:property value="id"/>" class="hasChildren">
						<span><font size="2">
							<a href="edit.do?site.id=<s:property value="id"/>" target="siteFrame"><b><s:property value="name"/></b></a></font>
						</span>
					</li>
				</s:iterator>
			</s:if>
		</ul>	
      </td>
      
      <td width="70%">
      
     	 <iframe width="100%" height="450" name="siteFrame" id="siteFrame" framespacing="0" border="false"  frameborder="0"></iframe>
      
      
      </td>
    </tr>
  </table>
</div>
</DIV>

	<script type="text/javascript">
	$("#siteFrame").height($(document).height()-80);
	function initTreesPar() {
		$("#mixedpar").treeview({
			url: "son.do",
			ajax: {
				data: {
					"additional": function() {
						return "yeah: " + new Date;
					}
				},
				type: "post"
			}
		});
	}
	initTreesPar();
	</script>
	</body>
</html>

    　　

    当点击其中某个‘功能*’时，右边空白地方将填充表单

    document.getElementById('siteFrame').src='site_edit.do经过后台处理后的界面

    <%@ page language="java" pageEncoding="UTF-8"%>
<%@   taglib   uri = "http://ckfinder.com"   prefix = "ckfinder"   %>   
<%@   taglib   uri = "http://ckeditor.com"   prefix = "ckeditor"   %>   
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@page import="java.util.UUID"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ taglib prefix="s" uri="/struts-tags"%> 
<%@include file="../../util/checkParentFrame.jsp" %>

		
		
	<form action="site_editDo.do" method="post" enctype="multipart/form-data">
			<input type="hidden" name="site.id" id="siteId" value="${site.id }" />
			<input type="hidden" name="site.parid" value="${site.parid }" />
			<DIV class=column>
				<TABLE cellSpacing=4 cellPadding=4 width="95%" align=center>
					<TBODY>
						<TR>
							<TD width="30%" align="left">
								<LABEL id=ctl01_ctl00_label>
									<IMG style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px"
											id=ctl01_ctl00_imgHelp tabIndex=-1 alt=请输入站点名称
											src="../../img/help.gif" />
									<NOBR>
										<SPAN id=ctl01_ctl00_lblLabel>名称：</SPAN>
									</NOBR>
								</LABEL>
							</TD>
							<TD width="70%" align="left">
								<INPUT onblur="this.className='colorblur';" id=name
									class=colorblur onfocus="this.className='colorfocus';" 
									maxLength=50 type=text name=site.name value="${site.name }" />
								<SPAN  id=ctl03>*</SPAN>
							</TD>
						</TR>
						<TR>
							<TD width="30%" align="left">
								<LABEL id=ctl01_ctl00_label>
									<IMG style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px"
											id=ctl01_ctl00_imgHelp tabIndex=-1 alt=请输入站点的源文件目录名，此站点的相关文件将放在此目录下
											src="../../img/help.gif" />
									<NOBR>
										<SPAN id=ctl01_ctl00_lblLabel>源文件目录名：</SPAN>
									</NOBR>
								</LABEL>
							</TD>
							<TD width="70%" align="left">
								<INPUT onblur="this.className='colorblur';" id=sourcepath  oninput="checkLoginName(this)" onpropertychange="checkLoginName(this)"
									class=colorblur onfocus="this.className='colorfocus';" ${site!=null && site.id!=null && site.id !=""?"readonly":"" }
									maxLength=50 type=text name=site.sourcepath value="${site.sourcepath }" />
								<SPAN  id=ctl03>*</SPAN>
							</TD>
						</TR>
						<TR>
							<TD width="30%" align="left">
								<LABEL id=ctl01_ctl00_label>
									<IMG style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px"
											id=ctl01_ctl00_imgHelp tabIndex=-1 alt=请输入站点域名,设置的可以通过此域名直接访问此站点
											src="../../img/help.gif" />
									<NOBR>
										<SPAN id=ctl01_ctl00_lblLabel>域名：</SPAN>
									</NOBR>
								</LABEL>
							</TD>
							<TD width="70%" align="left">
								<INPUT onblur="this.className='colorblur';" id=sitedomain
									class=colorblur onfocus="this.className='colorfocus';" 
									maxLength=50 type=text name=site.sitedomain value="${site.sitedomain }" />
							</TD>
						</TR>
						<TR>
							<TD width="30%" align="left">
								<LABEL id=ctl01_ctl00_label>
									<IMG	style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px"
											id=ctl01_ctl00_imgHelp tabIndex=-1 alt=请输入站点的排序号
											src="../../img/help.gif" />
									<NOBR>
										<SPAN id=ctl01_ctl00_lblLabel>排序号：</SPAN>
									</NOBR>
								</LABEL>
							</TD>
							<TD width="70%" align="left">
								<INPUT onblur="this.className='colorblur';" id=ordernum 
									class=colorblur onfocus="this.className='colorfocus';" onkeyup=if(!isInt(value))execCommand('undo') onafterpaste=if(!isInt(value))execCommand('undo') 
									maxLength=50 type=text name=site.ordernum value="${site.ordernum }" />
							</TD>
						</TR>
						<TR>
							<TD width="30%" align="left">
								<LABEL id=ctl02_ctl00_label>
									<IMG
											style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px"
											id=ctl02_ctl00_imgHelp tabIndex=-1 alt=请选择有效性
											src="../../img/help.gif" />
									<NOBR>
										<SPAN id=ctl02_ctl00_lblLabel>有效：</SPAN>
									</NOBR>
								</LABEL>
							</TD>
							<TD align="left">
								<input type="radio" id="isok1" name="site.state" value="1" <s:if test="site==null || site.state==null || site.state==1">checked="checked"</s:if> />是
								<input type="radio" id="isok0" name="site.state" value="0" <s:if test="site.state==0">checked="checked"</s:if> />否
							</TD>
						</TR>
						<TR>
							<TD width="30%" align="left">
								<LABEL id=ctl01_ctl00_label>
									<IMG
											style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px"
											id=ctl01_ctl00_imgHelp tabIndex=-1 alt=请输入站点的外部链接，设置后点击此站点将直接进入此外部链接
											src="../../img/help.gif" />
									<NOBR>
										<SPAN id=ctl01_ctl00_lblLabel>外部链接：</SPAN>
									</NOBR>
								</LABEL>
							</TD>
							<TD width="70%" align="left">
								<INPUT onblur="this.className='colorblur';" id=url 
									class=colorblur onfocus="this.className='colorfocus';" 
									maxLength=50 type=text name=site.url value="${site.url }" />
							</TD>
						</TR>
						
						<TR>
							<TD width="30%" align="left">
								<LABEL id=ctl02_ctl00_label>
									<IMG
											style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px"
											id=ctl02_ctl00_imgHelp tabIndex=-1 alt=请上传站点LOGO
											src="../../img/help.gif" />
									<NOBR>
										<SPAN id=ctl02_ctl00_lblLabel>LOGO：</SPAN>
									</NOBR>
								</LABEL>
							</TD>
							<TD align="left"> 
								<input type="hidden" id="oldLogo" name="oldLogo" value="${site.logo }"/>
								<s:if test='%{site.logo!=null && site.logo != "" && site.logo != "null"}'>
									<span id="oldLogoSpan">
										<a href="<%=basePath %>${site.logo }?date=<%=UUID.randomUUID() %>" target="_blank">
											<img src="<%=basePath %>${site.logo }?date=<%=UUID.randomUUID() %>" width="180" height="42" title="点击查看大图"/>
										</a>
										<a href="javascript:delLogo()">删除</a>
									</span>
									<br/>
								</s:if>
								<input type="file" name="logo" onblur="this.className='inputblur';" 
										class=inputblur onfocus="this.className='inputfocus';" id="logo" />
							</TD>
						</TR>
						<TR>
							<TD width="30%" align="left">
								<LABEL id=ctl01_ctl00_label>
									<IMG
											style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px"
											id=ctl01_ctl00_imgHelp tabIndex=-1 alt=请输入站点的版权
											src="../../img/help.gif" />
									<NOBR>
										<SPAN id=ctl01_ctl00_lblLabel>版权：</SPAN>
									</NOBR>
								</LABEL>
							</TD>
							<TD width="70%" align="left">
								<INPUT onblur="this.className='colorblur';" id=copyright 
									class=colorblur onfocus="this.className='colorfocus';" 
									maxLength=50 type=text name=site.copyright value="${site.copyright }" />
							</TD>
						</TR>
						<TR>
							<TD width="30%" align="left">
								<LABEL id=ctl01_ctl00_label>
									<IMG
											style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px"
											id=ctl01_ctl00_imgHelp tabIndex=-1 alt=请输入站点的备案号
											src="../../img/help.gif" />
									<NOBR>
										<SPAN id=ctl01_ctl00_lblLabel>备案号：</SPAN>
									</NOBR>
								</LABEL>
							</TD>
							<TD width="70%" align="left">
								<INPUT onblur="this.className='colorblur';" id=recordcode 
									class=colorblur onfocus="this.className='colorfocus';" 
									maxLength=50 type=text name=site.recordcode value="${site.recordcode }" />
							</TD>
						</TR>
						<TR>
							<TD width="30%" align="left">
								<LABEL id=ctl01_ctl00_label>
									<IMG
											style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px"
											id=ctl01_ctl00_imgHelp tabIndex=-1 alt=请选择站点的页面模板
											src="../../img/help.gif" />
									<NOBR>
										<SPAN id=ctl01_ctl00_lblLabel>页面模板：</SPAN>
									</NOBR>
								</LABEL>
							</TD>
							<TD width="70%" align="left">
								<input type="hidden" name="site.indextemplet" value="${site.indextemplet }" id="indextemplet" />
								<INPUT onblur="this.className='colorblur';" id=indextempletName  onclick="selectTemplet('${site.id }')"
									class=colorblur onfocus="this.className='colorfocus';" readonly style="cursor:hand"
									maxLength=50 type=text name=site.indextempletName value="${site.indextempletName }" />
								<a href="#" onclick="syncRes()" title="点击后将把模板资源文件(resources文件夹)复制并覆盖到此站点">同步资源文件</a>
							</TD>
						</TR>
						<TR>
							<TD width="30%" align="left">
								<LABEL id=ctl01_ctl00_label>
									<IMG
											style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px"
											id=ctl01_ctl00_imgHelp tabIndex=-1 alt=请设置静态化调度
											src="../../img/help.gif" />
									<NOBR>
										<SPAN id=ctl01_ctl00_lblLabel>静态化调度：</SPAN>
									</NOBR>
								</LABEL>
							</TD>
							<TD width="70%" align="left">
								<input type="hidden" name="htmlquartz.id" value="${htmlquartz.id }"/>
								<table>
									<tr>
										<td>
											<select id="htmlquartzType" name="htmlquartz.type" onchange="htmlquartzTypeChange(this)">
												<option value="">无</option>
												<option value="0" ${"0" == htmlquartz.type ?"selected":"" }>定时生成首页</option>
												<option value="1" ${"1" == htmlquartz.type ?"selected":"" }>间隔重复生成首页</option>
											</select>
										</td>
										<td id="exetimeTd" style="display:${"0" == htmlquartz.type ?"block":"none" }">
											<select id="exetimehour" name="htmlquartz.exetimehour">
												<s:iterator value="hours" id="obj" >
													<option value="${obj }"  ${obj == htmlquartz.exetimehour ?"selected":"" }>${obj }</option>
												</s:iterator>
											</select>时
											<select id="exetimemin" name="htmlquartz.exetimemin">
												<s:iterator value="mins" id="obj" >
													<option value="${obj }"  ${obj == htmlquartz.exetimemin ?"selected":"" }>${obj }</option>
												</s:iterator>
											</select>分
										</td>
										<td id="intervalTd" style="display:${"1" == htmlquartz.type ?"block":"none" }">
											<table>
												<tr>
													<td>
														间隔单位:
														<select id="intervalType" name="htmlquartz.intervaltype" onchange="intervalTypeChange(this)">
															<option value="0" ${"0" == htmlquartz.intervaltype ?"selected":"" }>小时</option>
															<option value="1" ${"1" == htmlquartz.intervaltype ?"selected":"" }>分钟</option>
														</select>
													</td>
													<td id="intervalhourTd" style="display:${"1" != htmlquartz.intervaltype ?"block":"none" }">
														<select id="intervalhour" name="htmlquartz.intervalhour">
															<s:iterator value="hours" id="obj" >
																<option value="${obj }" ${obj == htmlquartz.intervalhour ?"selected":"" }>${obj }</option>
															</s:iterator>
														</select>时
													</td>
													<td id="intervalminTd" style="display:${"1" == htmlquartz.intervaltype ?"block":"none" }">
														<select id="intervalmin" name="htmlquartz.intervalmin">
															<s:iterator value="mins" id="obj" >
																<option value="${obj }" ${obj == htmlquartz.intervalmin ?"selected":"" }>${obj }</option>
															</s:iterator>
														</select>分
													</td>
												</tr>
											</table>
										</td>
									</tr>
								</table>
							</TD>
						</TR>
						<TR>
							<TD  align="center" colspan="10">
								<input type="button" value="保存" onclick="save(this.form)"  class="button"  /> 
								<s:if test='%{site!=null && site.id != null && site.id != "null" && site.id != "" }'>
									<input type="button" value="删除" onclick="del('${site.id }')"  class="button"  /> 
									<input type="button" value="添加下级" onclick="addSon('${site.id }')"  class="button"  <s:if test="%{#session.loginAdmin.loginname != 'admin'}">style="display:none"</s:if>/>
									<input type="button" value="改变所属" onclick="parButton('${site.id }')"  class="button"  <s:if test="%{#session.loginAdmin.loginname != 'admin'}">style="display:none"</s:if>/>
									<input type="button" value="预览" onclick="preview('${site.id }')"  class="button"  />
								</s:if>
							</TD>
						</TR>
					</TBODY>
				</TABLE>
			</DIV>
		</form>

    　　
  • 相关阅读:
    安装包报错2503解决方法
    js中return；、return true、return false;区别
    图片添加border 不占用图片的大小
    效果网址http://sc.chinaz.com/tag_jiaoben/tupianlunbo.html
    兼容ie8 rgba()用法
    html使用css让文字多行超出部分用省略号三个点显示的方法案例
    MyCat02--MyCat入门无ZK实践
    MyCat01--基础
    MySQL/MariaDB导入（load data infile）导出（select into outfile）
    MariaDB/Mysql临时表
  • 原文地址：https://www.cnblogs.com/a757956132/p/4538709.html
Copyright © 2011-2022 走看看