Question

我在加载这个themeroller jquery插件的主题'tabs'和'accordian'时遇到了麻烦。似乎正在加载CSS，但不是JS。我对JS及其正确的文件路径进行了三重检查，所以不确定为什么它没有被标记出来..有什么建议吗？这是代码：

<!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>

Answer 1

您还必须初始化标签。主题已加载，一切都在膨胀，但你错过了：

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

正确的例子：http://jsfiddle.net/RCKND/

JQuery Themeroller问题加载

1 个答案: