Список сплит-кнопок без первого тега <a>?

Question

Мне нужна кнопка справа - выровненная по центру <ul data-role="listview" /> элемент.

Вот HTML-код, который я использую, который делает это лучше всего, что я могу придумать, но это не совсем кнопка разделения, и она даже не выровнена по середине содержимого...

<ul data-role="listview" data-theme="d" data-divider-theme="d">
    <li>
        <h3>New York Group Applies for CDFI Status</h3>
        <p>The New York Business Development Corp. is <a target="_blank" href="http://www.bizjournals.com/albany/news/2013/09/05/nybdc-doubling-albany-office-space.html">doubling its office space</a> in downtown Albany.</p>
        <p class="ui-li-aside read_more"><a href="#" data-role="button" data-transition="slide" data-mini="true" data-icon="arrow-r" data-theme="d" data-shadow="false" data-inline="true" data-iconpos="notext" class="ui-btn-right">Read More</a></p>
    </li>
</ul>

Итак, проблема здесь в том, что я бы хотел, чтобы он отображался так же, как и при использовании метода Split Button, однако, если я попытаюсь использовать это, он испортит внешний вид, потому что у меня нет первого <a> тег оборачивая <h3>и первый <p> элемент. А также потому, что у меня есть теги, определенные в основной части <p> элементы.

Вот jsfiddle того, что я имею до сих пор: http://jsfiddle.net/MY8Tg/

Как я могу сделать эту кнопку разделения, сохраняя структуру левой стороны и не превращая левую сторону в реальную ссылку на что-либо, таким образом поддерживая правильную работу других ссылок?

И мне нужно, чтобы это было выровнено по центру точно так же, как кнопка Split Почему это невозможно прямо из коробки??

Answer 1

Окружите левый и правый разделы div и дайте правому div класс ui-li-link-alt:

<ul data-role="listview" data-theme="d" data-divider-theme="d" class="has-right-radio">
    <li>
        <div>
            <h3>New York Group Applies for CDFI Status</h3>
            <p>The New York Business Development Corp. is <a target="_blank" href="http://www.bizjournals.com/albany/news/2013/09/05/nybdc-doubling-albany-office-space.html">doubling its office space</a> in downtown Albany.</p>
        </div>

        <div class="ui-li-link-alt borderLeft">
            <a href="#" data-role="button" data-transition="slide" data-mini="true" data-icon="arrow-r" data-theme="d" data-shadow="false" data-inline="true" data-iconpos="notext" >Read More</a>
        </div> 
    </li>
</ul>

.borderLeft{
    border-left: 1px solid rgb(204, 204, 204);
}

Вот твой обновленный FIDDLE

Answer 2

Вдохновленный ответом Гаджотреса в разделенных кнопках просмотра списка мобильных устройств jQuery, только правая кнопка, я сделал это так:

• проверил элементы в инструментах разработчика Google Chrome

• Исходя из этой информации, создал стиль ниже. Если вы используете свою собственную тему, обязательно используйте правильную background-color:

  .ui-listview > li.ui-li-has-alt > a.ui-btn.nolink-a {
    cursor: default !important;
    font-weight: normal !important;
    background-color: #f5f8f9 !important; /*{a-body-background-color}*/
  }
  

• Я лично сохранил этот стиль в файле под названием jquery.custom.css и загрузил его в мой HTML через <link> (увидеть ниже). Вы также можете добавить код CSS в ваш HTML в <style> теги. (<style>.ui-listview ... </style>).

  <link rel="stylesheet" href="/jquery.mobile-1.4.5/jquery.mobile-1.4.5.css">
  <link rel="stylesheet" href="/jquery.mobile-1.4.5/jquery.from.themeroller.css"> 
  <link rel="stylesheet" href="/jquery.mobile-1.4.5/jquery.mobile.icons.min.css">
  <!-- add your custom css here: -->
  <link rel="stylesheet" href="/jquery.mobile-1.4.5/jquery.custom.css">
  

• дал первый <a> элемент в каждом <li> класс nolink-a:

  <ul data-role="listview" data-split-theme="a" data-inset="true">
    <li>
      <a class="nolink-a">This is your text which doesn't appear as a link</a>
      <a href="/your/link/target/for/the/button/on/the/right"></a>
    </li>
  </ul>
  

Если вы используете несколько тем (-a, -b, ...), не стесняйтесь создавать больше nolink-x стили, если они вам нужны. Если вы все равно используете только один, вы также можете пропустить -a и вызвать элемент nolink,

Обновление: почему бы не создать мою первую скрипку вместе с моим первым постом о stackru: http://jsfiddle.net/dc3re3L2/:)