jQuery мобильная страница, выходящая из мобильного экрана

На самом деле я разрабатываю приложение Android для мобильного телефона, используя jQuery mobile , в котором я разработал страницу, которая выходит из экрана эмулятора и устройства. Пожалуйста, помогите, я искал, но не понимаю, как сохранить его в пределах телефона.jQuery мобильная страница, выходящая из мобильного экрана

<!DOCTYPE html> 
<html> 
<head> 
<title>Page Title</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
    href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> 

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script 
    src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> 
</head> 

<body> 

    <div data-role="page" id="device1"> 
     <div data-role="header" style="text-align: center;">Message one</div> 
     <div data-role="content"> 
      <table width="100%" cellpadding="5" cellspacing="0" border="0"> 
       <tr> 
        <td align="left">InfodeepIndians</td> 

        <td align="right" colspan="2">3 Minutes ago</td> 
       </tr> 

       <tr> 
        <td colspan="3" align="justify">Samsung pioneered the trend of 
         a new breed of devices, now more commonly known as 
         'phablets',smartphones that are (almost) nearing tablets in size.</td> 
       </tr> 
       <tr> 
        <td align="left">By panel.</td> 
        <td align="center">21.12%</td> 
        <td align="right">21/30</td> 
       </tr> 
       <tr> 
        <td align="left" col><input type=text></td> 
        <td align="center"><input type=text></td> 
        <td align="right"><input type=text></td> 
       </tr> 
       <tr> 
        <td align="left" col><input type=button value="Nos Limit"></td> 
        <td align="center"><input type=button value="% delivery"></td> 
        <td align="right"><input type="button" value="% match"></td> 
       </tr> 
      </table> 


     </div> 
     <div data-role="footer" style="text-align: center;">@Copyrights</div> 
    </div> 
</body> 
</html>

источник

2013-02-22 Anonymous

Попробуйте 'Layout gird' вместо таблиц. http://jquerymobile.com/demos/1.2.0-beta.1/docs/content/content-grids.html – Omar

Замените стол гибкой сеткой jQuery.

Вы можете использовать текущую реализацию сетки, и она будет выглядеть следующим образом: http://jsfiddle.net/Gajotres/xftPB/

<!DOCTYPE html> 
<html> 
<head> 
<title>Page Title</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"/> 
<link rel="stylesheet" 
    href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> 

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script 
    src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> 
</head> 

<body> 

    <div data-role="page" id="device1"> 
     <div data-role="header" style="text-align: center;">Message one</div> 
     <div data-role="content"> 
      <div class="ui-grid-b"> 
       <div class="ui-block-a">InfodeepIndians</div> 
       <div class="ui-block-b"></div> 
       <div class="ui-block-c" style="text-align: right;">3 Minutes ago</div> 
      </div><!-- /grid-b --> 
      <p style="text-align:justify;">Samsung pioneered the trend of 
         a new breed of devices, now more commonly known as 
         'phablets',smartphones that are (almost) nearing tablets in size.</p> 
      <div class="ui-grid-b"> 
       <div class="ui-block-a">By panel.</div> 
       <div class="ui-block-b">21.12%</div> 
       <div class="ui-block-c">21/30</div> 
      </div><!-- /grid-b -->    
      <div class="ui-grid-b"> 
       <div class="ui-block-a"><input type="text"></div> 
       <div class="ui-block-b"><input type="text"></div> 
       <div class="ui-block-c"><input type="text"></div> 
      </div><!-- /grid-b --> 
      <div class="ui-grid-b"> 
       <div class="ui-block-a"><input type=button value="Nos Limit"></div> 
       <div class="ui-block-b"><input type=button value="% delivery"></div> 
       <div class="ui-block-c"><input type="button" value="% match"></div> 
      </div><!-- /grid-b -->    
     </div> 
     <div data-role="footer" style="text-align: center;">@Copyrights</div> 
    </div> 
</body> 
</html>

В случае необходимости большей гибкости сетки использовать эту 3-й реализацию партии сетки для JQuery Mobile: http://jeromeetienne.github.com/jquery-mobile-960/

источник

2013-02-22 12:07:49 Gajotres

Я не компилировать код, но вы можете изменить версию JQuery для Jquery-1.7.1.min.js, Jquery 9 имеет так много изменений. Если исправить, пожалуйста, дайте мне знать

источник

2013-02-22 11:47:07 Ranjith

Использования Grids является более надежным, чем использование tables в JQuery Mobile.

ui-grid-b состоит из 3-х столбцов.

Ниже приведен пример

<div class="ui-grid-b"> 
<!-- First row--> 
     <div class="ui-block-a"><input type=text></div> 
     <div class="ui-block-b"><input type=text></div> 
     <div class="ui-block-c"><input type=text></div> 
<!-- Second row--> 
     <div class="ui-block-a"><input type=button value="Nos Limit"></div> 
     <div class="ui-block-b"><input type=button value="% delivery"></div> 
     <div class="ui-block-c"><input type="button" value="% match"></div> 
</div>

JSfiddle: Grids

источник

2013-02-22 12:10:20 Omar

jQuery мобильная страница, выходящая из мобильного экрана

ответ

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