I have a page with a navBar and a footer like the screenshot :
The code simplify of this page, which is the same for the pages agenda / people / info is :
<div data-role="page" data-id="access-dataid" id="page-infos-access" data-theme="a">
<div data-role="header" data-id="header-app" data-position="fixed">
<div data-role="navbar" data-id="head-navbar">
<ul>
<li>Access</li>
<li>Contact</li>
</ul>
</div>
</div>
<div data-role="content" data-theme="a">
</div>
<div data-role="footer" data-id="f1" class="custom-tabbar-icon" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Agenda</li>
<li>People</li>
<li>Infos</li>
</ul>
</div>
</div>
</div>
<div data-role="page" data-id="contact-dataid" id="page-infos-contact" data-theme="a">
<div data-role="header" data-id="header-app" data-position="fixed">
<div class='ui-title'>
<div data-role="navbar" data-id="head-navbar">
<ul>
<li>Access</li>
<li>Contact</li>
</ul>
</div>
</div>
<div data-role="content" data-theme="a">
</div>
<div data-role="footer" data-id="f1" class="custom-tabbar-icon" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Agenda</li>
<li>People</li>
<li>Infos</li>
</ul>
</div>
</div>
</div>
Basically for the navBar menu I hide and show part of the html but I don't load a new page. Everything works fine, I can change from the navBar item "Access" to "Contact".
The problem is when I click at the bottom, and load a new page like "people.html", the navBar items which use exactly the same system don't work. I see the new page but when I click on the top item, nothing happen, like the JS bug...
Any idea ?
Related
I try to use this on my web app http://tympanus.net/codrops/2014/09/02/tab-styles-inspiration/comment-page-1/#comments it works fine, but now what I need is to load a new page and select the fine tab.
So instead of this dynamic stuff:
<section>
<div class="tabs tabs-style-topline">
<nav>
<ul>
<li><span>Home</span></li>
<li><span>Deals</span></li>
<li><span>Upload</span></li>
<li><span>Work</span></li>
<li><span>Settings</span></li>
</ul>
</nav>
<div class="content-wrap">
<section id="section-topline-1"><p>1</p></section>
<section id="section-topline-2"><p>2</p></section>
<section id="section-topline-3"><p>3</p></section>
<section id="section-topline-4"><p>4</p></section>
<section id="section-topline-5"><p>5</p></section>
</div><!-- /content -->
</div><!-- /tabs -->
</section>
I'd like to have
<section>
<div class="tabs tabs-style-topline">
<nav>
<ul>
<li><span>Home</span></li>
<li><span>Deals</span></li>
<li><span>Upload</span></li>
<li><span>Work</span></li>
<li><span>Settings</span></li>
</ul>
</nav>
<div class="content-wrap">
<div layout:fragment="content">
</div>
</div>
<!-- /content -->
</div>
<!-- /tabs -->
</section>
I want this to reload my page and select the tab I clicked. I think it's not a big deal to do but I'm not verry powerful in web stuff.
Thank's
I am a new comer to Jquerymobile.
I have a listview in pageMain and want to show details for each listed items when user click it.
My code is:
<div data-role="page" id="home">
<div data-role="content">
<ul data-role="listview" data-inset="true" id="personList">
<li><a href="#person" id="Jack" age=20>Jack</a></li>
<li><a href="#person" id="Sam" age=30>Sam</a></li>
</ul>
</div>
</div>
<div data-role="page" id="person">
<div data-role="content">
<div>Name: <div id="myValue">xxx</div>Age: <div id="myAge">xxx</div> </div>
</div>
</div>
$("#person").live("pageshow", function onPageShow(e,data){
//alert("here");
$("#myValue").text(localStorage.getItem("nameStr"));
$("#myAge").text(localStorage.getItem("ageStr"));
});
$('#personList li a').live('click', function () {
//alert("here");
localStorage.setItem("nameStr",$(this).attr("id"));
localStorage.setItem("ageStr",$(this).attr("age"));
});
Here is the jsfiddle link for this jsfiddle
But it doesn't work, can anybody help me?
I've been searching for a solution on the internet but I didn't find any.
In my jQuery Mobile application, I have multiple HTML files each one representing a page to keep the workflow clean, therefore I use AJAX for navigation.
I have a button on a map in my page fleet.html (3rd in navigation) that opens a dialog, the opening process is done with javascript, only when I click on the button it shows me a blank dialog with no text and no buttons in it.
Here's fleet.html :
<div data-role="page" id="fleetPage" class="no-bg">
<div data-role="header" data-theme="b">
<h1>Flotte</h1>
</div>
<div data-role="content" data-theme="a">
<div class="map-container">
<div id="fleet-map"></div>
</div><!-- END map-container -->
</div><!-- END content -->
<div data-role="dialog" id="deviceInfoDialog" data-theme="b" data-close-btn="right">
<div data-role="header" data-theme="b">
<h3>Informations</h3>
</div>
<div data-role="content">
<p>POI Infos</p>
</div>
</div>
</div><!-- END page -->
And here's how I open the dialog :
function onSelectFeature() {
$("#fleetPage #deviceInfoDialog").dialog();
$.mobile.changePage($("#fleetPage #deviceInfoDialog"), {
transition: "slidedown"
});
}
Move your dialog div outside of the page div. Add a hidden link that when clicked would open the dialog. Rework your script function to emulate that link getting clicked.
I tested this and it works fine:
<div data-role="page" id="fleetPage" class="no-bg">
<div data-role="header" data-theme="b">
<h1>Flotte</h1>
</div>
<div data-role="content" data-theme="a">
<div class="map-container">
<div id="fleet-map"> onSelectFeature</div>
</div><!-- END map-container -->
</div><!-- END content -->
<script>
function onSelectFeature() {
$("#lnkDeviceInfoDialog").click();
}
</script>
<a id='lnkDeviceInfoDialog' href="#deviceInfoDialog" data-rel="dialog" data-transition="slidedown" style='display:none;'></a>
</div><!-- END page -->
<div data-role="dialog" id="deviceInfoDialog" data-theme="b" data-close-btn="right">
<div data-role="header" data-theme="b">
<h3>Informations</h3>
</div>
<div data-role="content">
<p>POI Infos</p>
</div>
</div>
Try this
function onSelectFeature() {
$.mobile.changePage( "#deviceInfoDialog", { role: "dialog", transition: "slidedown" } );
}
And your html should be like this
<div data-role="page" id="fleetPage" class="no-bg">
<div data-role="header" data-theme="b">
<h1>Flotte</h1>
</div>
<div data-role="content" data-theme="a">
<div class="map-container">
<div id="fleet-map"></div>
</div><!-- END map-container -->
</div><!-- END content -->
</div><!-- END page -->
<div data-role="dialog" id="deviceInfoDialog" data-theme="b" data-close-btn="right">
<div data-role="header" data-theme="b">
<h3>Informations</h3>
</div>
<div data-role="content">
<p>POI Infos</p>
</div>
</div>
I have various pages in html like this
<body onload="init()">
<div data-role="page" id="home">
<div data-role="header">
<h1>Here is the index page.</h1>
</div>
<div data-role="content">
<p><center>Below you may transition to our other pages.</center></p>
About Me
</div>
</div>
<div data-role="page" id="about">
<div data-role="header">
<h1>About Us</h1>
</div>
<div data-role="content">
Back Home
</div>
</div>
</body>
Now i need to grab the id of the page which is shown currently... How to do that?
Have you tried: $.mobile.activePage.attr('id')
Any of these:
$('div:jqmData(role="page").ui-page-active').attr('id');
$('.ui-page-active').attr('id');
should also do.
I have the problem that when I click a navigation link it shows the page as it should. But if I click on the link again it loses all of its contents.
Is there someone who knows how I solve this?
I use jquery.mobile-1.0b2.min.js
<div id="nav">
<ul>
<li class="red btn"><a class="tildig" href="#tildig" data-transition="fade" >
<p>TIL DIG</p>
</a></li>
<li class="blue btn"><a class="kontakt" href="#kontakt"data-transition="fade" >
<p>KONTAKT / BOOKMØDE</p>
</a></li>
</ul>
</div>
<!-- Start of page -->
<div data-role="page" id="tildig">
<div data-role="header" data-nobackbtn="true"> </div>
<div data-role="content">
<p>Dette er siden TIL DIG<br>
Jeg er nummer 3</p>
</div>
<div data-role="footer"> </div>
</div>
<!-- End of page -->
<!-- Start of page -->
<div data-role="page" id="kontakt">
<div data-role="header" data-nobackbtn="true"> </div>
<div data-role="content">
<p>Dette er siden KONTAKT / BOOKMØDE</p>
</div>
<div data-role="footer"> </div>
</div>
<!-- End of page -->
Java
http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js
http://code.jquery.com/jquery-1.4.4.min.js
I think i know what your problem is - at least I had some very similar stuff where a listview kept dissapearing - had to do with jqm caching.
<div data-role="page" id="book_index" data-dom-cache="true">
This attribute made the page reappear, hope it helps