CODEWITHSUNDEEP
jquery-mobilejquery-mobile-listview
Mobiletainment
Mobiletainment

Reputation: 23261

Place a icon-button inside jQuery Mobile list divider

I'd like to place an icon inside a list-divider, but it seems that jQuery Mobile lets me apply data-icons to normal list items only and not to list items with data-role='list-divider' assigned.

Simply enough, I want the list-divider to display an info button for providing the user with more information about this category, which should look like so: goal

The point is, I'd like to place the info icon (with data-icon='info' or class='ui-icon-info') within the list-divider, while maintaining consistency in the overall style, i.e.:

  1. The category is headed by a list-divider, and not by a list-item that is just styled to look like the list divider.
  2. The icon is displayed on the right side, like the arrows in the list items below. The icon has to have the same style of appearance like the arrows, which means that it should not look like a button or have an extra frame around it.
  3. The list-divider, or at least the icon, should be clickable, so the user is able to get the information about this category.

I'd preferably like to achieve this without any CSS customizations or JavaScript fiddling, using data-attributes only.

This is what I got (using jQuery Mobile 1.3.2):

  1. List-item with data-icon:

    <li data-theme='a' data-icon='info'><a href='#' onclick='alert("Some info...");'>Category: A</a></li>

    Approach 1

    Result:

    • Correct appearance of info-icon
    • Wrong appearance of category, because a normal list-item is used instead of a list-divider

  2. Using a list-item with data-role='list-divider' assigned:

    <li data-role='list-divider' data-icon='info'><a href='#' onclick='alert("Some info...");'>Category: A</a></li>

    Approach

    Result:

    • No icon at all
    • Wrong title appearance and only text is hyperlinked instead of the whole list-item

  3. List-divider with info-button inside:

    <li data-role='list-divider'>Category: A<a href='#' data-role='button' data-icon='info' data-mini='true' data-iconpos='notext' data-inline='true' data-theme='a' onclick='alert("Some info...");'>Category: A</a></li>

    Approach 3

    Result:

    • Info button has wrong appearance
      • The button has a border which I like to remove for consistency, so the icon is shown in its usual disc appearance. Removing data-role='button' doesn't help, because the button wouldn't be rendered at all and would therefore not show the icon.
      • The icon's position is not on the right side. I know it would be possible using data-iconpos='right', but I used this attribute for the icon-only (notext) layout already.
    • Category appearance is not pleasing, as the button increased its height. Even data-mini='true' didn't help.

I know there are a dozen of easy ways doing it the normal, less jQuery Mobile fixated way, but after 3 approaches, I'm eager to find out how this could be done with jQM.

Upvotes: 0

Views: 2345

Answers (1)

Tasos
Tasos

Reputation: 5361

This works, including the click, i just test it

   <li data-role="list-divider">Test<div onclick='alert("Some info...");' class="ui-icon ui-icon-info" style="color:white;float:right"><div></li>

if the icon doesnt align with the rest of the icons add the below to the style

   margin-right: -5px;

and change the pixels size to match the other icons

Upvotes: 1

Related Questions