html - jQuery Mobile Reusing a Header and Navigation

Question

Welcome To Ask or Share your Answers For Others

html - jQuery Mobile Reusing a Header and Navigation

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

html - jQuery Mobile Reusing a Header and Navigation

I'm new to jQuery Mobile and have having issues understanding reusing a header and general navigation.

So I've created a header which has a menu button on the right. On clicking this menu bar a popup appears with links to other pages:

<div data-role="header">
       <h1>Home</h1>
       <a href="#popupMenu" data-rel="popup" data-transition="slide" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-bars ui-btn-icon-right ui-btn-a">Menu</a>
           <div data-role="popup" id="popupMenu"  data-theme="a" style="top: 22px; right: -12px">
                  <ul data-role="listview" data-inset="true" style="min-width:250px; min-height: 698px;">
                      <li><a href="test1.html">Home</a></li>
                      <li><a href="test2.html">Second</a></li>
                 </ul>
           </div>
</div>

I can duplicate this code across all pages but from what I've briefly read jQuery does that for me automatically. Is this true. If not how do i get it to.

Following from this question when it comes to navigating pages and reusing headers is the a href the standard way to do load new pages?

Any help would be appreciated.

Thanks.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-17T00:55:58+0000

You can use External Header and Popup and have them accessible from any page.

Place both div separately inside body not inside any other page. Make sure you don't wrap Popup div in any other div/container but body.

<body>
  <div data-role="header" data-theme="a">
  </div>

  <div data-role="popup">
  </div>

  <div data-role="page">
  </div>
</body>

Since both are External widgets, you need to initialize them manually. Call .toolbar() to initialize Header, and .popup() to initialize Popup. If Popup contains other jQM widgets e.g. listview, you need to call .enhanceWithin() to initialize widgets inside Popup. just add the below code in head.

$(function () {
   $("[data-role=header]").toolbar(); /* initialize header */
   $("[data-role=popup]").popup().enhanceWithin(); /* initialize popup */
});

Demo

Categories

html - jQuery Mobile Reusing a Header and Navigation

html - jQuery Mobile Reusing a Header and Navigation

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags