开发者

Mobile position of images in listview using jQuery

If I add <li class="ui-li-has-thumb"> and then add an image it places it on the left side of the li.

I have two more images. How do I place them on the right side of the li? Ideally they would be side-by-side and not one top of the other.

<ul data-role="listview">
    <% @pending_friends.each do |f| %>
        <li class="ui-li-has-thumb">
          <开发者_运维技巧;img class="ui-li-thumb" src="..." />
          <%= f.name %>
          <img class="accept" src="...." />
          <img class="decline" src="...." />

    <% end %>
</ul>

EDIT

I know there's split button, but is there way to assign my last 2 images to the right? Need 2 buttons, not 1

 -------------------------------------------
|  ------  ----------------------  -------  |
| | ui-  ||                      ||  what  ||
| | li-  ||    Main Content      ||   is   ||
| |thumb ||                      || class  ||
| |      ||                      ||  name  ||
|  ------  ----------------------  -------  |
 -------------------------------------------


Well this is what I came up with, Live Link

  • http://jsfiddle.net/phillpafford/BthnC/6/

A nested navbar in the listview

<div data-role="page">
    <ul data-role="listview" data-theme="a">
        <li>
            <div data-role="navbar">
                <ul>
                    <li>
                      <img src="http://jquerymobile.com/demos/1.0b1/docs/toolbars/glyphish-icons/18-envelope.png" />
                    </li>
                    <li>
                        Title
                    </li>                    
                    <li>&nbsp;</li>                   
                    <li>
                      <img src="http://jquerymobile.com/demos/1.0b1/docs/toolbars/glyphish-icons/88-beermug.png" />
                    </li>
                    <li>
                      <img src="http://jquerymobile.com/demos/1.0b1/docs/toolbars/glyphish-icons/21-skull.png" />
                    </li>                        
                </ul>
            </div>
        </li>
        <li>
            <div data-role="navbar">
                <ul>
                    <li>
                      <img src="http://jquerymobile.com/demos/1.0b1/docs/toolbars/glyphish-icons/18-envelope.png" />
                    </li>
                    <li>
                        Title
                    </li>                    
                    <li>&nbsp;</li>                   
                    <li>
                      <img src="http://jquerymobile.com/demos/1.0b1/docs/toolbars/glyphish-icons/88-beermug.png" />
                    </li>
                    <li>
                      <img src="http://jquerymobile.com/demos/1.0b1/docs/toolbars/glyphish-icons/21-skull.png" />
                    </li>                        
                </ul>
            </div>
        </li>
    </ul>
</div>
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜