JQuery Mobile / UI Простой импорт - PullRequest
Новая
       3

JQuery Mobile / UI Простой импорт

0 голосов
/ 05 февраля 2012

Я никогда не делал jQuery Mobile раньше - не мог заставить этот простой пример с вкладками работать.

Проблема: вкладки не отображаются - они остаются просто как div и li.

Может кто-нибудь указать на мою ошибку?наверное довольно просто.

Я импортировал jQuery UI, мобильный телефон и jquery (обычный).Так что я думал, что у меня все это есть.Мобильный и пользовательский интерфейс расширяют нормальный JQuery правильно?Но пытаясь следовать инструкциям здесь: http://jqueryui.com/demos/tabs/#default Я даже не смог этого сделать.

есть указатели?

<head>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

<script>
    $(function() {
        $( "#tabs" ).tabs();
    });
</script>

</head>

<body>
<div data-role="page">

    <div data-role="header" data-theme="a">
        <h1>My App</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <p>Hello world</p>  

        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">Nunc tincidunt</a></li>
                <li><a href="#tabs-2">Proin dolor</a></li>
                <li><a href="#tabs-3">Aenean lacinia</a></li>
            </ul>

            <div id="tabs-1">
                <p>Tab #1</p>
            </div>

            <div id="tabs-2">
                <p>Tab #2</p>
            </div>

            <div id="tabs-3">
                <p>Tab #3</p>
            </div>
        </div>  
    </div><!-- /content -->

</div><!-- /page -->
</body>

</html>

1 Ответ

1 голос
/ 05 февраля 2012

Вы не включили необходимые javascript и css для вкладок. Измените тег head следующим образом: 

<head>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.tabs.js"></script>
<script>
    $(function() {
        $( "#tabs" ).tabs();
    });
</script>

</head>
...