I try to make "list-divider" item (Mail), it can clickable like other item (Inbox, Outbox)
But when i put a tag inside, it's a link like below
How to make "list-divider" item (Mail) to clickable item like (Inbox, Outbox) item thank
Here is my code
<ul data-role="listview" data-inset="true" data-divider-theme="a">
<li data-role="list-divider">Mail</li>
<li>Inbox</li>
<li>Outbox</li>
</ul>
Can try the simplest option
<ul data-role="listview" data-inset="true" data-divider-theme="a">
<li data-role="list-divider" id="lild">Mail</li>
<li>Inbox</li>
<li>Outbox</li>
</ul>
$('#lild').click(function () {
alert('click on Mail');
});
DEMO
Try below code .Hope it will work for you.
<ul data-role="listview" data-inset="true" data-divider-theme="a">
<li data-role="list-divider">Mail</li>
<li>Inbox</li>
<li>Outbox</li>
</ul>
Related
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 have problem of dynamically URL in a popup. Here my code:
<!-- content -->
<ul data-role="listview">
<li data-role="list-divider">Group 1</li>
<li data-icon="false">List 1a</li>
<li data-icon="false">List 1b</li>
<li data-role="list-divider">Group 2</li>
<li data-icon="false">List 2a</li>
</ul><!-- /content -->
<!-- popup-menu -->
<div data-role="popup" id="popup-menu">
<ul data-role="listview" style="min-width:210px;">
<li data-role="divider">Choose an action</li>
<li>View details</li>
<li>Share</li>
</ul>
</div><!-- /popup-menu -->
Basically, when I click link on my popup, I'll go to the page where the callee's url is.
So, if I click List 1a the popup shows, then I click View details the page direct me to URL person.php?id=1
How can I do that?
I could just create popup divs multiple times according to the number of the list, but I think it's a waste of DOM object (my last resort if I don't find any elegant solution)
Thanks
Since you actually need to pass only an id of a person to your popup you can achieve your goal this way:
First of all simplify your listview markup and store an id in data-id attribute of an anchor of a listview item
<ul data-role="listview" id="list">
<li data-role="list-divider">Group 1</li>
<li data-icon="false">List 1a</li>
<li data-icon="false">List 1b</li>
<li data-role="list-divider">Group 2</li>
<li data-icon="false">List 2a</li>
</ul>
and add an id tag to 'View Details` anchor in your popup for easier access later on
<li><a id="details" href="#">View details</a></li>
Second on click() event store current id to a globally available variable (let's call it currentId) and programmatically open the popup.
var currentId = 0;
...
$('#page').on('pageinit', function(){
$('#list li a').click(function(e){
e.preventDefault();
currentId = $(this).attr("data-id");
$("#popup-menu").popup("open", {transition:"slideup"} );
});
});
Third in popupbeforeposition event construct your url and assign it to appropriate anchor.
var baseURL = "person.php?id=";
...
$('#popup-menu').on('popupbeforeposition', function(){
$("#details").attr("href", baseURL + currentId);
});
And finally here is working jsFiddle for you.
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 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/
Markup:
<ul>
<li>
<ul id="ratx">
<li>Location</li>
<li class="bar"><span></span></li>
<li class="value">4</li>
</ul>
</li>
<li>
<ul id="ratx">
<li>Hotel Services</li>
<li class="bar"><span></span></li>
<li class="value">5</li>
</ul>
</li>
<li>
<ul id="ratx">
<li>Hotel Facilities</li>
<li class="bar"><span></span></li>
<li class="value">3</li>
</ul>
</li>
<li>
<ul id="ratx">
<li>Room Cleanliness</li>
<li class="bar"><span></span></li>
<li class="value">4</li>
</ul>
</li>
<li>
<ul id="ratx">
<li>Value for Money</li>
<li class="bar"><span></span></li>
<li class="value">1</li>
</ul>
</li>
</ul>
I want to represent User Ratings dynamically using JQuery so I made a function like this,
jQuery:
$("ul#ratx").each(function(index) {
var val = $(this).children(".value").text();
var barval = val * 40;
/* compute ratings */
$("li.bar span").css("width", barval);
});
Now, when I alert barval I get all 5 values but when I try to apply the "compute ratings" line, all it does is apply the last value that it finds. How should I go about this?
Sorry if the question is a confusing. I am not quite sure how to phrase everything.
The problem is that, while interating through each elements it find, it is applying a common value to all li.bar span. You should represent a single element, you are trying to apply to.
$(this).children("li.bar span").css("width", barval);
Update
Here is a working Demo
The snippet that worked was
$(this).find("li.bar").children("span").css("width", barVal );
Also, I changed the display property of the span to display: inline-block;
You are setting the css for all the elements in the set $("li.bar span"). So at the end, they all have the same width of the last parsed value.
Without seeing you markup, it's difficult to propose you a code solution though.