첫 번째 <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> 요소의 본문 복사본 내에 정의 된 태그가 있기 때문입니다. 나는이 왼쪽의 구조를 유지하고 왼쪽 아무것도 실제 링크를 만들 수 없습니다, 따라서 유지하면서 분할 버튼을 만들 수있는 방법 http://jsfiddle.net/MY8Tg/

: 여기

내가 지금까지 무엇을의 jsfiddle입니다 다른 링크가 제대로 작동합니까 ??

그리고 Split 버튼과 똑같이 가운데 정렬해야합니다. 상자 밖에서 이것이 가능한 이유는 무엇입니까?

Answer 1

서라운드 왼쪽과 오른쪽 div의와 섹션과 오른쪽 줄은 UI-리튬 링크 고도의 클래스 div에 : 여기

<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

Gajotres의 대답에서 영감을 얻어 jQuery mobile listviews split buttons, right button only에서 그랬습니다.

• Google 크롬 개발자 도구의 요소를 확인했습니다.

• 그 정보에서 아래 스타일이 만들어졌습니다. 당신이 당신의 자신의 테마를 사용하는 경우, 올바른 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라는 파일에 해당 스타일을 저장 (아래 참조) <link>를 통해 내 HTML로로드. <style> 태그 안에 html로 CSS 코드를 추가 할 수도 있습니다. (<style>.ui-listview ... </style>).

  여러 테마를 사용하는 경우

  <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, ...) 생성 주시기 :

<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"> 

모든 <li> 내에서 클래스 nolink-a을 처음 <a> 요소를 준 필요한 경우 nolink-x 스타일을 추가하십시오. 어쨌든 하나만 사용하는 경우 -a을 건너 뛰고 요소 nolink을 호출 할 수도 있습니다.

업데이트 : 왜 유래 내 첫 번째 게시물과 함께가는 첫 바이올린을 만들 수 없습니다 : http://jsfiddle.net/dc3re3L2/ :