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
Related
I want to show a view with 2 listview like this:
But when I implement by Kendo UI Mobile with:
<div id="cptTab" data-role="view" data-title="Billing" data-layout="billing-layout">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title">CPT</span>
<a data-align="left" data-role="button" href="#censusmainTab">Census</a>
<a data-align="right" data-role="button" data-click="onNavigateToAddCpt">+</a>
</div>
</header>
<div>
Patient:
<label>
<input readonly="true" class="PatientNameLabel" />
</label>
</div>
<div>NEW CPT's</div>
<ul data-role="listview" id="cptsListView" data-click="onCPTItemClicked" />
<div>PREVIOUS CPT's</div>
<ul data-role="listview" id="cptsPreviousListView" data-click="onPreviousCPTItemClicked" />
</div>
But it display like this, it's missing 2nd listview (Previous listview):
Please let me know if I did something wrong or it's a bug of Kendo UI Mobile.
Thanks
You could use
<ul data-role="listview" data-type="group" id="ListView" data-click="onItemClicked"/>
to create two group, the first for new CPT's and the second for previous CPT's.
The function onItemClicked should change its behaviour according to which group is clicked.
see the documentation for better details
Try this code
<ul data-role="listview" data-style="inset" data-type="group">
<li>NEW CPT's
<ul>
<li>
<a> 1 st item in 1st list view </a>
</li>
</ul>
</li>
<li>PREVIOUS CPT's
<ul>
<li>
<a >1 st item in 2nd list view </a>
</li>
<li>
<a >2nd item in 2nd list view </a>
</li>
</ul>
</li>
</ul>
For live demo click Here
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
I am searching a plugin in jQuery mobile for tab implementation. tabs must be in content of the page. This is wat I have...
<div data-role="page" id="nav">
<div data-role="page" id="nav">
<div data-role="header">
<h3>
Header
</h3>
</div>
<div data-role="content">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>
<a href="#one" data-theme="" data-icon="" class="ui-btn-active ui-state-persist">
Button
</a>
</li>
<li>
<a href="#" data-theme="" data-icon="">
Button
</a>
</li>
<li>
<a href="#" data-theme="" data-icon="">
Button
</a>
</li>
<li>
<a href="#" data-theme="" data-icon="">
Button
</a>
</li>
<li>
<a href="#" data-theme="" data-icon="">
Button
</a>
</li>
</ul>
</div>
<div data-role="page" id="one" data-transition="slide">
<div data-role="content" style="background-color:#ff0;">
<h1>One</h1>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h3>
Footer
</h3>
</div>
</div>
When i click on page id "one". it is not displaying its respective content.
Can anyone pls help me.
Or you can use my tabview plugin. Based on JQM collapsbile set, you just need to replace JQMs collapsible and collapsible set widget with my versions. Old collapsibles will continue working as normal. When you add data-type="horizontal" to a collapsible set, it becomes ... tabs...
Demo here, Repo on Github.
I like the other solution, too.
I modified jQuery.mobile-tabs to allow the tab bar to be placed anywhere within the page. Is this what you had in mind?
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
I'm new to jquery mobile and need some help to move further in my application
I used NAVBAR with two buttons view and two buttons are navigating fine and displaying different list views & when I click on list view item the page is navigating to another HTML page and displaying related data but the problem is I'm not able to view navbar in next page...
I want the navbar to be constant for all pages like tabgroup activity in android.
anyone please help me with good example and application or show me some good links to achieve this...
<body>
<div data-role="page" id="page1">
<div data-role="content">
<div data-role="navbar" id="nav1">
<ul>
<li>Dashboard</li>
<li>Deals</li>
</ul>
</div>
<div class="ui-grid-but" id="list">
<div class="ui-block-a">
<a href="#lv1" data-role="button" id="button1" >
<img src="task.png" alt="Tasks" /></a>
</div>
<div class="ui-block-b">
<a href="#lv2" data-role="button" id="button2">
<img src="reminder.png" alt="Reminders" /></a>
</div>
</div>
<div class="def_content_div" id="dashboard">
<ul data-role="listview" data-inset="true">
<li>List View 1 </li>
<li><a href="#lv2" >List View 2</a> </li>
<li><a href="#lv3" >List View 3</a> </li>
<li><a href="#lv4" >List View 4</a> </li>
</ul>
</div>
<div class="content_div" id="deals">
<ul data-role="listview"data-inset="true">
<li> List View 5</li>
<li> List View 6</li>
<li>List View 7</li>
<li>List View 8</li>
</ul>
</div>
</div>
The best way to achieve this is to put your navbar inside a JQM header and use the same data-id for every header. i.e.
<div data-role="header" data-posistion="fixed" data-id="constantNav">
<div data-role="navbar">
<ul>
<li>Dashboard</li>
<li>Deals</li>
</ul>
</div>
</div>
You have to include the above code snippet in every listview page. That will give the appearance of a constant fixed nav menu.
Here is an example as requested http://jsfiddle.net/codaniel/z5VYF/1/
I got the solution from http://jquerymobile.com/demos
According to codaniel's answer, we need to include the code snippet in every listview page.
And then, we need to add the following class to the "current" nav-button of every page.
class="ui-btn-active ui-state-persist"
For the first front page:
<div data-role="header" data-posistion="fixed" data-id="constantNav">
<div data-role="navbar">
<ul>
<li>Dashboard</li>
<li>Deals</li>
</ul>
</div>
</div>
And the second page:
<div data-role="header" data-posistion="fixed" data-id="constantNav">
<div data-role="navbar">
<ul>
<li>Dashboard</li>
<li>Deals</li>
</ul>
</div>
</div>