Skip to content
This repository

Listview does not allow per-listitem data-icon for split lists #3747

Closed
ryanhaney opened this Issue March 06, 2012 · 7 comments

3 participants

ryanhaney John Bender Todd Parker
ryanhaney

The data-icon attribute is ignored for split lists.

Note that non-split list items allow data-icons to be set per-listitem.

Here is an example:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>JQM Listview Icon Test</title>
        <link type="text/css" rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
    </head>
    <body>
        <div id="page" data-role="page">
            <div data-role="header"><h1>Listview Icon Test</h1></div>
            <div data-role="content">
                <ul data-role=listview>
                    <li><a href="#">Star</a><a href="#" data-icon="star">Star</a></li>                    
                    <li><a href="#">Plus</a><a href="#" data-icon="plus">Plus</a></li>
                    <li data-icon="star"><a href="#">Star</a></li>                    
                    <li data-icon="plus"><a href="#">Plus</a></li>
                </ul>
        </div>
    </body>
</html>

And the obligatory jsfiddle:
http://jsfiddle.net/ryanhaney/qnVxY/

John Bender

@ryanhaney

First, I only wish the fiddle was obligatory, thank you for including it :D

This is a feature request so it'll have to wait until after 1.1 is released unless @toddparker thinks it's worth getting into the next rc for 1.1 - in either case you can see the in the branch posted above. If you really need it you can pull that branch, do a build locally, and then rebase the branch onto the latest rc as needed until it's released.

ryanhaney

You're welcome :-)

Thanks for the fix.

Guess I should have mentioned...the functionality I am after worked in the latest stable release and was broken by the current RC. Not sure if I am the only one affected. As a temporary workaround, I am not using split lists. I'd rather use split lists to minimize the actionable surface area of each list item. I've forked the original fiddle and fuddled with links and scripts.

Forked Fiddle with JQM 1.0.1:
http://jsfiddle.net/ryanhaney/DFV6k/

John Bender

@ryanhaney

This is sort of an accidental feature I guess in that we support icons for buttons but for non split list items the expectation is that the icon is defined on the list item. The branch that I pushed expects that the icon to be defined on the list item and not the link. Your feedback is welcome on that implementation.

Also, I'd like to double check that you built your markup as a consequence of the button docs and not the list docs. Which makes sense, but we should clarify or support both options in the future.

ryanhaney

Gotcha. Guess that should be a crack pipe instead of a coffee cup in my gravatar. :-)

After consideration of a few alternatives, I think your implementation is the best.

John Bender

@ryanhaney

Cool, I'll talk with the guys about including it (one line change), and thanks for your help!

Todd Parker

So right now, you can set the split icon globally and the request is just to make this overridable on the individual split links? If it's a one liner, I think that's a good addition for 1.1.

John Bender johnbender closed this March 08, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.