javascript - Shared footer between different pages (When using data-role="page" in JQuery) -


I have a shared div footer that all its internal elements should be similar to both pages.

  & lt; Div id = "page1" data-role = "page" & gt; & Lt; / Div & gt; & Lt; Div id = "page2" data-role = "page" & gt; & Lt; / Div & gt; & Lt; Div id = "bar" data-roll = "footer" class = "shared slides" & gt; & Lt; / Div & gt; Later, I will replace Page 1 using $ .mobile.navigate ('# page2') and I do not want to share the shared foot footer to the page's functionality and styles. (#bar) How is this possible?   

jQuery mobile has two page templates.

Each page is placed in the same HTML file, as in your case it is also called a multipage template.

Others have 1 HTML page per 1 HTML file. And this is called Multi-HTML Template.

Read more about them.

What you need is a multi-templates templates. Here's an example of working:

HTML 1 - index.html:
  & lt ;! DOCTYPE html & gt; & Lt; Html & gt; & Lt; Top & gt; & Lt; Meta charset = "UTF-8" /> & Lt; Meta name = "viewport" content = "widdiv = device-widdiv, initial-level = 1.0, max-scale = 1.0, user-scalable =" /> & Lt; Meta name = "apple-mobile-web-app-enabled" content = "yes" /> & Lt; meta name = "apple-mobile-web-app-status-bar-style" content = "black" / & gt; & Lt; Title & gt; & Lt; / Title & gt; & Lt; Link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> & Lt; Script src = "http://www.dragan-gaic.info/js/jquery-1.8.2.min.js" & gt; & Lt; / Script & gt; & Lt; Script src = "http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js" & gt; & Lt; / Script & gt; & Lt; Script & gt; $ (Document) .on ('pagebeforeshow', '#index', function () {$ (document) .on ('click', "#changePage", function () {$ .mobile.changePage ('second.html ', {dataUrl: "second.html? paremeter = 123", data: {' parammetor ':' 123 '}, reload page: false, changed hash: true});});}); $ (Document) .on ('pagebeforeshow', "#second", function () {var parameter = $ (this) .data ("url"). Partition ("?") [1] ;; parameter = parameter replaced Do ("parameter =", ""); warning (parameter);}); & Lt; / Script & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt ;! - Home - & gt; & Lt; Div data-role = "page" id = "index" & gt; & Lt; div data-role = "header" & gt; & Lt; H3 & gt; First page & lt; / H3 & gt; & Lt; / Div & gt; & Lt; Div data-role = "content" & gt; & Lt; A data-role = "button" id = "change page" & gt; Javascript Change Page Example & lt; / A & gt; & Lt; A href = "second.html" data-transition = "slide" & gt; Direct link button & lt; / A & gt; & Lt; / Div & gt; & Lt; -! Content - & gt; & Lt; / Div & gt; & Lt ;! - Page - & gt; & Lt; / Body & gt; & Lt; / Html & gt;   

HTML 2 - second.html:
  & lt ;! DOCTYPE html & gt; & Lt; Html & gt; & Lt; Top & gt; & Lt; Meta charset = "UTF-8" /> & Lt; Meta name = "viewport" content = "widdiv = device-widdiv, initial-level = 1.0, max-scale = 1.0, user-scalable =" /> & Lt; Meta name = "apple-mobile-web-app-enabled" content = "yes" /> & Lt; meta name = "apple-mobile-web-app-status-bar-style" content = "black" / & gt; & Lt; Title & gt; & Lt; / Title & gt; & Lt; Link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> & Lt; Script src = "http://www.dragan-gaic.info/js/jquery-1.8.2.min.js" & gt; & Lt; / Script & gt; & Lt; Script src = "http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js" & gt; & Lt; / Script & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt ;! - Home - & gt; & Lt; Div data-role = "page" id = "second" & gt; & Lt; div data-role = "header" & gt; & Lt; H3 & gt; Second page & lt; / H3 & gt; & Lt; / Div & gt; & Lt; Div data-role = "content" & gt; & Lt; / Div & gt; & Lt; -! Content - & gt; & Lt; / Div & gt; & Lt ;! - Page - & gt; & Lt; / Body & gt; & Lt; / Html & gt;   

There is one more thing that you should know. Only the first HTML file can have an internal internal data-role = "page" in each other HTML page only 1 data-role = " Page " . The reason for this is if you need more information then give me a comment.

Comments

Popular posts from this blog

Verilog Error: output or inout port "Q" must be connected to a structural net expression -

jasper reports - How to center align barcode using jasperreports and barcode4j -

c# - ASP.NET MVC - Attaching an entity of type 'MODELNAME' failed because another entity of the same type already has the same primary key value -