All geek questions in one place

JQuery Mobile styles do not apply to elements outside of data-role = "page"

In my jQM application, I have a header that I want to keep. Due to a problem with fixed headers in jQM, I decided to create this structure:

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body style="overflow:hidden;"> <div data-role="navbar"> <ul> <li><a href="#page1" class="ui-btn-active">One</a></li> <li><a href="#page2">Two</a></li> </ul> </div> <div id="page1" data-role="page" style="top:80px"> <div data-role="content"> Page1 <input type="button" value="Click"/> </div> </div> <div id="page2" data-role="page" style="top:80px"> <div data-role="content"> Page2 <input type="button" value="Click2"/> </div> </div> </body> </html>

The goal is to keep the navigation bar at the top. When you click the appropriate tab, it should load the page. Since I gave padding-top for the data-role="page" div, it will display as if the title were fixed at the top. But it does not work as intended, in the sense that the data-role="navbar" do not apply to the title in the title.

Any solution to make it work. Thanks in advance.

Demo here - http://jsfiddle.net/UPZrs/

+4
source share
3 answers

You can use the "navbar" plugin: $("div:jqmData(role='navbar')").navbar();

http://jsfiddle.net/UPZrs/1/ You still need to do some layout adjustments

Remember that position:fixed not well supported in all mobile browsers

+1
source

I had the same problem. I ended up just grabbing HTML from my navigator after jQuery Mobile styled it (via FireBug), and I used this code that looks something like this:

 <div id="edge_menu"> <ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow"> <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-corner-top ui-btn-up-c"> <div class="ui-btn-inner ui-li ui-corner-top" aria-hidden="true"> <div class="ui-btn-text"> <a href="/m/default.html" class="ui-link-inherit">Home</a> </div> <span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span> </div> </li> </ul> </div>

If you study the classes that jQuery Mobile adds, it's actually pretty easy to change classes to change themes or rounding / shadow options.

Another workflow that I found to work is having your menu inside the data-role="page" div when the page loads, let jQuery Mobile stylize the page, and then move the div menu from the data-role="page" div to be a child of the body tag.

+2
source

An interesting problem. I like the navigation system, but the content is changing. It may be something that JQM may offer in the future. Here is my attempt to use the @GerjanOnline method, but the problem in jQM is to rearrange the page every time so that it looks disgusting. Here is an attempt, but as you can see, jQM still uses only what "rows the page tag". I just show the elements behind the page by clicking them:

Perhaps this will give you an idea of ​​how to compile them using jQM controls.

Added function request: https://github.com/jquery/jquery-mobile/wiki/Feature-Requests

+1
source

Source: https://habr.com/ru/post/1382668/

More articles:


All Articles