JQuery Mobile-ListViewContent中的链接_Jquery_Asp.net Mvc 3_Jquery Mobile

JQuery Mobile-ListViewContent中的链接

jquery asp.net-mvc-3 jquery-mobile

JQuery Mobile-ListViewContent中的链接,jquery,asp.net-mvc-3,jquery-mobile,Jquery,Asp.net Mvc 3,Jquery Mobile,我试图在jquery mobile的列表视图中显示一些用户信息。我也在使用.NETMVC3 因此，在我看来，我有以下几点： <ul class="ui-listview" data-role="listview"> <li> <a href="@Url.Action("REMOVED FOR BREVITY")"> <h3 class="ui-li-heading">@entry.DisplayName</h3

我试图在jquery mobile的列表视图中显示一些用户信息。我也在使用.NETMVC3

因此，在我看来，我有以下几点：

<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项的左下角
它会在删除链接时不存在的列表视图项之间引入间隙

我查看了firebug中的结果，发现结果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>

当我期望它看起来像这样时：

<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中解决的问题？

这就是JQuery Mobile。你可以这样说：

<div class="ui-li-desc">
    <p>@entry.JobTitle</p>
    <p><a href="mailto:@entry.EmailAddress">@entry.EmailAddress</a></p>
</div>


@entry.JobTitle

这是jQuery Mobile。你可以这样说：

<div class="ui-li-desc">
    <p>@entry.JobTitle</p>
    <p><a href="mailto:@entry.EmailAddress">@entry.EmailAddress</a></p>
</div>


@entry.JobTitle

注意，我删除了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>

下面是一个演示：

也就是说，通常当您有两个与列表项关联的操作时，您会使用拆分按钮列表：

这是一个使用拆分按钮列表的示例：

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

这里是一个演示：