panel not working in all pages using JQuery Mobile
Question
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 :)
1 answers
solution1
10 ACCPTED 2014-02-18 14:57:56
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.