Компоненты JQuery-UI не отображаются при загрузке

Question

Компоненты JQuery-UI не отображаются при загрузке

0

Я пишу HTML-страницу с двумя компонентами JQuery-ui: вкладками и аккордеон. Если я попробую код в JSFiddle, оба компонента будут отображаться правильно. Но если я попробую локально, они не появятся.

Я использую Chrome, и если я проверю исходный код, я могу открыть связанные с css и js файлы из исходного кода, поэтому пути должны быть правильными.

Я думаю, проблема заключается в скрипте инициализации. Прежде всего, я попытался изменить еще один js файл с кодом:

        $(function() {
            $('#accordion').accordion();
            $('#results').tabs();
        }

Но это не сработало. Поэтому я попытался записать его в HTML файл следующим образом:

<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
        <link type="text/css" href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet"/>
        <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.10.3.custom.js"></script>
        <script type="text/javascript">
            $(function() {
                $('#accordion').accordion();
                $('#results').tabs();
            }
        </script>
    </head>

    <body>
        <div id="accordion">
            <h3>1st menu</h3>
            <div id="1stmenu-controls" class="accordion-content">
                Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
            </div>
            <h3>2nd menu</h3>
            <div id="2stmenu-controls" class="accordion-content">

            </div>
            <h3>3rd menu</h3>
            <div id="3stmenu-controls" class="accordion-content">

            </div>
        </div>

        <div id="results">
            <ul>
                <li><a href="#tabs-1">Graphic results</a></li>
                <li><a href="#tabs-2">Text results</a></li>
                <li><a href="#tabs-3">Other</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.
                <img src="images/barh_demo.png" alt="Graphic results" height="300" width="400"/>
            </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>
    </body>
</html>

Не работает. Наверное, я делаю какую-то глупую ошибку при загрузке компонентов jquery-ui в событие document.ready, чего-то не хватает. Любая помощь?

Roman Rdgz 19 сен. 2013, в 13:07

Источник

Теги:

javascript

jquery

html

jquery-ui

2 ответа

1

Firebug console shoud throw error (если есть ошибка), проверьте и дважды проверьте путь к файлам jq

pszaba 19 сен. 2013, в 09:07

Ещё вопросы

Ganesh Pandhere · Accepted Answer · 2013-09-19T10-20-00.000Z

У вашего кода нет закрывающих брекетов. Он должен выглядеть так:

$(function() {
    $('#accordion').accordion();
    $('#results').tabs();
});

Просто наблюдал это, прослеживая. :)