I just switched to JQuery Mobile 1.4, now when I do page transition, both header and footer lose css styling for a while before applying again.
IOS 7.04
Main index file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />
<script type="text/javascript" src="js/library/phonegap/cordova_ios.js"></script>
<link rel="stylesheet" type="text/css" href="css/library/JQuery/jquery.mobile-1.4.0.css">
<link rel="stylesheet" type="text/css" href="css/application/base.css">
<script data-main="js/main.js" src="js/library/require/require.js"></script>
</head>
<body class="main_body">
</body>
</html>
some pages that transit between each other with header and footer
page1
<div id="login_template_wrapper">
<div id="leftmainmenu" class="menu-container" data-position="left" data-display="overlay">
</div>
<div data-role="header" data-position="fixed" data-id="iheader" data-tap-toggle="false" data-hide-during-focus="false">
<h1><%print(T('LOGIN'));%></h1>
<!-- <a id="menu_link" data-role="button" data-icon="gear" data-position="left"><%print(T('LEFTMAINMENU'))%></a> -->
</div><!-- /header -->
<div data-role="content" class="main-content">
<div id="login-content_wrapper" class="content_wrapper">
<div class="content_inner">
<div id="login_input">
<div data-role="label"><%print(T('USERNAME'));%></div><input bc-data-role="input" class="login-form" name="username" value="<%print(logindata['du'])%>"/>
<div data-role="label"><%print(T('PASSWORD'));%></div><input bc-data-role="input" class="login-form" type="password" name="password" value="<%print(logindata['dp'])%>"/>
<input type="submit" class="login-form" data-role="button" id="login_submit" value="<%print(T('LOGIN'));%>"/>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="checkbox" name="rememberme" id="rememberme" <%if (logindata['rm']) {print('checked');}%> />
<label for="rememberme"><%print(T('REMEMBER_ME'))%></label>
<input type="checkbox" name="rememberpass" id="rememberpass" <%if (logindata['rp']) {print('checked');}%> />
<label for="rememberpass"><%print(T('REMEMBER_PASSWD'))%></label>
</fieldset>
</div>
</div>
</div><!-- /content inner -->
</div><!-- /content wrapper-->
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-id="ifooter" data-tap-toggle="false" data-hide-during-focus="false">
<div id="login_links" data-role="controlgroup" data-type="horizontal">
<a data-role="button" data-icon="edit" href="#registration"><%print(T('REGISTRATION'))%></a>
<a data-role="button" data-icon="refresh" href="#passwordretrieval"><%print(T('RETRIEVEPASSWORD'))%></a>
</div>
</div><!-- /footer -->
</div>
page2
<div id="registration_template_wrapper">
<div data-role="header" data-position="fixed" data-id="iheader" data-tap-toggle="false" data-hide-during-focus="false">
<h1><%print(T('REGISTRATION'));%></h1>
<%print(T('BACK'))%>
</div><!-- /header -->
<div data-role="content" class="main-content">
<div id="login-content_wrapper" class="content_wrapper">
<div class="content_inner">
<ul id="registration_input" data-role="listview" data-inset="true">
<li><div data-role="label"><%print(T('USERNAME1'));%></div><input bc-data-role="input" class="registration-form" id="USERNAME1" name="USERNAME1" value="" data-mini="true"/></li>
<li><div data-role="label"><%print(T('USERNAME2'));%></div><input bc-data-role="input" class="registration-form" id="USERNAME2" name="USERNAME2" value="" data-mini="true"/></li>
<li><div data-role="label"><%print(T('PASSWORD1'));%></div><input bc-data-role="input" class="registration-form" type="password" id="PASSWORD1" name="PASSWORD1" value="" data-mini="true"/></li>
<li><div data-role="label"><%print(T('PASSWORD2'));%></div><input bc-data-role="input" class="registration-form" type="password" id="PASSWORD2" name="PASSWORD2" value="" data-mini="true"/></li>
<!--
<li><div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="checkbox" name="showpass" id="showpass"/>
<label for="showpass"><%print(T('SHOWPASS'))%></label>
</fieldset>
</div></li>
<li><button id="registration_clean"><%print(T('CLEAN'))%></button></li> -->
<li><button id="registration_save"><%print(T('REGISTRATION'))%></li></button>
</ul>
</div><!-- /content inner -->
</div><!-- /content wrapper-->
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-id="ifooter" data-tap-toggle="false" data-hide-during-focus="false">
<div id="login_links" data-role="controlgroup" data-type="horizontal">
<a data-role="button" data-icon="edit" href="#registration"><%print(T('REGISTRATION'))%></a>
<a data-role="button" data-icon="refresh" href="#passwordretrieval"><%print(T('RETRIEVEPASSWORD'))%></a>
</div>
</div><!-- /footer -->
</div>
I load page template through backbone view, and do the page transition use the following code
$.mobile.changePage(__this.currentView.$el, {'reverse': reverse, 'changeHash': false, 'transition': mobile_transition});
Everything worked fine in 1.4 alpha and beta, but in 1.4 release, the header and footer loses css styling for a while before applying css style again.
I had the same problem. My solution was to directly add data-theme="a" to the header.
<div data-role="header" data-position="fixed" data-id="iheader" data-tap-toggle="false" data-hide-during-focus="false" data-theme="a">
<h1><%print(T('REGISTRATION'));%></h1>
<%print(T('BACK'))%>
</div><!-- /header -->
I believe this is something to do with the new theme inheriting mechanism but i cant seem to find any useful documentation on the subject.
I tried the Max's answer but it didn't work for me.
The "fixed" header/footer are moved outside the containing "page" div during transition and moved back in after the animation. You should add additional css selectors to apply the styling on the moved header/footer.
For example if you current selector is .ui-page-theme-a .ui-bar-a .ui-btn.back-link , add another selector for your css like .ui-mobile-viewport .ui-bar-a .ui-btn.back-link. This is because the header/footer is no longer inside .ui-page-theme-a and is inside .ui-mobile-viewport during the transition.
Hope it helps!
Related
I am trying to create a jQuerymobile app with a Nav Bar with Multiple Pages in single index.html. I am using the template Multi-page template structure
Unfortunately, I cannot get the nav bar to show different pages. Here is my code:
I did also use a script 'pageLoader.js' to force loading the pages. But that does not work either. Here is my pageLoader.js:
<!doctype html>
<html>
<head>
<title>My Page</title>
<!--https://jquerymobile.com/download/-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<!--POST page 1-->
<div data-role="page" id="postPage">
<div data-role="header">
<h1>I'm a header</h1>
<div data-role="navbar">
<ul>
<li>POST</li>
<li>GET</li>
<li>PUT</li>
<li>DELETE</li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
<div role="main" class="ui-content">
<label for="key">key:</label>
<input type="text" name="key" id="key" placeholder="enter your key" value="" data-clear-btn="true">
<label for="value">value:</label>
<input type="text" name="value" id="value" placeholder="enter your value" value="" data-clear-btn="true">
<button onclick="saveValue()"> Store Key</button>
<p id="status">Status: No Activity</p>
</div><!-- /content -->
<div data-role="footer">
<h4>My Footer</h4>
</div><!-- /footer -->
<!--get Page 2-->
<div data-role="page" id ='getPage'>
<div data-role="header">
<h1>I'm a header</h1>
<div data-role="navbar">
<ul>
<li>POST</li>
<li>GET</li>
<li>PUT</li>
<li>DELETE</li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
<div role="main" class="ui-content">
<label for="key">key:</label>
<input type="text" name="key" id="key" placeholder="enter your key" value="" data-clear-btn="true">
<button onclick ="getValue()"> Get Value</button>
<p id="status">Status: No Activity</p>
</div><!-- /content -->
<div data-role="footer">
<h4>My Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<script src="scripts/client.js" type="text/javascript"></script>
<script src="scripts/pageLoader.js" type="text/javascript"></script>
</body>
</html>
I also tried to use a script to enforce change of pages. I used the pageLoader.js script with following content:
$(document).on("pageshow", function(){
if($('.ui-page-active').attr('id') === 'postPage'){
$.mobile.changePage("#postPage");
} else if ($('.ui-page-active').attr('id') === 'getPage'){
$.mobile.changePage("#getPage");
}
});
Any help would be greatly appreciated.
jquerymobile panel cross page
I wanna make a same panel menu for every page.
because the panel menu is the same content for every page.
How do I do? or any suggest?
My sample code is by following
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
<div data-role="page" id="status">
<div data-role="header" data-theme="b">
<h1>Access Point Status</h1>
<a class="ui-btn" data-rel="back" style="background:none;">back</a>
<a class="ui-btn ui-btn-right" style="background:none;" href="#left-menu">menu</a>
</div>
<div id="left-menu" data-role="panel" data-position="left">
<a class="ui-btn" href="#status">STATUS</a>
<a class="ui-btn" href="#A">A</a>
</div>
<div data-role="content" class="ui-content" data-theme="e">
</div>
</div>
</div>
<div data-role="page" id="A">
<div data-role="header" data-theme="b">
<h1>PAGE A</h1>
<a class="ui-btn " data-rel="back" style="background:none;">back</a>
<a class="ui-btn ui-btn-right" style="background:none;" href="#left-a">menu</a>
</div>
<div id="left-a" data-role="panel" data-position="left">
<a class="ui-btn" href="#status">STATUS</a>
<a class="ui-btn" href="#A">A</a>
</div>
<div data-role="content" class="ui-content" data-theme="e">
</div>
</div>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</html>
create a panel in body tag and outside page div like following
<body>
<div data-role="panel" id="myPanel" data-display="overlay" data-position="right" data-theme="b">
<ul data-role="listview">
<li data-icon="false">
<a href="#" data-transition="pop" data-rel="close">
Home
</a>
</li>
<li data-icon="false">
Logout
</li>
</ul>
</div>
<div data-role="page" id="login">
..... page ....
</div>
.... other pages ....
</body>
then in pagecreate event of first page add this
$(document).on("pagecreate", "#firstPage", function () {
$("body>[data-role='panel']").panel().enhanceWithin(); //you can put this in document.ready but its not preferable
}
I have a simple page with a select menu (long dialog), an href dialog call and a tabbed content.
When I select an option the page came back and the header goes into a loop showing a new row for each autorefresh, while the page shows the tabs don't tabbed.
I use the same header on various pages but I get the problem only with this tabbed page.
Any tips?
<div data-role="page" > <!-- start header -->
<div data-role="header" data-theme="b" data-position="fixed">
Menu
Help
<h1 style="margin:0;padding:0">
<form action="" name="selectloc" method="post" data-ajax="false">
<input type="hidden" name="setssid" value="1">
<select name="formname" data-mini="true" id = "selectlocation" data-native-menu="false" data-force-dialog="true" >
<option value="n1" >label1</option>
<option value="n20" >label20</option>
</select>
</form>
<script>$('select').change(function() {
$(this).parents('form').submit();
});</script>
</h1>
</div>
<!-- /header -->
<div data-role="content" id="container" data-content-theme="d" >
label
</div>
<div id="tabs" data-role="tabs" style="max-width:600px;margin:auto;" >
<div data-role="navbar">
<ul>
<li>Weekly</li>
<li>Montly</li>
<li>Yearly</li>
</ul>
</div>
<div class="ui-body-a ui-content" id="weekly" > ...... </div>
<div class="ui-body-a ui-content" id="montly" > ...... </div>
<div class="ui-body-a ui-content" id="yearly"> ...... </div>
</div><!-- //end tabs -->
<!--- start footer -->
<div data-role="footer" data-position="fixed" data-theme="b"> .... </div>
<!-- /footer -->
<!-- panels-->
<div data-role="panel" id="nav-panelmenusx" data-display="overlay"> .... </div>
<div data-role="panel" id="nav-panelinfodx" data-position="right" data-display="overlay">...</div>
</div> <!-- // end page -->
</body>
</html>
Has anyone ever run into the problem of not neing able to type in spaces when using a text input type in jquery-mobile
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.css"/>
<link rel="stylesheet" type="text/css" href="mobile-css.css"/>
</head>
<body>
<div data-role="dialog" data-theme="d">
<div data-role="header" data-theme="d"><h5 style="margin: 0.6em 10% 0.5em;">Comment</h5></div>
<div id="" data-role="content" data-theme="d">
<label for="txtComment">Your Comment:</label>
<input type="text" id="txtComment" data-theme="d">
</div>
<div data-role="footer" data-theme="d">
<a href="#" data-role="button" data-mini="true" data-inline="true" data-transition="fade"
class="cancelButton" data-theme="c" data-rel="back">Cancel</a>
Save
</div>
</div>
</body>
</html>
Try this simple example (tested on iPhone 5), which uses the latest version of jQuery Mobile at the moment (1.2.0), and let me know if this works:
<html>
<head>
<meta name='viewport' content='minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no' />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>HEADER</h1>
</div>
<div data-role="content">
<h1>my content</h1>
<input type="text"/>
<a data-role="button" href="#mydialog" data-rel="dialog">OPEN DIALOG</a>
</div>
<div data-role="footer" data-position="fixed">
<h1>FOOTER</h1>
</div>
</div>
<!-- YOUR DIALOG -->
<div data-role="dialog" data-theme="d" id="mydialog">
<div data-role="header" data-theme="d">
<h5 style="margin: 0.6em 10% 0.5em;">Comment</h5>
</div>
<div id="" data-role="content" data-theme="d">
<label for="txtComment">Your Comment:</label>
<input type="text" id="txtComment" data-theme="d">
</div>
<div data-role="footer" data-theme="d">
<a href="#" data-role="button" data-mini="true" data-inline="true" data-transition="fade"
class="cancelButton" data-theme="c" data-rel="back">Cancel</a>
Save
</div>
</div>
</body>
</html>
You should get the following:
Try typing spaces in the input textbox:
Then, click on the button OPEN DIALOG, which will lead you to your dialog box (the code you provided), and try inputting spaces inside the dialog's input textbox:
I hope this will work for you. Anyway, let me know about your results mate.
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false">
<h3>Section 1</h3>
<p>I'm the collapsible set content for section 1.</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible set content for section 2.</p>
</div>
<div> <!--I tried this but this only makes simple heading without any background style used for other collapsible section headings-->
<h3>Read only Section 3</h3>
</div>
</div>
using the above pattern I want to make some divs within the collabsile-set with heading only and I want to make them non-collapsible because of some requirements. If anybody know anything regarding this, please let me know
The collapse/expand of content is being handled in the click handler of the collapsible heading.So by unbinding the click event you can keep accordion always expanded.
$(".ui-collapsible-heading").unbind("click");
A demo here - http://jsfiddle.net/8dLw4/
Edit
Edited fiddle for keeping some in expanded state always- http://jsfiddle.net/8dLw4/2/
An attribute data-allow-collapse is added.For sections you want to allow collapse,set it as true.For other sections false.
Here is the complete source code:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
$("#page").live('pageinit', function(event) {
$(".ui-collapsible[data-allow-collapse=false]").unbind("expand collapse");
});
</script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false" data-allow-collapse="false">
<h3>Section 1-Not allowed</h3>
<p>
I'm the collapsible set content for section B.
</p>
</div>
<div data-role="collapsible" data-collapsed="false" data-allow-collapse="true">
<h3>Section 2-Allowed</h3>
<p>
I'm the collapsible set content for section B.
</p>
</div>
<div data-role="collapsible" data-collapsed="false" data-allow-collapse="true">
<h3>Section 3-Allowed</h3>
<p>
I'm the collapsible set content for section B.
</p>
</div>
<div data-role="collapsible" data-collapsed="false" data-allow-collapse="false">
<h3>Section 4-Not allowed</h3>
<p>
I'm the collapsible set content for section B.
</p>
</div>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
Or you can use this code until section-box role is available:
<div class="ui-collapsible ui-body-c">
<h3 class="ui-collapsible-heading">
<span style="margin:0; cursor:auto;" class="ui-btn ui-corner-top ui-btn-up-a">
<span class="ui-corner-top ui-corner-bottom" style="display:block; padding: .6em 5px">Title
</span>
</span>
</h3>
<div class="ui-collapsible-content ui-body-c ui-corner-bottom">
<div>Content
</div>
</div>
</div>
You can do this:
$(".ui-collapsible").on("collapsiblecreate", function( event, ui ) {
$(this).unbind();
});