JQuery Mobile - Lien dans ListViewContent

Question

J'essaie d'afficher des informations d'utilisateur dans une liste listée dans jquery mobile. J'utilise aussi .NET MVC 3

Donc à mon avis, je donne les résultats suivants:

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

Toutes la mise en forme est correcte sauf pour le lien mailto.

Il a les problèmes suivants

• Link est poussé jusqu'au coin inférieur gauche de l'élément listview.
• Il introduit un écart entre les éléments de la vue liste qui ne sont pas présents lorsque le lien est supprimé.

Je l'ai regardé les résultats dans Firebug et je trouve que le code html résultant colle l'étiquette intérieure extérieur du parent.

En d'autres termes, le résultat HTML ressemble à ceci:

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

Quand je pensais à ressembler à ceci:

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

Est-ce faire, ou quelque chose du navigateur je peux contourner en JQuery Mobile?

Answer 1

avis Je supprimé les classes jQuery Mobile depuis jQuery Mobile les ajouter quand il initialise les widgets. Il est également important de donner au lien e-mail un attribut data-role="button" afin qu'il soit rendu sous la forme d'un widget de bouton. Le correctif de base consiste à ajouter le lien secondaire à un widget fieldcontain pour qu'il ne soit pas rendu sous la forme d'un lien à deux boutons.

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

Voici une démo: http://jsfiddle.net/jasper/KUgwj/

Cela dit, généralement lorsque vous avez deux actions associées à un élément de liste, vous utilisez un split-bouton-list: http://jquerymobile.com/demos/1.1.0-rc.1/docs/lists/lists-split.html

C'est un exemple d'utilisation des listes boutons-split:

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

Voici une démo: http://jsfiddle.net/jasper/KUgwj/2/

Answer 2

C'est jQuery Mobile. Vous pourriez probablement mettre de cette façon:

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