基本要求,类似Java或VB那样,有各种可监听事件。例如tab change。 tab也是能动态生成的。 自定义外观等。 具体要求:
网页上各个Tab,只有在一次submit时,才把各个tab的数据,check后存到数据库。
现在想象的是这样实现的。
一个tab填一点数据(不一定填完整),切换到下一个tab时,前一个tab的数据不能清除,但也不提交到服务器,保持在客户端。
用户按submit时,对页面上的各个tab的数据进行check,也就是不管当前是哪个tab,各个tab的数据都要提交给服务器。
服务器check有错误时,要让页面要保留到有错误的从左数第一个tab上。 例如:第一个tab没错,第二个tab有错误。
那么不管submit时在哪个tab,就check后停在第二个tab上。最好有类似例子。
网页上各个Tab,只有在一次submit时,才把各个tab的数据,check后存到数据库。
现在想象的是这样实现的。
一个tab填一点数据(不一定填完整),切换到下一个tab时,前一个tab的数据不能清除,但也不提交到服务器,保持在客户端。
用户按submit时,对页面上的各个tab的数据进行check,也就是不管当前是哪个tab,各个tab的数据都要提交给服务器。
服务器check有错误时,要让页面要保留到有错误的从左数第一个tab上。 例如:第一个tab没错,第二个tab有错误。
那么不管submit时在哪个tab,就check后停在第二个tab上。最好有类似例子。
JQ tab是可以的, 要么就是自己写, 用样式+隐藏,这样所有的数据就在一个页面了。
<html>
<head>
<title></title>
<!-- jQuery -->
<script type="text/javascript" src="http://5am.jp/common/js/jquery-1.3.1.min.js"> </script>
<!-- ui tabs.js -->
<script type="text/javascript" src="http://5am.jp/common/js/ui.core.js"> </script>
<script type="text/javascript" src="http://5am.jp/common/js/ui.tabs.js"> </script>
<%
int index = -1;
String text3 = request.getParameter("text3");
if (text3 != null) {
//out.println(text3);
try {
Integer.parseInt(text3);
} catch (Exception e) {
index = 2;
}
} else {
text3 = "3";
}
String text2 = request.getParameter("text2");
if (text2 != null) {
//out.println(text2);
try {
Integer.parseInt(text2);
} catch (Exception e) {
index = 1;
}
} else {
text2 = "2";
}
String text1 = request.getParameter("text1");
if (text1 != null) {
//out.println(text1);
try {
Integer.parseInt(text1);
} catch (Exception e) {
index = 0;
}
} else {
text1 = "1";
}if (index != -1) {
out.println("<font color='red'>tag " + (index + 1) + " is error. </font>");
}
%>
<script type="text/javascript">
$(function() {
//$('#ui-tab > ul').tabs({ fx: { opacity: 'toggle', duration: 'normal' } });
$('#ui-tab > ul').tabs();
});
function go() {
var index = <%=index%>;
$('#ui-tab> ul').tabs('select', index);
};
</script><link href="http://5am.jp/common/css/ui.tabs.css" rel="stylesheet" type="text/css" />
</head><body onload="go();"><form action="testTab.jsp" method="POST">
please input number:
<div id="ui-tab">
<ul>
<li><a href="#fragment-1"><span>tag1</span></a></li>
<li><a href="#fragment-2"><span>tag2</span></a></li>
<li><a href="#fragment-3"><span>tag3</span></a></li>
</ul>
<div id="fragment-1">
<p><input type="text" name="text1" value ="<%=text1%>"/> </p>
</div>
<div id="fragment-2">
<p><input type="text" name="text2" value ="<%=text2%>"/> </p>
</div>
<div id="fragment-3">
<p><input type="text" name="text3" value ="<%=text3%>"/> </p>
</div>
</div>
<input type="submit" value="submit">
</form>
</body>
</html>
或者 twitter bootstrap 的 navs
自己可以下载个jquery-ui里面有tabs的实现demo
效果不错
客观地说,要实现你需要的效果,还是有不少JS组件的。除了jQuery以外,有些名气的比如还有:ExtJS。这里有效果Demo集:
http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/
右边是目录。