jQueryUI - 選項卡的使用

我很新的編程嘗試創建Web應用程序，可以更改內容，而無需重新加載菜單。jQueryUI - 選項卡的使用

然後我決定使用垂直jquery-ui選項卡作爲導航器。使用此代碼

<div id="tabs"> 
    <ul> 
     <li><center>Market Data</center></li> 
     <li><a href="t1.htm">For Test 1</a></li> 
     <li><a href="t2.htm">For Test 2</a></li> 
     <li><a href="t3.htm">For Test 3</a></li> 
    </ul> 
</div>

問題是這樣的jQuery的UI的「標籤」使用的是什麼機械師顯示裏面另一個htm文件AJAX，iframe或什麼？

這是一個好方法嗎？

它可以處理一個複雜的htm文件，涉及提交表單，從Web服務接收數據？

預先感謝您！

編輯：對不起，沒有提到這一點，但我想避免使用AJAX如果可能的話。

來源

2013-08-28 user2612767

輕鬆定製？ PHP？ JSP？ ASP？ –

是的，我爲此使用JSP。 – user2612767

您可以使用jquery-ui的「選項卡」。就像這樣：

<!doctype html> 
<html lang="en"> 

    <head> 
     <meta charset="utf-8" /> 
     <title>jQuery UI Tabs - Default functionality</title> 
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" 
     /> 
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
     <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
     <link rel="stylesheet" href="/resources/demos/style.css" /> 
     <script> 
      $(function() { 
       $("#tabs").tabs(); 
      }); 
     </script> 
    </head> 

    <body> 
     <div id="tabs"> 
      <ul> 
       <li><a href="#tabs-1">Nunc tincidunt</a> 
       </li> 
       <li><a href="#tabs-2">Proin dolor</a> 
       </li> 
       <li><a href="#tabs-3">Aenean lacinia</a> 
       </li> 
      </ul> 
      <div id="tabs-1"> 
       <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur 
        nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper 
        ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. 
        Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. 
        Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam 
        molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor 
        nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> 
      </div> 
      <div id="tabs-2"> 
       <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, 
        ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed 
        fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut 
        tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed 
        ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing 
        adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel 
        metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. 
        Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod 
        felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> 
      </div> 
      <div id="tabs-3"> 
       <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam 
        vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue 
        orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu 
        ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. 
        Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit 
        ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, 
        luctus a, lacus.</p> 
       <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, 
        magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. 
        Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede 
        vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor 
        eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. 
        Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, 
        pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. 
        Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit 
        hendrerit.</p> 
      </div> 
     </div> 
    </body> 

</html>

來源

2013-08-28 04:21:27

我認爲這個問題是關於加載另一個HTML頁面，而不是在同一頁面內的HTML div .. –

是的，我想知道abouot加載另一個HTML文件作爲內容，而無需刷新所有的菜單。對不起，如果我的問題不夠清楚。 – user2612767

使用AJAX。對此已有答案。 –

HTML頁面的加載使用AJAX，這是一個很好的方法，可以讓HTML頁面調用Web服務太..你會覺得沒有問題與做..

欲瞭解更多信息，請參閱http://jquerytools.org/demos/tabs/ajax.html http://jqueryui.com/tabs/#ajax

來源

2013-08-28 04:24:13

對不起，這個提前沒有提到，但我想避免使用AJAX如果可能的話。有沒有另一種方法來做到這一點，而不使用AJAX？ – user2612767

我可以知道你爲什麼想要AJAX嗎？ –

here你可以看到通過AJAX來在該內容標籤的例子

jquery ui tabs您使用服務器端語言根據您的要求

代碼

<!doctype html> 
<html lang="en"> 

    <head> 
     <meta charset="utf-8" /> 
     <title>jQuery UI Tabs - Content via Ajax</title> 
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" 
     /> 
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
     <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
     <link rel="stylesheet" href="/resources/demos/style.css" /> 
     <script> 
      $(function() { 
       $("#tabs").tabs({ 
        beforeLoad: function (event, ui) { 
         ui.jqXHR.error(function() { 
          ui.panel.html("Couldn't load this tab. We'll try to fix this as soon as possible. " + "If this wouldn't be a demo."); 
         }); 
        } 
       }); 
      }); 
     </script> 
    </head> 

    <body> 
     <div id="tabs"> 
      <ul> 
       <li><a href="#tabs-1">Preloaded</a> 
       </li> 
       <li><a href="ajax/content1.html">Tab 1</a> 
       </li> 
       <li><a href="ajax/content2.html">Tab 2</a> 
       </li> 
       <li><a href="ajax/content3-slow.php">Tab 3 (slow)</a> 
       </li> 
       <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a> 
       </li> 
      </ul> 
      <div id="tabs-1"> 
       <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur 
        nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper 
        ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. 
        Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. 
        Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam 
        molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor 
        nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> 
      </div> 
     </div> 
    </body> 

</html>

來源

2013-08-28 04:29:23

我的朋友說他希望我儘可能避免使用AJAX，說這樣會讓它變得更加困難。你有其他建議嗎？或者我應該使用正常的導航與iframe？ – user2612767

jQueryUI - 選項卡的使用

回答

相關問題