请问有没有使用方便的tab的js库？

scbb 2012-09-03 11:49:28

基本要求，类似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上。

最好有类似例子。

...全文

137 14 打赏收藏转发到动态举报

写回复

用AI写文章

14 条回复

切换为时间正序

请发表友善的回复…

发表回复

MiceRice 2012-09-06

打赏
举报

[Quote=引用 1 楼的回复:]
jQuery 能作出我需要的效果吗？？
[/Quote]

客观地说，要实现你需要的效果，还是有不少JS组件的。

除了jQuery以外，有些名气的比如还有：ExtJS。

这里有效果Demo集：
http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/
右边是目录。

HelloKata 2012-09-06

打赏
举报

jQuery UI

菖蒲老先生 2012-09-06

打赏
举报

http://jqueryui.com/demos/tabs/
自己可以下载个jquery-ui里面有tabs的实现demo。。。
效果不错。。。

雍寇德 2012-09-06

打赏
举报

[Quote=引用 6 楼的回复:]

jquery ui 的 tabs
或者 twitter bootstrap 的 navs
[/Quote]
这个可以有

yktd26 2012-09-05

打赏
举报

还没找到你要的？？

di_wq 2012-09-04

打赏
举报

不太懂，支持楼主一下，星际很牛啊，你都不会看来很难啊

xttxqjfg 2012-09-04

打赏
举报

这个要求确实有点高。。

scbb 2012-09-03

打赏
举报

补充下要IE8,IE9, firefox都支持的。

yktd26 2012-09-03

打赏
举报

jquery ui 的 tabs
或者 twitter bootstrap 的 navs

scbb 2012-09-03

打赏
举报

我自己用jquery写了个小例子。



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