Jquery - Extra Click Required After Selecting Menu Item
Solution 1:
I believe you need a simple example of navigating pages with a hamburger menu, so here is it:
$(function(){
$( "#hamburgerPopup" ).enhanceWithin().popup({
theme: "a",
transition: "turn",
history: false,
positionTo: "origin",
beforeposition: function( event, ui ) {
var currPageId = $(":mobile-pagecontainer").pagecontainer("getActivePage").prop("id");
$("#hamburgerPopup li").removeClass("ui-state-disabled");
$("#hamburgerPopup a[href='#"+currPageId+"']").parent().addClass("ui-state-disabled");
}
});
$("[data-role='header'], [data-role='footer']").toolbar({
theme: "a",
position: "fixed",
tapToggle: false
});
});
$(document).on("pagecontainerchange", function() {
$("[data-role='header'] h2" ).text($(".ui-page-active").jqmData("title"));
});<!DOCTYPE html><html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1, user-scalable=no"><linkrel="stylesheet"href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"><scriptsrc="https://code.jquery.com/jquery-1.11.2.min.js"></script><scriptsrc="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script></head><body><divdata-role="header"><ahref="#hamburgerPopup"data-rel="popup"class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-bars ui-btn-icon-notext"aria-haspopup="true"aria-owns="popupMenu"aria-expanded="false">View</a><h2>Header</h2></div><divdata-role="page"data-title="Calculator"id="page-calculator"><divdata-role="content">
Calculate Weight
</div></div><divdata-role="page"data-title="FAQ"id="page-faq"><divdata-role="content">
Read FAQ
</div></div><divdata-role="footer"><h2>Footer</h2></div><divdata-role="popup"id="hamburgerPopup"data-theme="a"><uldata-role="listview"data-inset="true"><lidata-icon="false"><ahref="#page-calculator">Calc Weight</a></li><lidata-icon="false"><ahref="#page-faq">FAQ's</a></li></ul></div></body></html>Explanation:
Header, footer and hamburger menu are outside of all the pages, so we need to initialize the widgets by hand, in code. Instead of using data tags, i'm using the many options available at initialization of the widgets, so i removed some of the data tags in markup, as they aren't necessary anymore.
Page navigation & Popup close: is already handled by jQuery Mobile through the anchor tags, no need to write JavaScript code here to hide the popup nor to switching from one page to another.
Some simple additional nice-to have features:
Disabling the menu item of the page where we already are: this is done in Popup beforeposition by adding or removing the proper jQM classes to the listview which builds the hamburger menu.
Page title: as the header is common to all pages, we need to manually set the title. I'm using here a custom tag: data-title: which stores the information of the text to display at page switching.
Hope this helps!
Post a Comment for "Jquery - Extra Click Required After Selecting Menu Item"