I created a popup with a listview inside. I also applied a list filter. However, it is not correctly formatted. Is there any way I can push it up a bit (like a list divider would be)?
EDIT: the code
<div data-role="content">
<div data-role="popup" id="popupMenu" data-theme="d">
<ul data-role="listview" data-inset="true" id="symptomslist" style="min-width:210px;" data-theme="d" data-filter="true">
</ul>
</div>
</div>
To get best results of jQuery Mobile styles of contents inside page, dialog, panel or popup, always place them inside data-role="content".
<div data-role="popup" id="popupMenu" data-theme="d">
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="d" data-filter="true">
<!-- list items -->
</ul>
</div>
</div>
Demo
Related
I'm working on mobile app.I want pop-up to appear on click of icon(carat-r). Actually i'm not gettin where to link. Below is my code. Thanks in advance
<div data-role="page" data-theme="a" data-content-theme="a">
<div data-role="header" data-position="fixed" data-theme="b">
<h1>weekdays</h1>
</div>
<div data-role="tabs" id="tabs">
<ul data-role="listview" data-filter="true" data-input="#filterBasic-input" data-inset="true">
<li ><a href="#">
<h2>Sunday</h2>
</a></li>
<li><a href="#">
<h2>monday</h2>
</a></li>
</ul>
</div>
</div>
If you want to launch a popup when the icon is clicked, but still have the rest of the listitem be a regular link, you should use the split button option on the listview:
http://demos.jquerymobile.com/1.4.4/listview/#Splitbuttons
You can set the icon to carat-r using the data-split-icon attribute.
In your markup:
<ul data-role="listview" data-filter="true" data-input="#filterBasic-input" data-inset="true" data-split-icon="carat-r">
<li>
<h2>Sunday</h2>
</li>
</ul>
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
I have a list I am creating dynamically. The content looks good BUT each link points to the same page link:
I start with an empty list:
<div data-role="content" class="ui-content" role="main">
<ul data-role="listview" data-theme="b" data-inset="true" id="profile2" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
</ul>
</div>
I use $('#profile2').append to build the list and use $('#profile2').listview("refresh"); to refresh the list after each new link is inserted.
Here is a sample of code after the list has been generated:
<div data-role="content" class="ui-content" role="main">
<ul data-role="listview" data-theme="b" data-inset="true" id="profile2" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
<li><div class="ui-btn-inner ui-li">
<div class="ui-btn-text"><a href="#/demo?a=53&b=-7&ui-page=profile2-0" class="ui-link-inherit">
<h3 class="ui-li-heading">Headin1</h3>
<p class="ui-li-desc">Content 1</p></a><
</div>
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div>
</li>
<li><div class="ui-btn-inner ui-li">
<div class="ui-btn-text"><a href="#/demo?a=53&b=-7&ui-page=profile2-0" class="ui-link-inherit">
<h3 class="ui-li-heading">Headin2</h3>
<p class="ui-li-desc">Content 2</p></a><
</div>
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div>
</li>
</ul>
</div>
NOTE the href for both links refers to profile2-0
Interestingly, the pages generated for the child links have the same tabindex (0), as well as the same data-url. This is the code for both pages:
<div data-role="page" data-url="/demo?a=53&b=-7&ui-page=profile2-0" tabindex="0" class="ui-page ui-body-a">
CONTENT.....
</div>
I use listview("refresh") to refresh the styling, should this also take care of ensuring the page items are uniquely labeled?
Of course, this should be taken care of by JQM, but I cannot see a way to programmatically set a sub page link when creating the list item to ensure the links are unique.
As it has already been pointed out by Taifun, you probably have a problem in the code generating the list items (that you did not provide).
I tried this code, and did not face any issue:
<script>
$(document).on("pageshow", function(){
for(i=0; i<10; i++) {
$("#profile2").append('<li>test ' + i + '</li>');
}
$("#profile2").listview('refresh');
});
</script>
Hope that helps.
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