2012-02-04 2 views
0

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

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

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

Я импортировал пользовательский интерфейс jQuery, мобильный и 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

Вы не включили необходимые JavaScripts и CSS для tabs.Change 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> 
Смежные вопросы