CODEWITHSUNDEEP
jquery-mobile
matthewbaskey
matthewbaskey

Reputation: 1037

Jquery Mobile 1.4.2 external panel...where is the code?

I am looking at the JQuery Mobile website, and there is an entry for external Panels here

However it shows it working but when I look at the code it is very long and complex and I am just looking for a snippet which will do allow 1 panel to be on multiple pages. It appears that the javascript for this page is part of all the code for the demos on the site.

I was hoping someone would know which part is relevant.

Upvotes: 0

Views: 265

Answers (1)

Beginner
Beginner

Reputation: 1424

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>

  <!--Multiple 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.

Hope this clears your doubt.

A nice demo over here

Demo

Upvotes: 3

Related Questions