Справка по мобильному контенту jquery

Question

Я смотрел на использование разборного контента JQM, и хотя я понял, как его использовать, я не вижу способа использовать его с элементами списка. Я проверил документы, а также провел время, просматривая Google, но не пошел. Если это возможно, я был бы признателен, если бы кто-то мог показать мне, как это сделать. Спасибо

<ul data-role="listview" data-inset="true">
  <li><a href="#newintake">New Intake</a></li>
  <li><a href="#boxretrieval">Box Retrieval</a></li>
  <li><a href="#boxreturn">Box Return</a></li>
  <li><a href="#boxdestruction">Box Destruction</a></li>
  <li><a href="#permboxdestruction">Permanent Box Destruction</a></li>
</ul>

Answer 1

Примерно так:

• http://jsfiddle.net/deeu8/4/

HTML:

<div data-role="page" id="home"> 
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
            <li data-role="list-divider">Nagivsation</li> 
            <li><a href="#page2">Page 2</a></li> 
        </ul> 
        <div data-role="collapsible" data-collapsed="true">
            <h3>Numeric Section</h3>
            <p>
                <ul data-role="listview">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </p>
        </div>
    </div>
</div>

<div data-role="page" id="page2"> 
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
            <li data-role="list-divider">Nagivsation</li> 
            <li><a href="#home">Home Page</a></li> 
        </ul> 
        <div data-role="collapsible" data-collapsed="true">
            <h3>Alpha Section</h3>
            <p>
                <ul data-role="listview">
                    <li>A</li>
                    <li>B</li>
                    <li>C</li>
                </ul>
            </p>
        </div>
    </div>
</div>

Answer 2

У меня та же проблема, и мой лучший подход сейчас такой:

<ul data-role="listview" data-inset="true">
    <li>
       <a href="#">
          <p>
             <div data-role="collapsible">
                <h3>Title</h3>
                <p>collapsible content</p>
             </div>
          </p>
       </a>
    </li>
</ul>

Это не так уж и приятно, но я справлюсь с некоторыми настройками CSS.

Answer 3

Путь наименьшего сопротивления состоит в том, чтобы не свернуть UL путем сокрытия LI, а вместо этого поместить UL в div и свернуть это.

Как это:

<a href="#" class="someButton">Click to toggle</a>

<div class="collapser">
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
</div>

А потом этот JS:

$('.someButton').click( function() {
    $('.collapser').toggle();
});

Кроме того, обратите внимание, что я мог бы сделать более сложные функции show / hide, которые сохраняют текущее состояние div-модуля свертки ... используя show (), hide (), slideToggle (), fadeToggle () и т. Д.

Answer 4

Это гораздо более динамичное и элегантное решение, работающее с несколькими списками.

<ul data-role="listview" data-inset="true">
    <li class="cars" data-role="list-divider" role="heading">French Cars</li>
    <li><a href="">Bugatti</a></li>
    <li><a href="">Citroen</a></li>
    <li><a href="">Ligier</a></li>
    <li><a href="">Peugeot</a></li>
    <li><a href="">Renault</a></li>
    <li><a href="">Talbot</a></li>
</ul>



$('#cars').click(function(){
    $(this).siblings().toggle();
    $(this).toggleClass("ui-corner-bottom");
});

Answer 5

К сожалению, складное содержимое jQM не применимо к спискам.Я надеюсь, что это произойдет в ближайшем будущем.

Вот мой способ сделать это.Это можно улучшить, добавив иконку.

html:

<ul data-role="listview" data-inset="true">
    <li id="cars" data-role="list-divider" role="heading">French Cars</li>
    <li class="car"><a href="">Bugatti</a></li>
    <li class="car"><a href="">Citroen</a></li>
    <li class="car"><a href="">Ligier</a></li>
    <li class="car"><a href="">Peugeot</a></li>
    <li class="car"><a href="">Renault</a></li>
    <li class="car"><a href="">Talbot</a></li>
</ul>

javascript:

$("#cars").click( function() {
  $(".car").toggle();
  $("#cars").toggleClass("ui-corner-bottom");
});

Посмотреть вживую: http://jsfiddle.net/gCkZ9/3