jquery tab 控制

lzg3267373

浏览: 30548 次
性别:
来自: 上海

最近访客更多访客>>

stupider

我是冷锋

疯狂原始人

luxianlulucien

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery

jquery tab 控制

<%@ 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">

<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>