jQuery Mobile Split按钮列表，无图标

Question

I'm trying to do a list with two sections and different links on each one but I am not able to do it without using an icon in the right section of the list.

I have tried to put data-icon='false' everywhere but it doesn't work, it uses the default icon.

I also have tried to use and it works but I am not able to make it look as good as the split list.

Any idea on how to do this??

Thank you very much!

Answer 1

Can you override .ui-icon class of jquery mobile something like this,

.ui-icon-your_name_icon {
   width: 18px;
   height: 18px;
   -moz-border-radius: 0px;
   -webkit-border-radius: 0px;
   border-radius: 0px;
   background-position: 50% 50%;
   background: url("../images/some_one_image_transparent.png") no-repeat scroll 0 0 transparent;
}

I hope this helps. :)

Answer 2

I have managed to do it with controlgroup like this and playing with widths in .css file:

<li data-role='list-divider'>
    <div data-role='controlgroup' data-type='horizontal' >
        <a class='resume' type='button' href='javascript:void(0)'>
            <span class='name' >Object Name </span>
        </a>
        <a class='info' type='button' href='javascript:void(0)'>
            <span class='name'>Max Value </span>
        </a>
    </div>
</li>