2013-03-30 2 views
0

Мне известны все предыдущие вопросы, которые задают одно и то же.jQuery-mobile Footer issue, снова

Я не пытаюсь изменить какой-либо исходный код, или добавить любой дополнительный стиль в

Согласно этой странице:.

http://view.jquerymobile.com/1.3.0/docs/widgets/navbar/footer-persist-a.php

Все, что мне нужно сделать, это скопировать код и вставьте его в мой HTML.

Я сделал это:

<head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

     <!-- CSS --> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
     <!-- CSS end --> 

     <!-- Javascripts --> 
      <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
      <script type="text/javascript" src="<?php echo base_url('Assets/js/defaults/jquery-mobile.js');?>"></script> 
     <!-- Js End --> 
    </head> 

Вот HTML

<div data-role="page"> 
    <div data-role="header"> 
     <div data-role="navbar"> 
      <ul> 
       <li><a href="#" class="ui-btn-active">One</a></li> 
       <li><a href="#">Two</a></li> 
       <li><a href="#">Three</a></li> 
      </ul> 
     </div><!-- /navbar --> 
    </div> 

    <div data-role="content">  
     <p>Some Content here</p> 
    </div> 

    <div data-role="footer" data-id="foo1" data-position="fixed"> 
     <div data-role="navbar"> 
      <ul> 
       <li><a href="a.html">Info</a></li> 
       <li><a href="b.html">Friends</a></li> 
       <li><a href="c.html">Albums</a></li> 
       <li><a href="d.html">Emails</a></li> 
      </ul> 
     </div><!-- /navbar --> 
    </div><!-- /footer --> 

</div> 

И сноска нигде близко к дну. На самом деле это висит где-то посередине.

Я использую последний мобильный телефон jquery.

Любые идеи? enter image description here

ответ

1

Необходимо установить data-position="fixed" в нижний колонтитул data-role="footer".

Ваш код будет выглядеть следующим образом:

<div data-role="footer" data-position="fixed"> 
    <div data-role="navbar"> 
     <ul> 
      <li><a href="#">One</a></li> 
      <li><a href="#">Two</a></li> 
      <li><a href="#">Three</a></li> 
     </ul> 
    </div><!-- /navbar --> 
    <p style="text-align:center;">I'm the footer</p> 
</div><!-- /footer --> 

Вот рабочая скрипку: http://jsfiddle.net/pV2S4/

+0

она есть. Это не работает. –

+0

Посмотрите на скрипку. нижний колонтитул приклеен к основанию –

+0

в порядке. глупый вопрос. Я ввел неправильную ссылку css. –

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