2012-02-04 64 views
0

我從未做過jQuery Mobile之前 - 無法讓這個簡單的選項卡式示例工作。jQuery mobile/ui簡單導入

問題:製表符不顯示 - 它們保持爲div和li的形式。

任何人都可以指出我的錯誤?可能很簡單。

我導入了jQuery UI,mobile和jquery(normal)。所以我覺得我已經完全失望了。移動和用戶界面擴展正常的jQuery的權利?但試圖按照這裏的說明:http://jqueryui.com/demos/tabs/#default我甚至無法做到這一點。

任何指針?

<head> 

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 

<script> 
    $(function() { 
     $("#tabs").tabs(); 
    }); 
</script> 

</head> 

<body> 
<div data-role="page"> 

    <div data-role="header" data-theme="a"> 
     <h1>My App</h1> 
    </div><!-- /header --> 

    <div data-role="content"> 
     <p>Hello world</p> 

     <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>Tab #1</p> 
      </div> 

      <div id="tabs-2"> 
       <p>Tab #2</p> 
      </div> 

      <div id="tabs-3"> 
       <p>Tab #3</p> 
      </div> 
     </div> 
    </div><!-- /content --> 

</div><!-- /page --> 
</body> 

</html> 

回答

1

您還沒有爲tabs.Change必要的JavaScript和CSS的head標籤是這樣的:

<head> 

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css" /> 
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> 
<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script> 
<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script> 
<script src="http://jqueryui.com/ui/jquery.ui.tabs.js"></script> 
<script> 
    $(function() { 
     $("#tabs").tabs(); 
    }); 
</script> 

</head>