Search jQuery

jQuery Forum

JQuery Mobile Selected List Item

in jQuery Mobile • 9 years ago

How do I go about creating a listview with a selectable item as shown in this screen shot: http://awesomescreenshot.com/07di8jff8

Say I am starting with the following listview definition, what attribute am I missing to make it look and operate as what's highlighted in the screenshot? I tried a combination of attributes in the online doc, but without much luck. Any help is much appreciated.

<ul data-role="listview" data-theme="d">
    <li><a href="a.html">Option A</a></li>
    <li><a href="b.html">Option B</a></li>
    <li><a href="c.html">Option C</a></li>
</ul>

Replies(6)

watusiware

Re: JQuery Mobile Selected List Item

9 years ago

Your screenshot doesn't "operate" (after all, it's just a screenshot), so I have no idea how you expect it to operate.

What is it that you expect, and in what way is it not working that way?

If you use the markup as shown above, and the standard jQuery Mobile CSS, when you click on a row, it should highlight in blue and navigate to the given URL.

Is it not doing that?

If not, then you need to post a complete example (not just a snippet), and make sure to show the content of <head>.

steacha

Re: JQuery Mobile Selected List Item

9 years ago

What I meant by 'operate' was that the list item gets the checkmark and/or is highlighted when it is clicked on (selected). As it is now, with the code above, I see the highlighting (not same colour as in the screen shot, but that is probably due to my data-theme choice) when the cursor hovers over the list items, but not the checkmark changes.

I assumed that, by default, the CSS and JS for this behaviour already 'worked as shown in the screen shot'. Does this clarify what I am trying to achieve?

watusiware

Re: JQuery Mobile Selected List Item

9 years ago

jQuery Mobile does not add a checkmark to selected items. I'm not sure where you got that idea.

If you want to change the icon to a checkmark, you will have to do that yourself.

steacha

Re: JQuery Mobile Selected List Item

9 years ago

I got that idea from the jquery mobile list of UI elements itself (http://jquerymobile.com/designs/ - see Smartphone Mobile UI Elements, then List Item Variations). I figured that the themes and JS came with it by default.

watusiware

Re: JQuery Mobile Selected List Item

9 years ago

The page you linked-to above is more than 2 years old, and comes from prior to the first official release of jQuery Mobile. It presents proposed design mockups. Some of those proposed designs have subsequently been incorporated into jQuery Mobile. Some have not.

While perhaps of some historical interest to somebody, It is obsolete, and probably should be removed from the website.

There is no "checked" option for list items.

steacha

Re: JQuery Mobile Selected List Item

9 years ago

Gotcha, thanks for the clarification.

Top Reply

Response title

Attachments

jQuery Forum

JQuery Mobile Selected List Item

Replies(6)

Re: JQuery Mobile Selected List Item

Re: JQuery Mobile Selected List Item

Re: JQuery Mobile Selected List Item

Re: JQuery Mobile Selected List Item

Re: JQuery Mobile Selected List Item

Re: JQuery Mobile Selected List Item

Statistics

Tags

Actions