i am using jQuery Mobile Navigation Tabs. i take a common footer for all pages like footer.html, and load this footer on a footer div at run time. this is working good as i want.
here is my code of footer.html
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul id="footertab">
<li id="home"><a href="#page1" data-transition="none" data-icon="tab-home" ></span>Home</a></li>
<li>6</span>Alerts</li>
<li><a href="#page3" data-transition="none" data-icon="tab-services" >Services</a></li>
<li>Learn</li>
<li>Settings</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
And i add this footer on run time using this code.
$(document).on('pageinit', function(event){
$(".addfooter").load('footer.html', function(){
$(this).trigger("create");
});
});
this running fine. but i have some issue with this code.it does not show the active tab.
i know that i have to add class='ui-btn-active ui-state-persist' in my selected tab.
but i do not sure that how to add and replace it with java script.
i dont want to use to write this footer at all pages.
for this task i use this code in side my script
$(document).delegate('[data-role="navbar"] a', 'click', function () {
alert("calling tab click");
$(this).addClass('ui-btn-active ui-state-persist');
});
This function call every time when i click any tab. but it does show selected tab.
all tabs are deselected.
How can i solve this problem.
please suggest me
Hello try this code.
$(document).live('pageshow',function(event,ui){
// disable previous selected links
$('[data-role=navbar] a').removeClass("ui-btn-active");
// select link
var menuLink = $('[data-role=navbar] a[href="#'+$.mobile.activePage.attr('id')+'"]');
menuLink.addClass("ui-btn-active");
});
Related
I am using jqm 1.4.5. for my web app. I have a problem changing to a page programmatically using the pagecontainer change widget in a certain situation. I have a home page that is part of the index.html file. From the home page if I load an external page via jqm ajax method and then from that page have a button that changes back to the home page (via javascript) it fails silently. However, it works if the external page has an anchor button with an href="#home_page".
The JS code is being executed. All the id's are correct.
Why does it work using the anchor button but not programmatically with the button tag using the JS code?
What am I doing wrong?
index.html
<div id="page_home" data-role="page" >
<div data-role="header">
<h1>Home Page</h1>
</div>
<div data-role="content">
load in the external page
</div>
page_external.html
<div id="page_external" data-role="page" >
<div data-role="header">
<h1>Home Page</h1>
</div>
<div data-role="content">
go to home page <!-- this works -->
<button id="mybutton" data-role="button" > go to home page (script)</button> <!-- this does not work -->
</div>
JS
$(document).on("click", "#mybutton, function () {
//this fails silently and does not change the page
$(":mobile-pagecontainer").pagecontainer( "change", "#page_home" );
});
I found the answer here on SO:
Similar Question
I was using the wrong syntax. It should be
$(":mobile-pagecontainer").pagecontainer( "change", $("#page_home" ));
I am trying to implement the new external panel offered in jQuery mobile 1.4 rc1. I am able to get the panel to enter and dismiss across all pages as it should, however the panel does not inherit the styles from the default theme (c) nor will it if a theme is defined using data-theme=a. The panel will load an unstyled list view unless I navigate the to #app-menu in the url then the styles appear. Does anyone know why this might be?
<script id="panel-init">
$(function () {
$("body > [data-role='panel']").panel();
});
</script>
<div data-role="panel" id="app-menu" data-display="push" data-position="left">
<ul data-role="listview">
<li data-role="list-divider">Menu</li>
<li data-icon="home" data-bind="click: navTo.bind($data, 'location-map', 'flip', false)">current party</li>
</ul>
</div>
Note: data-theme attribute should be added to External panel as it doesn't inherit style/theme from parent container. Internal panel inherit styles/theme from page div containing it.
jQuery Mobile now offer external panel and toolbar. Those widgets aren't being initiated automatically by jQM. They need to be initiated manually and followed by .enhanceWithin() to enhace contents within.
$(function () {
$("[data-role=panel]").panel().enhanceWithin();
});
Demo
I'm not allowed to comment but in the demo #Omar provide the many data-icon="home" icons are not showing up and if I add class="ui-btn ui-icon-arrow-l" to the Anchor, it doesn't show up either so there appears to be something more that needs to be done.
With a little investigation, I found that adding adding ui-btn-icon-left like so will fix anchors
Anchor
adding these classes to the <li data-icon="home" doesn't quite work but changing <li data-icon="home">item</li> to <li class="ui-btn ui-icon-home ui-btn-icon-left ui-corner-all">item</li> will get the icon to show up but will not move the text over so it still looks bad.
I am trying to create the same panel for several pages of my html/css/js app with jquery mobile using the solution here .
But unfortuantely, it is like for the content of the panel, the jquery mobile style is not aplied....instead of this, it just plain old html.
How can I apply jquery mobile style to the content of the panel? Is there some kind of refresh command for this?
Here is my panel:
$(document).on('pagebeforeshow', '#welcome-page', function(){
$('<div>').attr({'id':'mypanel','data-role':'panel','data-position':'right','data-display':'overlay'}).appendTo($(this));
$('<a>').attr({'href':'mailto:?subject=subject of the email&body=whatever body body','target':'_blank'}).html('Send').appendTo('#mypanel');
$('<a>').attr({'id':'test-btn','data-role':'button'}).html('Click me').appendTo('#mypanel');
$('<a>').attr({'href':'#welcome-page','data-inline':'true','data-icon':'delete','data-theme':'c','data-role':'button','data-rel':'close'}).html('Close').appendTo('#mypanel');
$.mobile.activePage.find('#mypanel').panel();
$(document).on('click', '#open-panel', function(){
$.mobile.activePage.find('#mypanel').panel("open");
});
//LISTENERS:
//$("#mypanel").panel("close");
});
Here's the page:
<div id="welcome-page" data-role="page">
<!--<div data-role="panel" id="mypanel">
</div>-->
<header data-role="header">
</header>
<div id="content" data-role="content">
</div>
<footer data-role="footer">
</footer>
Thanks
I have made an original post so let me show you a different way, instead of using pagebeforeshow event you can use pagebeforecreate. It is important because at that point content is still not styled. Any dynamically added content will be automatically styled so you don't need to worry about that.
$(document).on('pagebeforecreate', '#welcome-page', function(){
$('<div>').attr({'id':'mypanel','data-role':'panel','data-position':'right','data-display':'overlay'}).appendTo($(this));
$('<a>').attr({'href':'mailto:?subject=subject of the email&body=whatever body body','target':'_blank'}).html('Send').appendTo('#mypanel');
$('<a>').attr({'id':'test-btn','data-role':'button'}).html('Click me').appendTo('#mypanel');
$('<a>').attr({'href':'#welcome-page','data-inline':'true','data-icon':'delete','data-theme':'c','data-role':'button','data-rel':'close'}).html('Close').appendTo('#mypanel');
$(document).on('click', '#open-panel', function(){
$.mobile.activePage.find('#mypanel').panel("open");
});
//LISTENERS:
//$("#mypanel").panel("close");
});
Working example made on a basis of my original answer: http://jsfiddle.net/Gajotres/pZzrk/60/
Basically I want to "outsource" some of the content pages into single .html files. The pages are located at the same server and should be loaded normally by a link:
<li>Link1<span class="icon"></span></li>
The content of the link1.html page:
<!-- page -->
<div data-role="page" class="pages" id="link1">
<!-- header -->
<div data-role="header"> Menu
<div class="headerlogo"></div>
</div>
<!-- /header -->
<div data-role="headerimage" class="headerimage"><img src="images/headerimages/bild1.jpg" /></div>
<div data-role="content">
<h3>Link1</h3>
<p></p>
</div>
<!-- /content -->
</div>
<!-- /page -->
When I am clicking on the link in the menu, the content is shown fine. But the URL is changed in a way that may cause troubles.
What I want is: http://example.com/#link1.html
But what I get is: http://example.com/link1.html
So the problem is, that if someone tries to reload the page http://example.com/link1.html, he/she only gets the content of link1.html without all js/css things.
What I am doing wrong?
Thx
Stefan
You'll need to include the jquery mobile code in the head of link1.html and every other external file if you're going to take this approach.
Edit - This may actually achieve what you're trying to do.
$(document).on('mobileinit', function () {
$.mobile.pushStateEnabled = false;
});
Make sure the event handler is placed before jQuery Mobile is loaded.
Behold: a footer template:
<!-- Templates -->
<script type="text/template" id="templateFooter">
<div data-role="navbar">
<ul>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</script>
In every mobile page I have:
<div data-role="footer" data-position="fixed">footer</div>
The way I'm currently loading the template is:
$(function() {
$('div[data-role=footer]').html($('#templateFooter').html());
$.mobile.activePage.trigger('create');
});
This works, but I don't really like using $(function(), but I need to load it if any page shows, so pageinit or pageshow does not help. I'll be using knockout.js going forward, if that is of any help.
Is there a better way to do this?
function getTemplateFooter() {
//return footer text here
}
$("div:jqmData(role='page')").live("pagebeforecreate",function() {
// get the footer of the page
// if footer doesn't exist on page, insert it where you want it... in this case after role="content"?
var $content =$(this).page().find('div:jqmData(role="content")');
$content.after(getTemplateFooter());
}
there is also a pageshow event, that one fires even if the user navigates to the page, through a back button press etc... it bubbles up to the page div
I use it for pages where lots of dynamic data could change between subsequent visits, or even when the user just presses back