I just ran into a Problem. I have a page that has the Tabs widget embeded. The Tabs are working fine. But when I try linking a tab in one Tab the link won't work.
<div data-role="tabs">
<div data-role="navbar">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</div>
<div id="tab1">
<div data-role="tabs">
<div data-role="listview" data-inset="true">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</div>
</div>
</div>
<div id="tab2">
<p>Content</p>
</div>
<div id="tab3">
<p>Content</p>
</div>
</div>
</div>
This is roughly my idea. The Tabs work but the Links inside the first tab don't. Is it possible to do this? For extra Reference:
http://demos.jquerymobile.com/1.4.5/tabs/
So I did some research. According to my Javascript Console there is an Error which makes the links not work inside any of the Tabs. So then I had an Idea of a Workaround. Instead of Linking directly to the Tabs, I binded the Buttons to the Tab links like so:
<a OnClick="document.getElementById('#IdOfTab').click()">Link</a>
This works perfectly. It was as simple as calling the tab instead of trying to link to the page itself. I apologize for not being precise enough in my question.
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
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 want to show a footer that contains a list with links, but when i add the links, the "li" becomes a button. How can i fix it?
Some code:
<div data-role="footer">
<ul data-role="listview">
<li>
<span>Google</span>
</li>
</ul>
</div>
Thanks!
Change your ul to data-role="none" , like this:
<div data-role="footer">
<ul data-role="none">
<li>
<span>Google</span>
</li>
</ul>
</div>
UPDATE:
You could try the following to get your desired style for the li while making it work like a link:
<ul data-role="listview">
<li style="cursor:pointer" onclick="window.location.href='http://www.google.com/'">Google</li>
</ul>
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>
I am trying to create rounded style checkbox using Jquery mobile. In the below link, under multiple selects, choose option select menu i saw this type of checkbox. Is it possible to create that type of checkbox in listview of JQM?
http://jquerymobile.com/test/docs/forms/selects/custom.html#&ui-state=dialog
Thanks...
<ul data-role="listview" id="options">
<li data-icon="checkbox-off"><a>test</a></li>
<li data-icon="checkbox-on"><a>test</a></li>
</ul>
This code snippet makes round edges for listview, you can have any element inside it:
<ol data-role="listview">
<li class="ui-corner-bottom ui-corner-top" data-theme="a" >List Item 1</li>
<li class="ui-corner-bottom ui-corner-top" data-theme="a">List Item 2</li>
<li class="ui-corner-bottom ui-corner-top" data-theme="a">List Item 3</li>
</ol>
See the Demo here
http://jsfiddle.net/qXr79/5/