JQuery Mobile - ListViewContent内のリンク

Question

私はjquery mobileのリストビューにユーザー情報をいくつか表示しようとしています。また、私は、次のしている私の見解でそう

.NET MVC 3を使用しています：

<ul class="ui-listview" data-role="listview"> 
<li> 
    <a href="@Url.Action("REMOVED FOR BREVITY")"> 
      <h3 class="ui-li-heading">@entry.DisplayName</h3> 
      <p class="ui-li-desc">@entry.JobTitle</p> 
      <p class="ui-li-desc"> 
      <a href="mailto:@entry.EmailAddress">@entry.EmailAddress</a> 
      </p> 
    </a> 
</li> 
</ul> 

フォーマットのすべてが、mailtoのリンクを除いて正しいです。

これは、リンクがListView項目の左下隅にすべての方法をプッシュされ

• 次のような問題があります。
• リンクが削除されたときには表示されないリストビューアイテム間にギャップが導入されます。

私は放火犯で結果を見ていると私は、結果のHTMLは、親の外内側のタグスティックことがわかりました。

は、換言すれば結果のHTMLは次のようになります。

<a class="ui-link-inherit" href="REMOVED FOR BREVITY"> 
    <h3 class="ui-li-heading">Display Name</h3> 
    <p class="ui-li-desc">JOB TITLE</p> 
</a> 
<p class="ui-li-desc"> 
    <a class="ui-link" href="mailto:EMAILADDRESS">EMAIL ADDRESS</a> 
</p> 

私はこのように見えるためにそれを期待：

<a class="ui-link-inherit" href="REMOVED FOR BREVITY"> 
    <h3 class="ui-li-heading">Display Name</h3> 
    <p class="ui-li-desc">JOB TITLE </p> 
    <p class="ui-li-desc"> 
     <a class="ui-link" href="mailto:EMAILADDRESS">EMAIL ADDRESS</a> 
    </p> 
</a> 

は、このブラウザのやっている、または私は回避することができるものJQuery Mobile？

Answer 1

注意jQuery Mobileは、ウィジェットを初期化するときにjQuery Mobileが追加するので、jQuery Mobileクラスを削除しました。電子メールのリンクにdata-role="button"属性を付けることも重要なので、ボタンウィジェットとしてレンダリングされます。基本的な修正点は、fieldcontainウィジェットにセカンダリリンクを追加してスプリットボタンリンクとしてレンダリングされないようにすることです。ここで

<ul data-role="listview"> 
    <li> 
     <a href="@Url.Action("REMOVED FOR BREVITY")"> 
       <h3>@entry.DisplayName</h3> 
       <p>@entry.JobTitle 
        <div data-role="fieldcontain"> 
         <a data-role="button" href="mailto:@entry.EmailAddress">@entry.EmailAddress</a> 
       </div> 
      </p> 
     </a> 
    </li> 
    </ul> 

デモです：http://jsfiddle.net/jasper/KUgwj/

言われていること、あなたはリスト項目に関連する2つのアクションを持っている場合、通常は、あなたが分割ボタン・リストを使用します。http://jquerymobile.com/demos/1.1.0-rc.1/docs/lists/lists-split.html

これがされ分割ボタン・リストの使用例：

<ul data-role="listview"> 
    <li> 
     <a href="@Url.Action("REMOVED FOR BREVITY")"> 
       <h3>@entry.DisplayName</h3> 
       <p>@entry.JobTitle</p> 
     </a> 
     <a data-icon="gear" href="mailto:@entry.EmailAddress">@entry.EmailAddress</a> 
    </li> 
    </ul> 

ここではデモです：http://jsfiddle.net/jasper/KUgwj/2/

Answer 2

これはjQuery Mobileです。