Вкладки Jquery-UI не работают - PullRequest
4 голосов
/ 16 января 2010

Итак, я пытаюсь создавать вкладки с помощью инфраструктуры JQuery UI, но я не могу заставить их работать.Это просто отображается в виде маркированного списка, а затем с divs все друг под другом.Я прочитал в другом посте, что вам нужно что-то вроде css / Темы, которого у меня не было раньше, поэтому я скачал один с пользовательской темой.я распаковал его в своей медиа-папке, и он создал папку js, css и development-bundle.

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

<head>
<script type='text/javascript'>
$(document).ready(function(){
    $("#tabs").tabs();
});
</script>
</head>
<div id='tabs'>
    <ul>
        <li><a href='#tabs-1'>Manage Categories</a></li>
        <li><a href='#tabs-2'>Add Forms</a></li>
        <li><a href='#tabs-3'>Change Forms</a></li>
    </ul>
    <div id='tabs-1'>
        <h4>Current Categories</h4>
        {% for category in categories %}
            <a href='/admin/fm/delcat/{{ category }}/'>Delete</a> &nbsp;&nbsp;&nbsp; {{ category }}<br />
        {% endfor %}
    </div>
    <div id='tabs-2'>
        <p> stuff</p>
    </div>
    <div id='tabs-3'>
        <p>stuff</p>
    </div>
</div>

Не уверен, почему он не работает.

Ответы [ 2 ]

8 голосов
/ 16 января 2010

Вам необходимо включить CSS-файл JQuery UI.

<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />

Это должно сделать это.

0 голосов
/ 16 января 2010

Чтобы воспроизвести то, что вы описали, мне пришлось опустить таблицу стилей. Это говорит о том, что вы не совсем поняли CSS.

Пример кода вкладок на сайте jquery - хорошее начало, с которого я скопировал следующее и вставил поверх вашего кода

  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...