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
Related
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.
Hi I am using jQuery mobile to build a mobile web application.
And I am learning from this page.
Specifically, how can I display children when I filter in collapsible set?
For example, from the example code, when I enter cats, it gives me back Animal blocks. I need to click it then see the cats. Is there any ways I can display only cats (or in another words: how can auto expand corresponding blocks?) when I search cats.
<form>
<input data-type="search" id="searchForCollapsibleSetChildren">
</form>
<div data-role="collapsibleset" data-filter="true" data-children="> div, > div div ul li" data-inset="true" id="collapsiblesetForFilterChildren" data-input="#searchForCollapsibleSetChildren">
<div data-role="collapsible" data-filtertext="Animals Cats Dogs Lizards snakes">
<h3>Animals</h3>
<ul data-role="listview" data-inset="false">
<li data-filtertext="Animals Cats">Cats</li>
<li data-filtertext="Animals Dogs">Dogs</li>
<li data-filtertext="Animals Lizards">Lizards</li>
<li data-filtertext="Animals Snakes">Snakes</li>
</ul>
</div>
<div data-role="collapsible" data-filtertext="Cars Acura Audi BMW Cadillac">
<h3>Cars</h3>
<ul data-role="listview" data-inset="false">
<li data-filtertext="Cars Acura">Acura</li>
<li data-filtertext="Cars Audi">Audi</li>
<li data-filtertext="Cars BMW">BMW</li>
<li data-filtertext="Cars Cadillac">Cadillac</li>
</ul>
</div>
<div data-role="collapsible" data-filtertext="Planets Earth Jupiter Mars Mercury">
<h3>Planets</h3>
<ul data-role="listview" data-inset="false">
<li data-filtertext="Planets Earth">Earth</li>
<li data-filtertext="Planets Jupiter">Jupiter</li>
<li data-filtertext="Planets Mars">Mars</li>
<li data-filtertext="Planets Mercury">Mercury</li>
</ul>
</div>
</div>
You can use the filterablefilter event (see API) to execute some JS after each search:
$(document).on("filterablefilter", "#collapsiblesetForFilterChildren", function(event)
{
var results = $("[data-role=collapsible]:visible");
if (results.length !== 0)
$(results[0]).collapsible("expand");
});
This code expands the first collapsible in the result set (if present).
JSFiddle
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
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 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