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.

Имеются следующие проблемы

• Ссылка перемещается полностью в левый нижний угол элемента списка.
• Вводится промежуток между элементами представления списка, которого нет при удалении ссылки.

Я посмотрел результаты в 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> 

Это делает браузер, или что-то, что я могу обойти в JQuery Mobile?

Answer 1

Обратите внимание, что я удалил классы 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/

Answer 2

Это jQuery Mobile. Вы могли бы, вероятно, сказать это так:

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