面板无法在使用 JQuery Mobile 的所有页面中工作 [英] panel not working in all pages using JQuery Mobile
问题描述
朋友们,我是 jQuery Mobile 的新手,我正在尝试通过使用 jquery mobile 创建网站来学习东西.问题是我使用 data-role="panel"
在我的页面上显示导航它工作正常但是当我跳转到另一个位于同一 HTML 文件中的页面时它停止工作我不知道是什么破解这个问题需要你的帮助.您可以在这里查看小提琴.在主页面板上工作正常,但当我点击关于我们页面时,它跳转到那里但面板停止工作
请帮帮我.. 提前致谢:)
如果你想从任何页面访问同一个面板,你必须将面板 div 放在任何 data-role="page"
,然后你必须手动初始化它.这称为外部面板.
<div data-role="panel" id="foo" data-theme="a"><!-- 内容-->
<!-- 这里的页面-->
注意外部面板不会自动继承主题,因此需要添加data-theme
属性.
.enhanceWithin()
函数用于增强面板内的所有小部件.它们不会自动初始化,因此需要对其进行初始化.
$(function () {$("[数据角色=面板]").enhanceWithin().panel();});
将该代码放在 JQM 库之后的头部.
<块引用>Hi friends I am new in jQuery mobile and trying to learns things by creating a website using jquery mobile. The problem is I used data-role="panel"
to show navigation on my page its working fine but when i jump to another page which is in same HTML file its stop working I dont know what is the matter for crack this issue need your help. You can check fiddle here. On home page panel work fine but when i click on about us page its jump there but panel stops working
Please help me guys .. Thanks in advance :)
If you want to access the same panel from any pages, you have to place panel div outside any data-role="page"
, and then you have to initialize it manually. This is called an external panel.
<body>
<div data-role="panel" id="foo" data-theme="a">
<!-- contents -->
</div>
<!-- pages here -->
</body>
Note that an external panel doesn't inherit theme automatically, thus, you need to add data-theme
attribute to it.
The .enhanceWithin()
function is to enhance all widgets inside the panel. They aren't auto-initialized, so they need to be initialized.
$(function () {
$("[data-role=panel]").enhanceWithin().panel();
});
Place that code in head after JQM library.
这篇关于面板无法在使用 JQuery Mobile 的所有页面中工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!