JQuery Themeroller問題正在裝入

我無法加載這個themeroller jquery插件主題的'tabs'和'accordian'。看起來CSS正在被加載，但不是JS。我三重檢查JS和它的一個正確的文件路徑，所以不知道爲什麼它沒有被標記。有什麼建議嗎？這裏是代碼：JQuery Themeroller問題正在裝入

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 

     <!-- LOAD JQUERY THEME CSS --> 
     <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet" /> 

     <style type="text/css"> 
     ul#icons {margin: 0; padding: 0;} 
     ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;} 
     ul#icons span.ui-icon {float: left; margin: 0 4px;} 
     </style>  


    <!-- LOAD JQUERY --> 
     <script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 

    <!-- LOAD JQUERY THEME JS --> 
    <script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 


    <!--INITIALIZE THEME--> 
    <script language="text/javascript"> 
    $(function(){ 
    // Tabs 
     $('#tabs').tabs(); 

    // Accordion 
     $("#accordion").accordion({ header: "h3" }); 

    }); 
    </script> 




</head> 

<body> 

    <!-- Tabs --> 

    <div id="tabs"> 
     <ul> 
      <li><a href="#tabs-1">First</a></li> 
      <li><a href="#tabs-2">Second</a></li> 
      <li><a href="#tabs-3">Third</a></li> 

     </ul> 
     <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
     <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div> 
     <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div> 
    </div> 


    <!-- Accordian --> 

    <div id="accordion"> 
     <div> 

      <h3><a href="#">First</a></h3> 
      <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> 
     </div> 
     <div> 
      <h3><a href="#">Second</a></h3> 
      <div>Phasellus mattis tincidunt nibh.</div> 
     </div> 

     <div> 
      <h3><a href="#">Third</a></h3> 
      <div>Nam dui erat, auctor a, dignissim quis.</div> 
     </div> 
    </div> 

    <!-- Theme CSS Loads fine --> 

    <ul id="icons" class="ui-widget ui-helper-clearfix"> 
    <li class="ui-state-default ui-corner-all" title=".ui-icon-refresh"><span class="ui-icon ui-icon-refresh"></span></li> 

    </ul> 



    </body> 
    </html>

來源

2011-08-29 Control Freak

沒關係，在INITIALISE腳本是錯誤的語言..應該僅僅是「JavaScript的」我把「文本/ javascript'忽略問題。 –

你也必須初始化標籤。主題是加載和一切都脹大，但是你錯過：

<script type="text/javascript"> 
    $(document).ready(function(){var $tabs = $('#tabs').tabs();}) 
</script>

正確示例：http://jsfiddle.net/RCKND/

來源

2011-08-29 06:41:48

JQuery Themeroller問題正在裝入

回答

相關問題