jQuery Mobile站点中所有页面共有的弹出窗口

时间:2012-08-21 23:09:22

标签: javascript jquery html html5 jquery-mobile

我正在尝试使用jQuery Mobile制作网站。它由HTML文件中的许多页面组成,其中一些页面只有一个页面,其中一些页面有几页(使用multi-page feature)。

该网站将有一些通知弹出窗口,并且它们在所有页面上看起来都是一样的。我正在使用它们new popup feature实现弹出窗口,这似乎是为此目的而设计的。我可以通过在每个页面上放置弹出窗口的副本来轻松实现这一点,但这会产生很多可能难以维护的冗余代码。我可能会让我的服务器在适当的位置为我插入代码,但这似乎很复杂且效率低下。

我尝试将弹出窗口放在页面之外但它们无法可靠地工作(您可以看到示例here)。

我尝试使用模板系统(内置于underscore.js中)来动态生成它们,但看起来它可能会导致问题 - 我必须在关闭时销毁每个弹出窗口以避免内存泄漏。

我不确定这是否是弹出窗口小部件中的错误,这似乎很可能因为弹出窗口小部件仅在jQuery Mobile的alpha版本中。

这里有没有人对如何在几个html文件中创建包含多个页面的网站有任何想法,并且有一些常用于所有页面的弹出窗口?

3 个答案:

答案 0 :(得分:3)

我在jQuery Mobile github上看到了你的请求,并发布了我在我的网络应用程序上使用的解决方案。检查http://ghita.org/jquery/dynamic-mobile-popup这是一个小插件,可以让您拥有动态弹出窗口,它可以让您专注于弹出窗口的内容事件

包含插件( 1.8kb ),然后致电:

$.dynamicPopup({content: 'This is the dynamic content of the popup.'});

内容 - 可以是字符串或jQuery html对象。

检查https://github.com/serbanghita/jQM-dynamic-popup以获取完整的选项列表,其中一些选项继承自jQuery的mobile popup()函数。

这个问题对我来说是一个阻碍,因为我有动态网页,我不关心手动注入HTML内容让popup()处于活动状态。希望你觉得它有用。

答案 1 :(得分:0)

你必须尝试像jqm加载器一样设置它,它也位于div.page之外(否则你将在dom中每页有一个加载器),所以我认为正确的方法是不在页面中包含弹出窗口,但在div.page之外。

因为jqm只会拉入div.pages而且之前/之后没有任何东西你应该能够在每个页面上包含一个通用的popover并且只在dom中有一次。不确定这是在div.page外面工作。

答案 2 :(得分:0)

派对可能会很晚,但对遇到的人可能会有用。

现在,如果您使用的是最新的JQM(我正在使用JQM 1.4.2),您可以使用Global Popup。您只需要在body div下直接声明弹出窗口,在所有数据角色页面外面。

最好通过这个JQM documentation