CODEWITHSUNDEEP
jqueryjquery-mobilepanel
Kamal
Kamal

Reputation: 2180

panel not working in all pages using JQuery Mobile

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 :)

Upvotes: 2

Views: 2944

Answers (1)

Omar
Omar

Reputation: 31732

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.

Demo

Upvotes: 10

Related Questions