I've installed iron-router for my Meteor project which is using jQM for the UI, but when I set-up a simple route, I cannot get my jQM page to show.
My router.js is as follows:
Router.configure({
layoutTemplate: 'layout'
});
Router.map(function() {
this.route('splash', {path: '/'});
});
My layout.html is as follows:
<template name="layout">
<div data-role="page" data-theme="q" id="splashPage">
<div data-role="content">
{{>yield}}
</div>
</div>
</template>
And my splash.html is as follows:
<template name="splash">
<div class="login">
<img src="images/logo.png" alt="Hub logo">
</div>
</template>
As I understand iron-router the {{>yield}} should just put in whatever template you've defined in the router.js, in this case splash for the root URI. What's happening is that I do see that in the resulting HTML but there's a separate div that appears to be interfering with jQM. Any ideas how to get the two divs to reconcile?
Where's the resulting HTML:
<body class="ui-mobile-viewport ui-overlay-a">
<div data-role="page" data-url="/" tabindex="0" class="ui-page ui-page-theme-a ui-page-active" style="min-height: 324px;">
</div>
<div class="ui-loader ui-corner-all ui-body-a ui-loader-default">
<span class="ui-icon-loading"></span>
<h1>loading</h1>
</div>
<div data-role="page" data-theme="q" id="splashPage">
<div data-role="content">
<div class="login">
<img src="images/logo.png" alt="Approval Hub logo">
</div>
</div>
</div>
</body>
Related
I tried to implement external panel on JQM 1.4.5 but I did'nt success to display it correctly on my web app. JQM 1.4.5 doc about external panel
My code is written below.
Thanks for helping,
Clément
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
No text
</div>
<div role="main" class="ui-content">
some content
</div>
</div>
<div data-role="page" id="contact">
<div data-role="header">
No text
</div>
<div role="main" class="ui-content">
some other content
</div>
</div>
<div data-role="panel" id="mypanel" data-position="left" data-display="push" data-theme="a">
<div class="ui-panel-inner">
<ul data-role="listview">
<li data-icon="home">
<a id="menu-home" href="index.php#home">Home</a>
</li>
<li data-icon="user">
<a id="menu-account" href="#">Account</a>
</li>
<li data-icon="gear">
<a id="menu-settings" href="#">Settings</a>
</li>
<li data-icon="mail">
<a id="menu-contact" href="#contact">Contact</a>
</li>
</ul>
</div>
</div><!-- /mypanel -->
</body>
</html>
You need to enhance the panel in java-script. In $(document).ready write the following code:
$('#mypanel').enhanceWithin().panel();
How to collapse all the nested collapsible-set and collapsible elements in nested collapsible set in Jquery Mobile?
Below is the code in the JSFiddle:
http://jsfiddle.net/ycP8y/
<body>
<div data-role="content">
<div data-role="collapsible-set">
<div data-role="collapsible">
<h1>
<div class="ui-btn-up-c ui-btn-corner-all custom-count-pos">47</div>
Test</h1>
<div data-role="collapsible-set">
<div data-role="collapsible">
<h1>
<div class="ui-btn-up-c ui-btn-corner-all custom-count-pos">47</div>
Test</h1>
<div data-role="collapsible-set">
<div data-role="collapsible">
<h1>
<div class="ui-btn-up-c ui-btn-corner-all custom-count-pos">47</div>
Test</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Assuming you are using jQM 1.2 as in your fiddle, you can just call trigger("collapse") on all collapsibles (http://demos.jquerymobile.com/1.2.1/docs/content/content-collapsible-methods.html ):
$(document).on("pageinit", function(){
$("#btnCollapse").on("click", function(){
$("[data-role=collapsible]").trigger("collapse");
});
});
Updated FIDDLE
I have the following code. What I am doing is to show data and then I have a delete button.
I cannot get the jquery dialog box to come up. I am not sure what I am doing wrong.
#model data_Input
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<div data-role="page" data-theme="b">
<div id="main" data-role="content">
<div style = "padding-bottom: 10px; padding-top: 20px" class="editor-label">
#Html.Label("Type"): #Html.DisplayFor(m => m.data_Name)
</div>
<div class="editor-label">
#Html.Label("Value"): #Html.DisplayFor(m => m.Date)
</div>
<p>
Open dialog
</p>
</div>
</div>
<!-- Start of second page -->
<div data-role="page" id="dialog">
<div data-role="header">
<h1>
Bar
</h1>
</div><!-- /header -->
<div data-role="content">
<p>
I'm second in the source order so I'm not shown as the page initally.
</p>
<p>
Back to foo
</p>
</div><!-- /content -->
<div data-role="footer">
<h4>
Page Footer
</h4>
</div><!-- /footer -->
This code is not producing a Previous button:
<div data-role="page" data-add-back-btn="true" data-back-btn-text="Previous">
<div data-role="header">
<h1>My Header</h1>
</div>
</div>
Actually to get the data-add-back-btn="true" work in latest version of jQuery Mobile 1.4, it should be at the header of the second page.
<div data-role="page" id="2ndPage">
<div data-role="header" data-add-back-btn="true" data-back-btn-text="Previous!">
<h1>HEADER</h1>
</div>
<div data-role="content">
hi
</div>
<div data-role="footer">
<p>FOOTER</p>
</div>
</div>
jQuery Mobile >= 1.4: https://stackoverflow.com/a/20065246/1771795
Adding data-add-btn-back to single page won't generate a button as there is no page before it in DOM nor in navigation history.
If you make two pages, it will appear on the next page.
<!-- page -->
<div data-role="page">
<div data-role="header">
<h1>My Header</h1>
</div>
<a href='#p1'>page 2</a>
</div>
<!-- another page -->
<div data-role="page" data-add-back-btn="true" data-back-btn-text="Previous" id='p1'>
<div data-role="header">
<h1>My Header</h1>
</div>
</div>
Demo: http://jsfiddle.net/uJz3E/1/
I'm trying to implement navbar "persistent toolbars" so that I need to define the navigation bar once.
ref: http://jquerymobile.com/demos/1.2.0/docs/toolbars/footer-persist-a.html
(you need to define data-id="the same" on each page)
First I put straight into my development, did no work and as I see it does not seem to work with simple cases either, I tried all kind of combinations.
What can be wrong width the following code ?
Navivagtion leads to the second page but not toolbar there.
CODE:
<body>
<div data-role="page" id="page" data-id="stHedaer>
<div data-role="header">
<h1>Page One</h1>
<div data-role="navbar" data-position="fixed">
<ul>
<li>page2</li>
<li>page3</li>
</ul>
</div>
</div>
<div data-role="content"> Page one </div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="p2" data-id="stHedaer">
<div data-role="header" >
<h1>Page Two</h1>
</div>
<div data-role="content"> Content </div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="p3" data-id="stHedaer" >
<div data-role="header">
<h1>Page Three</h1>
</div>
<div data-role="content"> Content </div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
jQM documentation must be read carefully. If you want navbar on every page you need to put it on every page. With:
...data-position="fixed" data-id="footer"...
in header and footer a like.
Here's a working example: http://jsfiddle.net/Gajotres/Beq4H/
<!DOCTYPE html>
<html>
<head>
<title>Share QR</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<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.7.2.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" id="home">
<div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
Home
<h1>Share QR</h1>
</div>
<div data-role="content">
<p>Hello world!</p>
</div>
<div data-role="footer" data-theme="b" data-position="fixed" data-id="footer">
<div data-role="navbar">
<ul>
<li>page2</li>
<li>page3</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="about">
<div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
Home
<h1>About</h1>
Back
</div>
<div data-role="content">
<p>Share your favorite URLs with other mobile phone users through QR codes.</p>
</div>
<div data-role="footer" data-theme="b" data-position="fixed" data-id="footer">
<div data-role="navbar">
<ul>
<li>page2</li>
<li>page3</li>
</ul>
</div>
</div>
</div>
</body>
</html>