2011-08-29 55 views
0

我无法加载这个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> 
+0

没关系,在INITIALISE脚本是错误的语言..应该仅仅是“JavaScript的”我把“文本/ javascript'忽略问题。 –

回答

0

你也必须初始化标签。主题是加载和一切都胀​​大,但是你错过:

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

正确示例:http://jsfiddle.net/RCKND/