Squeak.ru - шаблоны программирования

Как реализовать прокручиваемую панель содержимого в jQuery Mobile 1.3

Я использую сетку, чтобы имитировать какое-то разделенное представление, где я хочу использовать левую сторону вместе со списком, чтобы показать некоторые кнопки навигации, и правую сторону, чтобы показать некоторый контент.

теперь список действительно длинный, и я хочу, чтобы его можно было прокручивать. поэтому панель просмотра списка должна быть прокручиваемой, в то время как панель контента остается в полноэкранном режиме (или позже получает свою собственную прокручиваемую панель контента). как это возможно с jQM? спасибо!

jquery css jquery-mobile iscrollview jquery-mobile-panel
16.05.2013

Ответы:


1

Решение

То, что вы хотите, не может быть сделано так просто. Независимо от того, на какой платформе вы работаете, почти невозможно создать 2 прокручиваемые панели, и каждая из них работает отдельно, особенно на мобильных устройствах. Но как всегда есть обходной путь.

Рабочий пример: http://example.gajotres.net/iscrollview/

Я не могу создать вам jsFiddle, потому что iscrollview не не работать в этой среде. Если вы еще не знаете, iscrollview — это мобильный плагин jQuery, созданный в качестве оболочки вокруг iscroll. Iscroll — это плагин, созданный для предоставления прокручиваемого контента мобильным браузерам.

В этой реализации используется фиксированная плавающая правая панель. В то время как остальная часть страницы прокручивается, эта панель создаст иллюзию, будто она закреплена на правой стороне страницы.

Протестировано на

  1. Windows Firefox
  2. Виндовс Хром
  3. Андроид Хром
  4. Стек Samsung Galaxy S3 Android-браузер

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>

            <link rel="stylesheet" href="http://www.fajrunt.org/css/jquery.mobile-1.3.1.min.css" />
            <link rel="stylesheet" href="http://www.fajrunt.org/css/jquery.mobile.iscrollview.css" />
            <link rel="stylesheet" href="http://www.fajrunt.org/css/jquery.mobile.iscrollview-pull.css" />   
            <style>
                #iscroll-listview {
                    margin: 0 !important;
                }

                .right-pane {
                    position: fixed;
                    width: 50%;
                    height: 100%;
                    background: red;
                    top:0;
                    color: white;
                    margin-top: 40px;
                }
            </style>
            <script src="http://www.fajrunt.org/js/jquery-1.9.1.min.js"></script>
            <script src="http://www.fajrunt.org/js/jquery.mobile-1.3.1.js"></script>    
            <script src="http://www.fajrunt.org/js/iscroll.js"></script>
            <script src="http://www.fajrunt.org/js/jquery.mobile.iscrollview.js"></script> 
        </head>

        <body>
            <div data-role="page" class="index-page">

                <div data-role="header" data-position="fixed" data-tap-toggle="false" data-transition="none" data-id="header">
                    <h1>INDEX PAGE</h1>
                </div>

                <div data-role="content">
                    <div class="ui-grid-a">
                        <div class="ui-block-a" >
                            <div class="example-wrapper" data-iscroll>
                                <p>some content that will be scrolled</p>
                                <p>Some more content that will be scrolled</p>
                                <ul data-role="listview" id="iscroll-listview">
                                    <li>Item 1</li>
                                    <li>Item 2</li>
                                </ul>
                                <p>Even more content. It will scroll whatever is in the data-iscroll div.</p>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>
                                <h1>Hello Cirrus.</h1>   
                            </div>          
                        </div>
                        <div class="ui-block-b">
                            <div class="right-pane">
                                This is a right pane.<br>
                                This is a right pane.<br>
                                This is a right pane.<br>
                                This is a right pane.<br>
                                This is a right pane.<br>
                                This is a right pane.<br>
                                This is a right pane.<br>                               
                            </div>                          
                        </div>
                    </div><!-- /grid-a -->        
                </div>

                <div data-role="footer" data-position="fixed" data-tap-toggle="false" data-transition="none" data-id="footer">
                    <h1>My Footer</h1>
                </div>

            </div>
        </body>
    </html>

Заключительные заметки

Если вы хотите узнать больше об iScroll + iScrollView, о том, как они работают с рабочими примерами, взгляните на этот статья.

16.05.2013
  • отличный ответ, спасибо! да, я тоже наткнулся на iscrollview. но необходимо ли использование iscrollview? разве недостаточно установить правую панель в фиксированное положение? кстати: на jsbin это работает: jsbin.com/oqarih/2 16.05.2013
  • Из ваших тегов я понял, что вам это нужно для iPad (или других мобильных устройств). Если это так, вам нужен isscrollview для большого списка. iscrollview не нужен в настольном браузере, потому что они не страдают от сенсорных проблем, таких как сенсорные устройства. И последнее, если вы создаете приложение только для устройств iOS, тогда есть решение, которое не требует iscrollview, но, к сожалению, работает только на устройствах iOS. 16.05.2013
  • Мне нужно что-то для мобильных и настольных компьютеров, и мне нравится это решение. но некоторые проблемы должны быть решены: не должно быть полосы прокрутки для просмотра списка ИЛИ полоса прокрутки должна отображаться прямо справа от списка прокрутки внутри левой панели, а не справа от правой панели. Это возможно? 16.05.2013
  • В принципе нет, это комплексная проблема. В настольных браузерах вы можете создать решение, в котором пользовательская полоса прокрутки будет только на левой панели. Но в то же время это невозможно на мобильных устройствах. На мобильных устройствах вы не можете прокручивать большой список без iscrollview, и тот же iscrollview вызовет классическую полосу прокрутки браузера в правой части браузера. 16.05.2013
  • проклятие. самые простые запросы функций создают самые большие проблемы... как насчет использования слайд-панели в качестве боковой панели, которая изначально открыта? вместо решения сетки. 16.05.2013
  • Честно говоря, я тоже думал о той же идее, но в настоящее время нет времени ее проверить. попробую в течении дня. 16.05.2013
  • Это здорово, спасибо! Я также играл с этим, и, похоже, это не тот путь, потому что он либо накладывается, либо отталкивает панель содержимого. во всех трех состояниях он накладывает/маскирует содержимое. :-( кажется, что jQM не готов к использованию в сценариях серьезных веб-приложений... 16.05.2013
  • К сожалению, нам нужно будет дождаться версии 1.4, чтобы увидеть, как это работает. Что ты тогда выбрал? Вы собираетесь отказаться от этого маршрута? 16.05.2013
  • Я подумываю вернуться к sencha touch и/или ExtJS. Но здесь нужно приобрести лицензию. стоит попробовать еще один последний маршрут с jQM: github.com/asyraf9/jquerymobile-splitview 16.05.2013
  • Будьте осторожны с этим плагином, он нестабилен с последними версиями jQM. Я думаю, что разработчик сделал собственный фреймворк jQM для работы с этим плагином. Просто внимательно все прочитайте. 16.05.2013
  • И последнее, удачи. Мне нравится jQM, но это боль в *** :) 16.05.2013
  • да и об этом тоже читал. не могу использовать его. Итак, давайте посмотрим, готов ли этот файл к версии 1.3: simplesplitview.sourceforge.net 16.05.2013
  • обратно на дорогу. он относительно хорошо работает с двумя плавающими div в качестве контейнеров панели и некоторой магией jquery (установить высоту()) и CSS-порошком (overflow-y:scroll)... 17.05.2013
    • Новые материалы
    Угловая структура архитектуры
    Обратите внимание, что эта статья устарела, я решил создать новую с лучшей структурой и с учетом автономных компонентов: https://medium.com/@marekpanti/angular-standalone-architecture-b645edd0d54a..
    «Данные, которые большинство людей используют для обучения своих моделей искусственного интеллекта, поставляются со встроенным…
    Первоначально опубликовано HalkTalks: https://hacktown.com.br/blog/blog/os-dados-que-a-maioria-das-pessoas-usa-para-treinar-seus-modelos-de-inteligencia-artificial- ja-vem-com-um-vies-embutido/..
    Сильный ИИ против слабого ИИ: различия парадигм искусственного интеллекта
    В последние годы изучению и развитию искусственного интеллекта (ИИ) уделяется большое внимание и прогресс. Сильный ИИ и Слабый ИИ — две основные парадигмы в области искусственного интеллекта...
    Правильный способ добавить Firebase в ваш проект React с помощью React Hooks
    React + Firebase - это мощная комбинация для быстрого и безопасного создания приложений, от проверки концепции до массового производства. Раньше (знаете, несколько месяцев назад) добавление..
    Создайте API с помощью Python FastAPI
    Создание API с помощью Python становится очень простым при использовании пакета FastAPI. После установки и импорта вы можете создать приложение FastAPI и указать несколько конечных точек. Каждой..
    Веселье с прокси-сервером JavaScript
    Прокси-серверы JavaScript — это чистый сахар, если вы хотите создать некоторую общую логику в своих приложениях, чтобы облегчить себе жизнь. Вот один пример: Связь клиент-сервер Мы..
    Получить бесплатный хостинг для разработчиков | Разместите свой сайт за несколько шагов 🔥
    Статические веб-сайты — это веб-страницы с фиксированным содержанием и его постоянным содержанием. Но теперь статические сайты также обрабатывают динамические данные с помощью API и запросов...