Geek Answers Handbook

Jquery mobile left menu

In all jQuery Mobile documents, they use the menu on the left to navigate, which changes to a more mobile version when the browser width is less. You can see an example on this page.

They use this layout in documents, and I see in the source that they use two divs with the identifiers "content-primary" and "content-secondary". My question is related to the fact that I can not find anything about this structure, which is actually discussed in the documentation. It seems very strange that they would not include such a useful widget in the Framework. Did they use custom code to do this, or did I skip it in the documentation this way?

+4
source share
3 answers

I am frankly surprised to see how difficult it is to find a left navigation example that works sequentially and as expected in JQM.

I ended up copying the code directly from JQM documents, including grabbing their custom .js and .css scripts (which defines the .content-primary and .content-secondary classes, as well as various @media queries that make the menu responsive).

JQM documents do not use the multi-page format. Instead, each element of the navigation menu refers to a completely separate URL (presumably preloaded in the DOM, adding data-prefetch="true" to the link), so each new page / URL should redefine the same navigation menu again.

This immediately makes my brain developers think "allow the abstract menu and turn it on every page automatically." But how to "include" the menu on each page without PHP (or another server)? This is a problem that I have not solved yet.

You can call the function $(document).bind('pageinit', to manually enter your menu on the download page using javascript / jquery, but I still have to figure out how to do this correctly.

I will keep you posted if / when I have a workable solution.

0
source

This is not really the case with jQuery mobile, it's CSS3. You can check the documentation here: http://www.css3.info/preview/media-queries/ . Essentially, they define style rules for different screen widths using a media query, as shown in this example:

 @media all and (min-width: 650px) { // you can define your width here // style rules here }
0
source

Are you talking about something like the left menu at http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/panels/panel-nav-form.html# ? They didn’t play with him, but it seems that these days he’s just taking

 <div data-role="panel" data-position="left" data-position-fixed="false" data-display="reveal">
0
source

More articles: