Блог

Я создаю мобильное веб-приложение с использованием фреймворка jQueryMobile, для которого пользователю необходимо показывать 2 списка бок о бок. Загвоздка здесь в том, что я хотел бы, чтобы списки перемещались независимо друг от друга, чтобы пользователь мог выбирать и элемент из списка слева, а другой из списка справа, не прокручивая оба списка одновременно.

Я исследовал следующий плагин для мобильных устройств:

asyraf9.github.com/jquery-mobile/

это отличное решение, но оно больше ориентировано на меню / страницу, и я хотел бы, чтобы оба элемента были списками на одной странице.

Я думал о чем-то вроде:

 <div class="ui-grid-a">
    <div class="ui-block-a" style="width:50%">
        <div class="ui-bar ui-bar-e" style="padding-left:5%;float:left;width: 100%; overflow: scroll;"> 
            <ul data-role="listview">
                <li><a href="a.html">Example A</a></li>
                <li><a href="b.html">Example B</a></li>
                <li><a href="c.html">Example C</a></li>
                <li><a href="d.html">Example D</a></li>
            </ul>                                                                                           
        </div>
    </div>
    <div class="ui-block-b" style="width:50%">
        <div class="ui-bar ui-bar-b" style=" z-index: 10;position: absolute;width: 100%;padding-right: 5%; overflow: scroll;">
            <ul data-role="listview">
                <li><a href="a.html">Example A</a></li>
                <li><a href="b.html">Example B</a></li>
                <li><a href="c.html">Example C</a></li>
                <li><a href="d.html">Example D</a></li>
            </ul>                                                                                           
        </div>
    </div>
</div>    
  

Кто-нибудь еще придумал работоспособное решение?

Спасибо

Взгляните на iScoll 4; возможно, это не jQuery, но это отличный JavaScript-плагин для мобильной прокрутки.

Вы должны добавить идентификатор к каждому UL и прикрепить прокрутку к каждому из них отдельно следующим образом:

В вашем примере вы были бы чем-то вроде этого:

 <script type="application/javascript" src="iscroll.js"></script>
<script type="text/javascript">
    var scroller_1;
    var scroller_2;
    function loaded() {
        scroller_1 = new iScroll('ul-1');
        scroller_2 = new iScroll('ul-2');
    }
    document.addEventListener('DOMContentLoaded', loaded, false);
</script>
  

Я надеюсь, что это поможет!

Дорожная карта jQueryMobile http://jquerymobile.com/roadmap / говорит, что независимый сколлинг должен появиться в версии 1.7

В качестве обходного пути, возможно, добавление divs через iframe может предложить неуклюжее решение.