如何在弹出窗口中显示jQuery页面？ [英] How to show a jQuery page inside a popover?
问题描述
我正在使用jQuery Mobile开发iPad应用程序。
我想要一个带有按钮的工具栏，单击时会显示一个弹出窗口。
经过一些搜索，我发现了这个 changePage选项，用于启用面板导航并集成到JQM和浏览器历史记录中。
我还没有完成插件的popover版本，所以目前你必须像这样设置你的页面：
< div data-role =pageid =YOUR_IDdata-wrapper =true>
< div data-role =paneldata-id =my_main_panel_iddata-panel =main>
< div data-role =pageid =page_A1data-show =first>
< div data-role =headerdata-position =fixed>
< h1> Local Header< / h1>
< div data-role =controlgroupdata-type =horizontalclass =iconposSwitcher-div>
< a href =＃data-transition =popdata-role =buttondata-panel =pop_onedata-icon =infodata-iconpos =leftclass = toggle_popover> POP1< / A>
< / div>
< / div>
< div data-role =content>< / div>
< / div>
< / div>
< div data-role =paneldata-id =pop_onedata-panel =popoverdata-triangle =topclass =popover1>
< div data-role =pageid =page_D1data-show =first>
< div data-role =headerdata-position =fixeddata-theme =a>
< h1> Pop< / h1>
< / div>
< div data-role =content>< / div>
< / div>
< div data-role =pageid =page_D2>
< div data-role =headerdata-position =fixeddata-theme =a>
< h1>弹出内部网页< / h1>
< / div>
< div data-role =content>< / div>
< / div>
< / div>
< / div>
所以要使用popovers，你需要
- 将 data-wrapper =true添加到您的页面以初始化插件
- 使用全宽主背景面板
- 面板需要一个角色= data-role =panel，类型 data-panel =main | mid | menu | popover和数据ID data-id =your_panel_name
- 每个面板上的一个页面需要 data-show =first，没有它你的面板将是空白的
- 你可以在你的包装页面中添加任意数量的popover面板
- 你可以添加为您想要的弹出窗口中有许多嵌套页面
- 当您加载页面时，嵌套页面不需要在板上。您可以通过链接或更改页面调用将它们拉入JQM。
-
将页面拉入或链接到面板内的页面，更改页面如下：
$ .mobile.changePage（'＃pop_two'，{transition：'slide'，pageContainer：$（'div：jqmData（id = your_panel_name）'）}）;
-
或使用指定数据面板的链接：
< a href =＃pop_twodata-panel =your_panel_name>按钮< / a>
- 无需在首页加载时包含所有弹出页面。您可以像常规JQM一样将它们拉出来，一旦用户离开或弹出窗口关闭，它们将被再次删除。
- 要切换弹出窗口，您需要一个类型为 toggle_popover的切换按钮和 data-panel =your_panel_name告诉插件哪个popover要打开。
- 在智能手机上你的popover将是全屏页面
该插件仍有一些错误，需要一个带有4个小调整的自定义JQM版本（最重要的是将pageContainer添加到JQM历史记录中），但除此之外它工作正常。
I'm using jQuery Mobile to develop an iPad app. I want to have a toolbar with a button that displays a popover when clicked. After some search I found this jQuery popover implementation. It works fine but without any styling for the header or content. I then made some tweaks and decided to set only a content which would be a regular jQuery page like this:
<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>
The problem is that it displays an empty popover. A simplified code is here and can be executed by opening index.html on a webkit browser (I tested only on Safari and Chrome) and clicking Add button.
jquery.popover.js contains popover related code.
app.js creates the popover for the Add button.
Any help would be appreciated.
Thanks.
If you just need content inside a popover, you should use the upcoming popup widget as @Phill Pafford mentions.
If you want full pages inside a popover you can try multiview, which I'm almost done developing.
Here is one of my test pages which also has a popover (top right).
Popovers are panels, which use the JQM pageContainer changePage option to enable panel navigation and integration into the JQM and browser history.
I have not done a popover only version of the plugin so currently you would have to set up your page like this:
<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>
So to use popovers, you will need to
- add data-wrapper="true" to your page to init the plugin
- use a fullwidth main background panel
- panels need a role = data-role="panel", a type data-panel="main|mid|menu|popover" and a data-id data-id="your_panel_name"
- one page on each panel needs data-show="first", without it your panels will be blank
- you can add as many popover panels as you want inside your wrapper page
- you can add as many nested pages inside your popovers as you want
- nested pages don't need to be "on board" when you load the page. You can pull them in like JQM through links or changePage calls.
to pull a page in or link to and from a page inside a panel, changePage like this:
$.mobile.changePage('#pop_two', {transition: 'slide', pageContainer: $('div:jqmData(id="your_panel_name")') });or using links with data-panel specified:
<a href="#pop_two" data-panel="your_panel_name">Button</a>- there is no need to include all popover pages at first page load. You can pull them in like regular JQM and they will be removed again once the user leaves or the popover closes.
- to toggle a popover you need a toggle button with class of toggle_popover and data-panel="your_panel_name" to tell the plugin which popover to open.
- on smartphones your popovers will be fullscreen pages
The plugin still has some bugs and requires a custom JQM version with 4 small tweaks (most important adding pageContainer to the JQM history), but other than that it's working ok.
这篇关于如何在弹出窗口中显示jQuery页面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
