浏览 2265 次
|
锁定老帖子 主题：jquery tab 控制
该帖已经被评为隐藏帖
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2009-02-24
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>jquery tab</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <style type="text/css"> .ui-tabs-nav{ font-size:14px; margin:0px; padding:0px 0px 0px 0px;/*26为图片的高度*/ } *+html .ui-tabs-nav{padding:0px 0px 26px 0px;} /* IE7 */ .ui-tabs-nav li{ display:inline; } .ui-tabs-nav a{ float:left; background:url(images/btn_p_bg1.gif) no-repeat left top; margin: 1px 0 0; color:#ffffff; text-align:center; text-decoration:none; } .ui-tabs-nav a span{ width: 110px; /* IE 6 treats width as min-width */ min-width: 110px; height: 26px; /* IE 6 treats height as min-height */ min-height: 26px; padding:6px 0 0 0; } .ui-tabs-nav .ui-tabs-selected a{ background:url(images/btn_p_bg2.gif) no-repeat right top; color:#FF7C12; } .ui-tabs-nav .ui-tabs-disabled a{ opacity: .4; filter: alpha(opacity=40); } .ui-tabs-hide{ display:none; } .ui-tabs-panel { border: 1px solid #d2d2d2; padding: 1em 8px; background: #fff; /* declare background color for container to avoid distorted fonts in IE while fading */ } </style> <script src="<%=path%>/js/jquery-latest.js" type="text/javascript" ></script> <script src="<%=path%>/js/tab/ui.core.js" type="text/javascript" ></script> <script src="<%=path%>/js/tab/ui.tabs.js" type="text/javascript" ></script> <script type="text/javascript"> $(document).ready(function(){ $("#searchTab > ul").tabs({ event: 'mouseover', spinner:'', fxAutoHeight: true, selected: 0 }); }); function searchSubmit(){ var keyWordOne = $("#keyWordOne").val(); $("input[type='radio'][name='type']").each( function(i){ var typeVal = $(this).val();//alert(this.value); $("#searchTab > ul").tabs('url', i, "<%=path%>/go.action?type="+typeVal+"&keyWordOne="+keyWordOne); if($(this).is(':checked')) $("#searchTab > ul").tabs('select',i); } ); } </script> </head> <body> <div> <table width="96%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="532"> <input type="radio" name="type" value="1" /> 明星 <input type="radio" name="type" value="2" /> 观众 <input type="radio" name="type" value="3" /> 评委 <input type="radio" name="type" value="4" /> 作品 </td> <s:if test="#parameters.keyWordOne==null"> <s:if test="%{keyWordOne==null}"> <s:set name="keyWordOne" value="" /> </s:if> <s:else><s:set name="keyWordOne" value="%{keyWordOne}" /></s:else> </s:if> <s:else> <s:set name="keyWordOne" value="#parameters.keyWordOne" /> </s:else> <td width="323"><input type="text" id="keyWordOne" name="keyWordOne" value="<s:property value="#keyWordOne" />" /></td> <td width="95"><a href="#" onclick="javascript:searchSubmit();" ><img src="<%=path%>/images/btn_search2.gif" border=0 /></a></td> </tr> </table> </div> <div id="searchTab" > <ul> <li><a id="starTab" href="#fragment-1"><span>明星</span></a></li> <li><a id="audienceTab" href="#fragment-2"><span>观众</span></a></li> <li><a id="commentatorTab" href="#fragment-3"><span>评委</span></a></li> <li><a id="workTab" href="#fragment-4"><span>作品</span></a></li> </ul> </div> <div id="fragment-1">明星</div> <div id="fragment-2">观众</div> <div id="fragment-3">评委</div> <div id="fragment-4">作品</div> </body> </html> 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
