I am using Jquery mobile and I am changing to a multi page template that contains multiple pages in it. An event is triggering this code:
$.mobile.changePage("pages.html");
The pages.html file has:
<div data-role="page" data-title="page1" id="page1">
<div data-role="header">
back
<h1>page1</h1>
</div><!-- /header -->
<div data-role="content">
This is page1
<ul data-role="listview" data-inset="true">
<li>page2</li>
</ul>
</div><!-- content -->
</div><!-- /page -->
<div data-role="page" data-title="page2" id="page2">
<div data-role="header">
back
<h1>page2</h1>
</div><!-- /header -->
<div data-role="content">
This is page 2
</div><!-- content -->
</div><!-- /page -->
The changePage works, but it only brings in the first page, not the second into the DOM. Therefore when I click on the page2 link it does not go to page 2 because it is not in the DOM. How do I use changePage to bring in the entire file (pages.html) so I have access to the other pages in that file?
Related
I'm trying to make a dialog with jquery.mobile-1.0.min.
But the problem is when I click the button, the dialog is not popping up.
why it is not working this dialog?
Here is the fiddle
http://fiddle.jshell.net/xJ8D3/
You can check it "Page2" on the menu.
main
<nav data-role="navbar" class="menu">
main
Page 2
Page 3
</nav>
<section data-role="content">
main
</section>
<footer data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</footer>
page2
<nav data-role="navbar" class="menu">
main
Page 2
Page 3
</nav>
<section data-role="content">
page2
<br>
**Click Dialog
<div data-role="page" data-dialog="true" id="pagetwo">
<div data-role="main" class="ui-content">
Dialog Content
</div>
</div>**
</section>
<footer data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</footer>
page3
<nav data-role="navbar" class="menu">
main
Page 2
Page 3
</nav>
<section data-role="content">
page3page3
</section>
<footer data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</footer>
Your dialog page has to be on the same node level as the other pages. Corrected your fiddle to open page3:
script:
<div data-role="page" id="main">
...
</div>
<div data-role="page" id="page2">
<section data-role="content">
Click Dialog
</section>
...
</div>
<div data-role="page" id="page3">
...
</div>
jsFiddle:
Fiddle
change
**Click Dialog
to
**Click Dialog
i am implementing tab bar using jquery mobile.I need to show different pages on different buttons on tab bar .But it is showing in same page.
http://jsfiddle.net/ravi1989/654gX/
<div data-role="navbar">
<ul>
<li>Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
</div>
<div data-role="content" class="content">
<div id="tab-1">
<h2>Here is the first tab</h2>
</div>
<div id="tab-2">
<h2>Here is the second tab</h2>
</div>
<div id="tab-3">
<h2>Here is the third tab</h2>
</div>
</div>
You need to restructure you app, first follow this structure given at jquery mobile docs.
Secondly navbars are supposed to be inside footer or header, so wrap you navbar around footer then you need fixed header and footer with same data-id so the pages transition between dynamically keeping the same header and footer, which looks like tabs, example
<div data-role="page" id="one">
<div data-role="header" data-position="fixed" data-id="sameheader">
<h1>Single page</h1>
</div><!-- /header -->
<div data-role="content">
<p>This is a single page boilerplate template that you can copy to build your first jQuery Mobile page. Each link or form from here will pull a new page in via Ajax to support the animated page transitions.</p>
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-id="samefooter">
<div data-role="navbar">
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div>
</div><!-- /footer -->
</div><!-- /page -->.
<div data-role="page" id="two">
<div data-role="header" data-position="fixed" data-id="sameheader">
<h1>Single page</h1>
</div><!-- /header -->
<div data-role="content">
<p>Different page same footer.</p>
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-id="samefooter">
<div data-role="navbar">
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div>
</div><!-- /footer -->
</div><!-- /page2 -->
Js fiddle example
This is my jquery sample code below it uses default view. How can I change my background color? also button color? How to use custom css file please tell me
Intro to jQuery Mobile
<div data-role="page">
<div data-role="header">
<h1>Facebook Friends</h1>
</div><!-- /header -->
<div data-role="content">
<p>
<ul data-role="listview" data-inset="true">
<li>
Get Friends
</li>
<li>
Post to Wall
</li>
<li>Send Message</li>
</ul>
</p>
</div><!-- /content -->
<div data-role="footer">
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Try to use themeroller. It is accessible here:
themeroller
Set up your custom theme and try to add this line to the header of index.html:
<link rel="stylesheet" href="css/themes/my-custom-theme.css" />
It should work.
If you want to change background in a different way try to add to your page div's this line:
<style>body {background-color:#b0c4de;}</style>
How to make Jquery Mobile splitView (http://asyraf9.github.com/jquery-mobile/) works with Iphone,
I have tried changing min-width: 480px to smaller values in jquery.mobile.splitview.js, It dosen't work.
Any idea please?
I have taken an example from here, https://github.com/asyraf9/jquery-mobile/. It works fine when views from ipad and desktop,but not for my android and iphone devices.
Sample Code:
<div data-role="panel" data-id="menu">
<!-- Start of first page -->
<div data-role="page" id="foo">
<div data-role="header">
<h1>Foo</h1>
</div><!-- /header -->
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called bar</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- other side panel pages here -->
</div>
<div data-role="panel" data-id="main">
<!-- Start of second page -->
<div data-role="page" id="bar">
<div data-role="header">
<h1>Bar</h1>
</div><!-- /header -->
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p>Back to foo</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- other main panel pages here -->
</div>
it wont work on iphone.. i tried it, even if u change the 480px thing it will become so slow that it will become unusable... best way is to have 3 modes..
splitview -> 2 columns
popover -> the complementary view of splitview.. appears in ipad, with a popover menu
none -> for normal phones.
the way u can do this is see the spltview code where it checks the condition of whether splitview can work or not. in its else it removes all the panel-html and leaves just the html of the menu panel. so this is your 3rd case. i suggest u do it this way only
Please help,
jquery mobile multipage wont work when a page is called from another page. It only displays the buttons but doesnt navigate to its internal pages when clicked. It works fine when the page is access directly.
<!-- Page 1-->
<div data-role="page" id="description" data-title="Description">
<div data-role="header" data-position="fixed" data-theme="d">
<!-- header 1-->`enter code here`
</div>
</div>
<div data-role="content">
<!--- content 1-->
</div>
<div data-role="footer" data-position="fixed" data-theme="d">
<div data-role="navbar" data-iconpos="bottom">
<ul>
<li>Description</li>
<li>Physicians</li>
</ul>
</div>
</div>
</div>
<!-- Page 2-->
<div id="Physicians" data-role="page" data-title="Physicians">
<div data-role="header" data-position="fixed" data-theme="d">
<!-- header 2 -->
</div>
<div data-role="content">
<!-- content 2 -->
</div>
<div data-role="footer" data-position="fixed" data-theme="d">
<div data-role="navbar" data-iconpos="bottom">
<ul>
<li>Description</li>
<li>Physicians</li>
</ul>
</div>
</div>
</div>
Try adding to the anchor the attribute rel="external".
Example:
Description
try giving <div data-role="page" first for your second page
When you call this page from another page, it ONLY loads the div[data-role="page"] of that page, not the other div in this multi-page file!
Actually to be precise, when you link to a page from another page, ONLY the code inside the div you are targeting is pulled in via AJAX, even if you had JS in the <head> that won't get loaded either.
Try linking to this page with an external link and you'll find it works fine.