CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-mobile
Lali Pali
Lali Pali

Reputation: 627

How to use same panel from different html files in jQueryMobile

Is it possible to use a panel defined, in index.html in another page, e.g., resutls.html ? Or do I need to define the panel in every page, and add the same html code in both pages ?

Since I want my panel to be same in all pages.

This is my panel in index.html 

<div data-role="page" id="home">
    <div data-role="panel" id="mypanel">
        <!-- panel content goes here -->
    </div>
    <!-- /panel -->
    <div data-role="header">
        <!-- beginning of header -->
        <div data-role="navbar" data-id="navbar">
            <!-- beginning of presistant navbar, this navbar will be shown in all
            pages -->
            <ul>
                <li> <a href="index.html" data-icon="search" class="ui-btn-active ui-state-persist">Search</a>

                </li>
                <li> <a href="#mypanel" data-icon="bars">More</a>

                </li>
            </ul>
        </div>
        <!-- /navbar -->
    </div>
    <!-- /header -->
    <div data-role="content" id="content">
        <!-- content -->
    </div>
    <!-- /content -->

Upvotes: 1

Views: 1114

Answers (1)

Simon Staton
Simon Staton

Reputation: 4505

If the two pages are on the same domain name you could simply load that element into your new page using JQuery.

However this is not very SEO friendly as your links are being dynamically loaded into the page.

You will need to include the JQuery library then make the div on your new page, lets say:

<div class="new-sidebar"></div>

Then load its contents with JQuery $('.new-sidebar').load('index.html #mypanel');

Edit from comment:

$( "#navbar ul li" ).click(function() {
  $('.new-sidebar').load('index.html #mypanel');
});

Upvotes: 1

Related Questions