基本要求,类似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上。最好有类似例子。

解决方案 »

  1.   

    jQuery 能作出我需要的效果吗??
      

  2.   

    各种tabs!
    JQ tab是可以的, 要么就是自己写, 用样式+隐藏,这样所有的数据就在一个页面了。
      

  3.   

    我自己用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>
      

  4.   

    jquery ui 的 tabs
    或者 twitter bootstrap 的 navs
      

  5.   

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

  6.   

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

  7.   


    客观地说,要实现你需要的效果,还是有不少JS组件的。除了jQuery以外,有些名气的比如还有:ExtJS。这里有效果Demo集:
      http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/
    右边是目录。