Как показать страницу jQuery внутри popover?

Question

Я использую jQuery Mobile для разработки iPad-приложения. Я хочу иметь панель инструментов с кнопкой, которая отображает popover при нажатии. После некоторого поиска я нашел это jQuery popover implementation. Он отлично работает, но без какого-либо стиля для заголовка или содержимого. затем я сделал некоторые хитрости и решил установить только содержание, которое будет регулярно JQuery страницы, как это:

<div id="popover-add-project" data-role="page" data-url="popover-add-project"> 
    <div data-role="header" data-position="fixed"> 
    <h1>Add New Project</h1> 
    </div><!-- /header -->  
    <div data-role="content"> 
    <p>project form to be inserted here</p> 
    </div> 
</div> 

Проблема заключается в том, что он отображает пустой поповер. Упрощенный код here и может быть выполнен путем открытия index.html в браузере webkit (я тестировал только в Safari и Chrome) и нажав кнопку «Добавить».

jquery.popover.js содержит код, связанный с popover.

app.js создает popover для кнопки «Добавить».

Любая помощь будет оценена по достоинству.

Спасибо.

Answer 1

Если вам просто нужно содержимое внутри пирог , вы должны использовать предстоящий виджет popup как @Phill Paf Форд упоминает.

Если вы хотите, чтобы полные страницы внутри popover вы могли попробовать multiview, что я почти делаю.

Вот один из моих test pages, который также имеет popover (вверху справа).

Popovers являются панели, которые используют опцию JQM pageContainer changePage, чтобы включить панель навигации и интеграции в JQM и браузер истории.

Я не сделал поповер только версию плагина, так в настоящее время вы должны создать свою страницу, как это:

<div data-role="page" id="YOUR_ID" data-wrapper="true"> 

    <div data-role="panel" data-id="my_main_panel_id" data-panel="main"> 

     <div data-role="page" id="page_A1" data-show="first"> 

      <div data-role="header" data-position="fixed"> 
       <h1>Local Header</h1> 
       <div data-role="controlgroup" data-type="horizontal" class="iconposSwitcher-div"> 
        <a href="#" data-transition="pop" data-role="button" data-panel="pop_one" data-icon="info" data-iconpos="left" class="toggle_popover">pop1</a> 
       </div> 
      </div> 
      <div data-role="content"></div> 
     </div> 
     </div> 

     <div data-role="panel" data-id="pop_one" data-panel="popover" data-triangle="top" class="popover1"> 
      <div data-role="page" id="page_D1" data-show="first"> 
       <div data-role="header" data-position="fixed" data-theme="a"> 
        <h1>Pop</h1> 
       </div> 
       <div data-role="content"></div> 
      </div> 
    <div data-role="page" id="page_D2"> 
       <div data-role="header" data-position="fixed" data-theme="a"> 
        <h1>Pop internal page</h1> 
       </div> 
       <div data-role="content"></div> 
      </div> 
     </div> 
    </div> 

Так использовать Popovers, вам нужно

• добавить данные обертки = «истина» на страницу для инициализации плагина
• используйте Полноширинную основной фон панель
• панели s нужна роль = данных роли = «панель», тип панели данных = «главная | середине | меню | поповер» и данных идентификатор данных ID = «your_panel_name»
• один страница на каждой панели необходимо данных-шоу = «первый», без него ваши панели будут пустыми
• вы можете добавить столько поповер панелей, как вы хотите внутри оберточной страницы
• вы можете добавить столько вложенных страниц внутри ваши popovers, как вы хотите
• Вложенные страницы не должны быть «на борту» при загрузке страницы. Вы можете вытащить их, как JQM, через ссылки или вызовы changePage.

• тянуть страницу в или ссылку и со страницы внутри панели, changePage так:

  $.mobile.changePage('#pop_two', {transition: 'slide', pageContainer: $('div:jqmData(id="your_panel_name")') }); 
  

• или с помощью ссылки с данных панели указанный:

  <a href="#pop_two" data-panel="your_panel_name">Button</a> 
  

• нет необходимости включать все страницы popover при загрузке первой страницы. Вы можете вытащить их, как обычный JQM, и они будут удалены снова, как только пользователь уйдет, или popover закроется.
• для переключения поповера вам нужна кнопка переключения с классом toggle_popover и данных панели = «your_panel_name» сказать плагину, который поповер открыть.
• на смартфонах ваши Popovers будут полноэкранные страницы

Плагин все еще имеет некоторые ошибки и требует версии пользовательских JQM с 4 маленьких ухищрений (наиболее важное добавление pageContainer к истории JQM), но кроме того, что он работает ОК.

Answer 2

data-role="page" набор атрибутов css display до none. поэтому добавьте display: block атрибут внутри стиля #popover-add-project.

<div style="display: block" id="popover-add-project" data-role="page" data-url="popover-add-project">

Answer 3

Вы можете начать играть с следующей jQM итерации (1.2) Всплывающее функциональность

• http://jquerymobile.com/test/docs/pages/popup/index.html