JQuery Mobile - ListViewContent内的链接

我试图在jQuery移动中的列表视图中显示一些用户信息。我还使用.NET MVC 3JQuery Mobile - ListViewContent内的链接

所以，在我看来，我有以下几点：

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

来源

2012-03-01 Adam

通知我删除了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/

话虽这么说，通常当你有一个列表项相关的两个动作，你可以使用一个拆分按钮列表：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/

来源

2012-03-01 22:13:01 Jasper

不完全是我想要的，但我选择做分割按钮列表。希望我不必，但它会。谢谢！ – Adam 2012-03-01 22:55:30

这就是jQuery Mobile。你也许可以这样说：

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

来源

2012-03-01 22:00:33

谢谢，但不幸的是，产生了相同的结果。 – Adam 2012-03-01 22:03:39

JQuery Mobile - ListViewContent内的链接

回答

相关问题