Geek Answers Handbook

Jquery mobile only replaces div content

I work with jQuery mobile, and I like the concept of multiple pages, where you can replace a hole page with another page just by referencing their id.

now my application has navbar (of course), and I hate it when I click the link on the navigation bar, the whole page moves to the left (including the navigation bar) and the other page goes from right.

I just want to replace the contents of the div, the navigation bar should be docked at the bottom without updating all the time! do you know what i mean if I just refer to the id div of the content, it does not work, as I refer to the page id.

I hope you know what I mean. so how can i handle this?

+5
source share
4 answers

One way to do this is to override the clicklink event and replace the contents of the div (target) with the new content. Doing this in jQuery is trivial, for example.

 $('#replacement-target').html( $('#source-content').html() );

To play along with jQuery, you may need to call refreshin the content to make sure that it is properly designed by the framework.

See the jsFiddle example for an example.

+3
source 
$('#replacement-target-page-id div[data-role="content"]').replaceWith(
    function(return$('#source-content-page-id div[data-role="content"]').contents();)
+1
source

  $.mobile.defaultPageTransition = 'none';

. http://jquerymobile.com/test/docs/toolbars/bars-fixed.html

. , jqm, jqm, . .

0

What worked for me was to save the title / navigator from the pages using external headers. That way, I can still use jquery page transitions and save a static navigation bar.

External toolbars are described here - http://demos.jquerymobile.com/1.4.4/toolbar-external/

I had to initialize the navigation bar and any other component of I so that it did not contain the DOM page. in this case the menu bar. Here's what the jqm documentation code looks like:

<div data-role="header" data-position="fixed"></div>
<div data-role="footer" data-position="fixed"></div>
<div data-role="panel" data-position-fixed="true" data-display="overlay" id="menu-panel"></div>
<div data-role="page" id="home">
    <div role="main" class="ui-content"></div>
</div>

<script>
$(function(){
    $( "[data-role='header'], [data-role='footer']" ).toolbar();
    $( "[data-role='panel']" ).panel();
});
</script>
0
source

More articles:


All Articles