Как создать контроллер таблеток, аналогичный iOS tabbarController в jqueryMobile правильно?

Я пытаюсь создать tabbar контроллер в jquery-mobile, но я молодец демка jquery-mobile API: http://demos.jquerymobile.com/1.4.5/tabs/#&ui-state=dialog не удалось:Как создать контроллер таблеток, аналогичный iOS tabbarController в jqueryMobile правильно?

Результат стал таким:

Вы видите, здесь есть два вопроса:

1) three является смещенным вниз уровня.
2) Я хочу navbar (в iOS по телефону tabbar) найти в нижней части page.

Мой код ниже:

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <!--<meta http-equiv="content-type" content="text/html; charse=utf-8">--> 
 
    <meta charset="UTF-8"> 
 
    <title></title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link href="../css/jquery.mobile-1.4.0.css" rel="stylesheet"> 
 
    <script src="../js/lib/jquery-2.0.3.js"></script> 
 
    <script src="../js/lib/jquery.mobile-1.4.0.js"></script> 
 
</head> 
 
<body> 
 
<footer data-position="fixed"> 
 
<div data-role="tabs" id="tabs"> 
 
      <div data-role="navbar"> 
 
        <ul> 
 
          <li><a href="#one" data-ajax="false">one</a></li> 
 
          <li><a href="#two" data-ajax="false">two</a></li> 
 
          <li><a href="ajax-content-ignore.html" data-ajax="false">three</a></li> 
 
        </ul> 
 
      </div> 
 
      <div id="one" class="ui-body-d ui-content"> 
 
        <h1>First tab contents</h1> 
 
      </div> 
 
      <div id="two"> 
 
        <ul data-role="listview" data-inset="true"> 
 
            <li><a href="#">Acura</a></li> 
 
            <li><a href="#">Audi</a></li> 
 
            <li><a href="#">BMW</a></li> 
 
            <li><a href="#">Cadillac</a></li> 
 
            <li><a href="#">Ferrari</a></li> 
 
        </ul> 
 
      </div> 
 
</div> 
 
</footer> 
 
</body> 
 
</html>

источник

2016-12-14 aircraft

Я думаю, это может помочь вам HTTPS://framework7.io/ – Ponja

@Ponja Я не думаю, что это подходит 'jquery-mobile'. – aircraft

Попробуйте использовать Navbar плагин так:

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
 
     <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
     <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 
    </head> 
 
    <body> 
 
     <div data-role="page" id="pageone"> 
 
     <div data-role="header"> 
 
      <h1>Welcome To My Homepage</h1> 
 
     </div> 
 
     <div data-role="main" class="ui-content"> 
 
      <p>My Content..</p> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac metus at quam consectetur feugiat. Quisque blandit vulputate turpis, eu molestie sem dapibus id. Etiam mattis odio quam, id facilisis nisi commodo ac. Duis orci ex, auctor vitae mi quis, elementum dictum leo. Fusce ullamcorper dignissim justo, at facilisis velit facilisis vitae. Sed quis efficitur lorem. Integer in molestie felis. Maecenas cursus tempor consequat. Aliquam dapibus accumsan aliquet. Donec non eleifend mauris. Fusce vitae efficitur purus. Aenean sed imperdiet nibh, et tristique lorem. Donec volutpat sem orci, vel ornare sapien tempus ut. Pellentesque lacinia, libero ac tincidunt vulputate, tortor leo placerat ipsum, ut finibus sem est a nunc. Praesent quis condimentum dolor. 
 
      </p> 
 
     </div> 
 
     <div data-role="footer"> 
 
      <div data-role="navbar"> 
 
       <ul> 
 
        <li><a href="#pageone">Home</a></li> 
 
        <li><a href="#pagetwo">Page Two</a></li> 
 
        <li><a href="#search">Search</a></li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div data-role="page" id="pagetwo"> 
 
     <div data-role="header"> 
 
      <h1>Welcome To Page Two</h1> 
 
     </div> 
 
     <div data-role="main" class="ui-content"> 
 
      <p>This is page two!</p> 
 
     </div> 
 
     <div data-role="footer"> 
 
      <div data-role="navbar"> 
 
       <ul> 
 
        <li><a href="#pageone">Home</a></li> 
 
        <li><a href="#pagetwo">Page Two</a></li> 
 
        <li><a href="#search">Search</a></li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div data-role="page" id="search"> 
 
     <div data-role="header"> 
 
      <h1>Welcome To SEARCH PAGE</h1> 
 
     </div> 
 
     <div data-role="main" class="ui-content"> 
 
      <p>SEARCH!</p> 
 
     </div> 
 
     <div data-role="footer"> 
 
      <div data-role="navbar"> 
 
       <ul> 
 
        <li><a href="#pageone">Home</a></li> 
 
        <li><a href="#pagetwo">Page Two</a></li> 
 
        <li><a href="#search">Search</a></li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </body> 
 
</html>

источник

2016-12-15 07:49:09 jcarrera

Я видел, я тестировал. и мое требование также при нажатии «Главная», «Вторая страница» и «Поиск», я хочу переключить страницу, как это сделать? если вы сделаете эту деталь, это должен быть подтвержденный ответ. – aircraft

Я тестировал, это хорошо – aircraft

Как создать контроллер таблеток, аналогичный iOS tabbarController в jqueryMobile правильно?

ответ

Смежные вопросы