2012-05-25 2 views
6

я пытался реализовать split view используя образец кода JQuery mobile Phone gapiPhone JQuery: Как реализовать Разделить в IPad с помощью Jquery Mobile + телефон разрыв в iPhone

вindex.html

<head> 
     <link rel="stylesheet" href="inc/jquery.mobile.structure-1.0.1.min.css" /> 
     <link rel="stylesheet" href="inc/jquery.mobile-1.0.1.min.css" /> 
     <link rel="stylesheet" href="inc/resources/css/jquery.toastmessage.css" /> 

     <script type="text/javascript" src="inc/jquery-1.7.1.min.js"></script> 
     <script type="text/javascript" src="inc/jquery.mobile-1.0.1.min.js"></script> 

     <script type="text/javascript" src="inc/phonegap-1.2.0.js"></script> 
    </head> 

    <body> 

     <div data-role="page" data-theme="c"> 
      <div data-role="header"> 
       Mpbile Split View 
      </div> 

      <div data-role="content"> 

       <!--- Left side view------> 
       <div class="left-content"> 
        <h3>lef hand content</h3> 
        <ul data-role="listview"> 
         <li>One</li> 
         <li>One</li> 
         <li>One</li> 
         <li>One</li> 
        </ul> 
       </div> 

       <!--- Right side view------> 
       <div class="right-content"> 
        <h3>Right hand content</h3> 
        <ul data-role="listview"> 
         <li>Two</li> 
         <li>Two</li> 
         <li>Two</li> 
         <li>Two</li> 
        </ul> 
       </div> 
      </div> 
     </div> 


    </body> 
</html> 

Но это показывает, как взгляд на одной странице один на один сверху вниз, как показано ниже

enter image description here

мне нужны две таблицы как split viewодин в левой стороне (root view) и прочее с правой стороны (details view)

как можно использовать jQuery? заранее заранее

+0

Что в вашем CSS? – Grumpy

ответ

1

Вы можете использовать http://jeromeetienne.github.com/jquery-mobile-960/ и разделить его на эти решетки.

Если вы знаете 960.gs или любые другие рамки сетки css, это будет очень легко для вас. Существует демонстрация использования на указанном сайте.

+0

Это проект GitHub, который не обновлялся через 3 года. Документация кажется очень хорошей, и главная страница служит примером того, как она работает. С другой стороны, кажется, немного переборщить, если все, что вам нужно, это разделить экран iPod пополам. Наконец, есть пятимесячный комментарий, который все еще не отвечает, спрашивает, будет ли он обновлен для поддержки последних версий jQuery. Я говорю «Нет!» – samwyse

1

Попробуйте использовать мой multiview plugin.

Он позволяет 1/2/3 панели бок о бок и панели Popover в JQuery Mobile. Я не пробовал это с помощью PhoneGap (просто заканчивая JQM 1.1), поэтому, если вы попробуете, сообщите мне, если это сработает (я должен догадаться).

Пожалуйста, используйте версию 1.1 и JQM 1.1.multiview, для чего требуется несколько настроек.

В настоящее время я делаю новый README и образец сайта. Должно быть, через несколько дней.

+0

awesome - работает как шарм. Спасибо, что поделился. – dirkk0

+0

Это проект GitHub, который не обновлялся через 2 года, до сих пор не имеет файла README или какой-либо другой документации, которую я могу видеть, и до сих пор нет указателей на образец сайта. Я говорю «Нет!« – samwyse

+0

Если вы можете позволить себе время, чтобы обеспечить любой из вышеперечисленных, не стесняйтесь вилки, обновления и обслуживания, потому что я в настоящее время не могу ... – frequent

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