I am trying to get a jquery mobile panel working. Currently, when the panel opens it slides all the way covering my page instead of just part way. I'm thinking it has to be something to do with initialization of the panel.
Any ideas?
Here is the jsfiddle
HTML
<div id="panel_home" data-role="panel" data-position="right" data-display="slide" data-theme="a">
<ul data-role="listview">
<li>Panel Button 1</li>
<li>Panel Button 2</li>
<li>Panel Button 3</li>
</ul>
</div>
<div data-role="page" id="page_home">
<div data-role="header" data-position="fixed" >
<a href="#panel_home" > <img border="0"
src="http://cdn-img.easyicon.net/png/11464/1146409.gif"
width="30" height="30">
</a>
</div>
<div data-role="content" >
<h2>Page Content</h2>
</div>
<div data-role="footer" data-position="fixed">
<h2>Footer Content</h2>
</div>
</div>
JS
$(document).one('mobileinit', function () {
$("[data-role=panel]").panel().enhanceWithin();
});
External panels should be initialized on Jquery's document.ready:
$( document ).ready(function() {
$("[data-role=panel]").panel().enhanceWithin();
});
Updated FIDDLE
Related
Can anyone please help me?
I'm trying to create a menu inside an external jquery mobile panel. This is JQM 1.4.0 that supports external panels.
I have a collapsible listview inside the external panel. There is some kind of inset applied that I don't seem to be able to get rid off for submenu3 and inside it as well.
Please check out my fiddle: http://jsfiddle.net/UHYz9/2/
Here's the html:
<div data-role="page" class="jqm-demos" data-quicklinks="true">
<div data-role="header">
<h1>External panels</h1>
</div>
<div role="main" class="ui-content jqm-content jqm-fullwidth">
Open External Panel
</div>
</div>
<div data-role="panel" id="externalpanel" data-position="left" data-display="reveal" data-theme="a">
<h3>Menu</h3>
<ul data-role="listview" style="padding-right: 8px">
<li>Submenu 1</li>
<li>Submenu 2</li>
<li data-role="collapsible" data-iconpos="right" data-inset="false">
<h2>Submenu 3</h2>
<ul data-role="listview">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>Submenu 4</li>
<li>Submenu 5</li>
</ul>
</div>
Here's the js:
$(function() {
$("body>[data-role='panel']").panel();
$("#externalpanel ul").listview();
$("#externalpanel").trigger("create");
});
For this to work, please include the following css and js links:
http://demos.jquerymobile.com/1.4.0/css/themes/default/jquery.mobile-1.4.0.min.css
http://demos.jquerymobile.com/1.4.0/js/jquery.js
http://demos.jquerymobile.com/1.4.0/js/jquery.mobile-1.4.0.min.js
Thanks a lot!
You need to wrap contents on panel in <div data-role="content"> or `.
To enhance content of panel or any other div, use .enhanceWithin().
$(function () {
$("body>[data-role='panel']").panel().enhanceWithin();
});
Demo
I am having a problem with nested popups with v1.4.0.RC.1. It works in v1.3.2. I have a footer, which has a button, which opens a popup, which contains a listview, and one of the listitems opens a popup. Again, in v1.3.2, this works as expected... but not with v1.4.0.RC.1. I understand that v1.4 isn't out yet, but I pose this issue anyway as someone may have some insight that I haven't come up with yet. I have a fiddle for both versions. The code for each is exactly the same. The only difference is that the first fiddle uses the 1.3.2 libraries and the second fiddle uses the v1.4.0 libraries.
Also, I have seen answers linking to a jQM popup page, showing that the page itself indicates that chaining popups isn't allowed. However, that's typically a v1.2.0 of jQM. The popup demo in v1.3.2 doesn't indicate that restriction, and is supported by the fact that it does in fact work (see fiddle below).
That being said, if anybody has any guidance or information, I'd really appreciate it. I've poured through the limited 1.4.0 documentation and the interwebs and the only thing I can come up with is doing a setTimeout within the popupafterclose event to open another popup. That seems like a sloppy hack to me, and I'd like to avoid doing that if at all possible.
Anyway, below is code and fiddles for 1.3.2 and 1.4.0.RC.1.
Thanks!
<div data-role="page" id="pgMain">
<!-- HEADER -->
<div id="hdrMain" data-role="header">
<h1>Popups from popups using jQM-1.3.2</h1>
</div>
<!-- CONTENT -->
<div data-role="content" id="contMain">
With jQM-1.3.2, the menu button down there opens a popup window as a menu. In the popup window is a listview, and the "Delete" listitem calls another popup to confirm deletion.<br/><br/>With jQM-1.4.0.RC.1, the second popup doesn't work.
</div>
<!-- FOOTER -->
<div id="ftrMain" data-role="footer" data-position="fixed" data-tap-toggle="false">
<div class="ui-btn-inline ui-shadow" style="margin-left:5px; margin-right:2px;" data-role="controlgroup" data-type="horizontal" data-mini="true">
Menu <--- Click this...
</div>
</div>
<!-- POPUP: SELECTED ITEMS MENU -->
<div id="mnuSelectedItemsMenu" data-role="popup">
<ul id="lvItemMenu" style="min-width: 210px;" data-role="listview" data-inset="true" data-icon="">
<li>Edit</li>
<li>Delete <--- ...then this</li>
<li data-role="list-divider" style="padding:2px 0px 0px 0px;"></li>
<li>Select All</li>
</ul>
</div>
<!-- POPUP: CONFIRM DELETE DIALOG -->
<div id="popupConfirmDelete" class="ui-corner-all" data-role="popup" data-overlay-theme="a" data-dismissible="false">
<div class="ui-corner-top" data-role="header">
<h1>Delete Transaction</h1>
</div>
<div class="ui-corner-bottom ui-content" data-role="content" >
<h3 class="ui-title">Are you sure you want to delete these transactions?</h3>
<p>This action cannot be undone!</p>
<div class="ui-grid-a point6em" style="margin-top:10px;">
<div class="ui-block-a">
<a id="btnDoDeleteTransactions" data-role="button" data-mini="true">Delete</a>
</div>
<div class="ui-block-b point6em">
<a data-role="button" data-rel="back" data-mini="true">Cancel</a>
</div>
</div>
</div>
</div>
fiddle for v1.3.2 above
<div data-role="page" id="pgMain">
<!-- HEADER -->
<div id="hdrMain" data-role="header">
<h1>Popups from popups using jQM-1.4.0.RC.1</h1>
</div>
<!-- CONTENT -->
<div data-role="content" id="contMain">
With jQM-1.3.2, the menu button down there opens a popup window as a menu. In the popup window is a listview, and the "Delete" listitem calls another popup to confirm deletion.<br/><br/>With jQM-1.4.0.RC.1, the second popup doesn't work.
</div>
<!-- FOOTER -->
<div id="ftrMain" data-role="footer" data-position="fixed" data-tap-toggle="false">
<div class="ui-btn-inline ui-shadow" style="margin-left:5px; margin-right:2px;" data-role="controlgroup" data-type="horizontal" data-mini="true">
Menu <--- Click this...
</div>
</div>
<!-- POPUP: SELECTED ITEMS MENU -->
<div id="mnuSelectedItemsMenu" data-role="popup">
<ul id="lvItemMenu" style="min-width: 210px;" data-role="listview" data-inset="true" data-icon="">
<li>Edit</li>
<li>Delete <--- ...then this</li>
<li data-role="list-divider" style="padding:2px 0px 0px 0px;"></li>
<li>Select All</li>
</ul>
</div>
<!-- POPUP: CONFIRM DELETE DIALOG -->
<div id="popupConfirmDelete" class="ui-corner-all" data-role="popup" data-overlay-theme="a" data-dismissible="false">
<div class="ui-corner-top" data-role="header">
<h1>Delete Transaction</h1>
</div>
<div class="ui-corner-bottom ui-content" data-role="content" >
<h3 class="ui-title">Are you sure you want to delete these transactions?</h3>
<p>This action cannot be undone!</p>
<div class="ui-grid-a point6em" style="margin-top:10px;">
<div class="ui-block-a">
<a id="btnDoDeleteTransactions" data-role="button" data-mini="true">Delete</a>
</div>
<div class="ui-block-b point6em">
<a data-role="button" data-rel="back" data-mini="true">Cancel</a>
</div>
</div>
</div>
</div>
fiddle for v1.4.0.RC.1 above
My application has a button (on app.html) that leads to a new page with a navbar (app2.html). The Navigation has an internal link (Toolbar 2) that should show the internal div "page2".
When coming from the button with changePage() it is not able to display the content when clicking on the navigation. It seems like the reloadPage is not working.
app.html looks like this:
<body>
<!-- Home -->
<div data-role="page" id="page3">
<div data-role="content">
<a id="asdf" data-role="button" name="asdf">
Button
</a>
</div>
</div>
<script>
$('#asdf').click(function(){
$.mobile.changePage('app2.html', {transition: "slidedown", reloadPage: true, changeHash: true });
});
</script>
</body>
This is my app2.html:
<body>
<!-- Home -->
<div data-role="page" id="page1">
<div data-role="content">
<div id="navigation" data-role="navbar" data-iconpos="right">
<ul>
<li>
<a href="app.html" data-theme="" data-icon="">
Toolbar1
</a>
</li>
<li>
<a href="#page2" data-theme="" data-icon="check">
toolbar 2
</a>
</li>
<li>
<a href="app.html" data-theme="" data-icon="">
Toolbar 3
</a>
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<div data-role="header">
<h3>asdfasd</h3>
</div>
</div>
</div>
</body>
Where's the problem? I'm using jQuerymobile 1.1.1 with jQuery 1.7.1.
Here are the files:
app.html
app2.html
You cannot have two jQuery Mobile pages in the second page. When you click on the link in app.html, it will do an ajax request to app2.html to get the data-role="page" and it expects only in the html file. You should read up on the difference between a single page template and a multi-page template.
You can find more in the docs, look for "Linking within a multi-page document".
tl;dr: You either need to put all the pages in one HTML file and link to the id or put all the pages in separate HTML files and link to the file.
I am having problems with adding a page to a listview sublist (li)..
I'm doing something like this:
<ul data-role="listview">
<li>Click me
<ul>
<li data-role="page">
<div data-role="header" data-position="fixed">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>Page content goes here.</p>
</div>
<div data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</div>
</li>
</ul>
</li>
</ul>
Is there a better way to do this as I have a few problems with it...
The fixed header and footer does'nt work on IOS 6 (iphone 3GS)
Padding and Margins need setting to 0.
Is this the best way to do this?
Normally a list will contain a sub list with links but I want to sublist to contain the page detail (information page).
Update: Trying this but the link does not link to the page gererated:
$.each(data.id, function(index, value){
output += <li>\
<a href="#mypage">\
<h3 class="h3_title">link title</h3>\
</a>\
</li>\
<div id="mypage" data-role="page">\
<div data-role="header" data-position="fixed">\
<h1>Page Title sub</h1>\
</div>\
<div data-role="content">\
one<br/>\
</div>\
<div data-role="footer" data-position="fixed">\
<h4>Page Footer</h4>\
</div>\
</div>';
...
You could just add the page as a separate div outside the ul tag and make the li a link to it. For example:
<div id="your-current-page" data-role="page">
<ul data-role="listview">
.
.
.
<li>Click me
.
.
.
</ul>
</div>
<div id="your-second-page" data-role="page">
You can put here whatever you'd like
</div>
I want to use some collapsible elements inside a listview in jquery mobile. I can set well the collapsible adding a inside the corresponding part, but when the collapsible is not collapsed, the info of collapsible is not inside the collapsible bubble, how can I fix that to have a bubble that include title and description?
Thanks
<div id="dispositivo" data-role="page" data-theme="c" data-cache="refresh">
<div data-role="content" role="main">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role='list-divider'>Titulo</li>
<form id="form_disp" name="form_disp" method="post" action="test.php">
<li data-role='fieldcontain'>
<a id="estado" name="estado" href="#" data-theme="b" data-role="button" data-inline="true">Boton</a>
<div data-role="content" data-inset="true">
<div data-role="collapsible" data-inset="true">
<h3>Info1</h3>
<p>Ahora estamos viendo el info 1</p>
</div>
<div data-role="collapsible">
<h3>Info 2</h3>
<p>Ahora estamos viendo el info 2</p>
</div>
</div>
<button data-theme="b" id="b_conf_disp" data-role="button" data-inline="true" type="submit">Boton 2</button>
</form>
</ul>
</div>
</div>
I think you missed </li> tag.
For something similar you can try using the plugin I wrote that allows certain listview items to be opened inline within the listview.
The Github Repo