Постоянный заголовок в jQuery Mobile - PullRequest
Новая
       63

Постоянный заголовок в jQuery Mobile

10 голосов
/ 07 июня 2011

Не могу найти способ назначить награду за мой старый вопрос, поэтому я делаю репост, потому что, возможно, это была ошибка.

Короткая версия: я хочу постоянный заголовок в приложении PhoneGap + JQM, который остается на месте (никогда не перемещается) между переходами страниц, как это может быть сделано в нижнем колонтитуле.

Длинная версия: Во-первых, я совершенно новичок в jQuery и JQM, поэтому, пожалуйста, укажите на любые новые ошибки, которые я допустил.

Я пытаюсь получить заголовок, который сохраняется между различными страницами в приложении. Это должно быть похоже на постоянный нижний колонтитул, который остается на месте при переходе пользователя между страницами. Постоянный нижний колонтитул был достигнут с помощью data-role = "footer" data-id = "(некоторый непротиворечивый идентификатор)" data-position = "fixed". Это работало довольно хорошо (случайные сбои при этом становились неуместными, а затем автоматически исправлялись через пару секунд). Для получения дополнительной информации о том, что я ищу, смотрите «Постоянный нижний колонтитул» здесь http://jquerymobile.com/test/docs/#/test/docs/toolbars/docs-footers.html

И посмотрите пример постоянного нижнего колонтитула по ссылке ниже. Посмотрите, как выбор элемента в нижнем колонтитуле переходит на совершенно новую страницу, но нижний колонтитул не перемещается: http://jquerymobile.com/test/docs/#/test/docs/toolbars/footer-persist-a.html

Сейчас я пытаюсь сделать то же самое, но я хочу, чтобы оно было вверху приложения, а не внизу. Я пробовал следующие вещи:

  • Перемещение нижнего колонтитула в верхнюю часть страницы (не знаю, какой тег перехватывать в jQuery. Пробный div. (Класс jQuery) с использованием нескольких классов jQuery, но ни один из них не работает. Я использовал FireBug, чтобы определить, что это "верхняя часть" "Атрибут CSS, который необходимо изменить.

HTML-код на каждой странице: 

<div data-role="footer" data-position="fixed" data-id="header">
<img src="images/bgheader.png" />
</div>

JavaScript: 

$('div.ui-footer').css('top', '0px');
$('div.ui-footer-fixed').css('top', '0px');
$('div.fade').css('top', '0px');
$('div.ui-fixed-overlay').css('top', '0px');
$('div.ui-bar-a').css('top', '0px');
  • Использование data-role = "header" (не сохраняется, как нижний колонтитул). Этот метод создаст заголовок, который я хочу (потому что я переопределил некоторые CSS), но когда я перехожу между страницами, он не будет поддерживать заголовок вверху. В документации JQM также не указано, что они поддерживают постоянные верхние колонтитулы, и в то же время говорится, что они поддерживают постоянные нижние колонтитулы:

HTML-код на каждой странице: 

<div data-role="header" data-position="fixed" data-id="header" id="header" data-backbtn="false">
<img src="images/bgheader.png" />
</div>

Ответы [ 10 ]

2 голосов
/ 19 октября 2011

Я несколько дней бился об эту проблему, и на этот раз Google не помог.Я наконец-то придумал следующее решение.Он копирует заголовок HTML на новую страницу до начала перехода, а затем удаляет код с предыдущей страницы после завершения перехода.Верхний и нижний колонтитулы по-прежнему будут перемещаться при переходе на другую страницу, но они сохранятся даже при навигации по вложенным спискам. 

// dynamically move the header and footer between pages on load events
$('div.ui-page').live('pagebeforeshow', function(event, ui) {
    // avoid duplicating the header on the first page load
    if (ui.prevPage.length == 0) return;

    // remove the jQuery Mobile-generated header
    $('.ui-header').addClass('to-remove-now');
    $('#header').removeClass('to-remove-now');
    $('.to-remove-now').remove();

    // grab the code from the current header and footer
    header = $('#header')[0].outerHTML;
    footer = $('#footer')[0].outerHTML;

    // mark the existing header and footer for deletion
    $('#header').addClass('to-remove');
    $('#footer').addClass('to-remove');

    // prepend the header and append the footer to the generated HTML
    event.currentTarget.innerHTML = header + event.currentTarget.innerHTML + footer;
});

// remove header from previous page 
$('div.ui-page').live('pagehide', function(event, ui) {
    $('.to-remove').remove();
});

Затем просто добавьте id="header" в div верхнего колонтитула и id="footer" в нижний колонтитул, иразместите их, как обычно, в своем контенте.

2 голосов
/ 25 августа 2011

Немного JQuery сделает свое дело 

<script type="text/javascript">
    $(document).ready(function() {
      $('#lpage1:first').addClass('ui-btn-active'); //set the first tab as active   
      firstContent=$('#content1'); //defining selectors
      secondContent=$('#content2'); 
      secondContent.hide(); //hide the second content division
    });

    // show only the first content div
    function showContent1() { 
        firstContent.show();
        secondContent.hide();
    }
    function showContent2() {
        firstContent.hide();
        secondContent.show();
    }

    //clicking on tab 2 
    $('#lpage2').live('tap',function(event){
        //alert("click");
        showContent2();
    });
</script>
<body> 
<!-- Start of first page -->
<div data-role="page" id="page1">

    <div data-role="header" data-position="fixed">
        <h1>Foo</h1>
        <div data-role="navbar">
            <ul>
                <li><a href="#" id="lpage1" data-transition="pop">Home<br/>&nbsp;</a></li>
                <li><a href="#" id="lpage2" data-transition="pop">My<br/>Profile</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /header -->

    <!-- page1 -->
    <div data-role="content" id="content1"> 
        <p>I'm first in the source order so I'm shown as the page.</p>      
        <p>View internal page called <a href="#bar">bar</a></p> 
    </div><!-- /content -->

    <!-- page2 -->
    <div data-role="content" id="content2"> 
        <p>I'm second in the source order so I'm shown as the page.</p>     
        <p>View internal page called <a href="#bar">bar</a></p> 
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->
1 голос
/ 22 мая 2012

Привет, может быть поздно, но у меня это сработало. 

[data-role=page]
{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    overflow: scroll;
    margin: 0 auto -40px;
}
.footerPlaceHolder
{
    height: 40px;
}
[data-role=footer]{height:40px; bottom:0; position:fixed !important; top: auto !important; width:100%; z-index: 9999;}

Ваш HTML 

<div data-role="page">
    ....Your content....
    <div class="footerPlaceHolder"></div>
    <div data-role="footer"> 
        <a href="#" data-icon="arrow-l" class="ui-btn-left">Back</a>
        <a href="#" onclick="settingsClicked(this);" data-icon="gear" class="ui-btn-right">Settings</a> 
    </div>
</div>

P.S. Пожалуйста, обратите внимание, я не очень хорош в этом, особенно CSS Все комментарии будут с благодарностью.

Спасибо.

1 голос
/ 25 января 2012

Вот пример того, как это сделать с помощью нижнего колонтитула: http://jquerymobile.com/demos/1.0/docs/toolbars/footer-persist-a.html

У меня не было возможности опробовать его, но он должен работать так же с заголовком.

1 голос
/ 16 сентября 2011

1) Помимо файлов jquery.js, загружаются файлы jquerymobile.js и .css, в которые входят: jquery.easing.1.3.js, jquery.mobile.scrollview.js и scrollview.js.(google)

2) Стандартный верхний и нижний колонтитулы, нижний и нижний колонтитулы со стилевым атрибутом ниже: 

<div id="home" data-role="page">...</div>
<div data-role="content"><ul data-role="listview"><li>List item 1</li></ul></div>
<div data-role="footer" style="position: fixed;bottom: 0px;">...</div>

Как подробно описано здесь .

1 голос
/ 16 июня 2011

Добавьте следующий CSS на свою страницу или внизу файла CSS

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

0 голосов
/ 16 августа 2013

Я думаю, что это добавлено в JQM недавно.http://view.jquerymobile.com/1.3.2/dist/demos/widgets/fixed-toolbars/footer-persist-a.html

Эта ссылка ясно говорит о том, что вы можете добавить атрибут data-id в ОБА.Верхний и нижний колонтитулы.Но это не работает для меня.

РЕДАКТИРОВАТЬ: Я заметил, что вы должны включить переходы страниц для постоянного заголовка.Но переходы слишком сильно замедляют работу приложения ...

0 голосов
/ 22 января 2013

Если вы можете обойтись с одним общим заголовком, вы можете предоставить заголовок на своей главной странице: (примечание: нет jQuery, извините, «просто используйте jQuery», ребята :-p) 

<div class="header">
    <div class="logo"></div>
    <div class="menu"></div>
</div>
<div data-role="page" class="page" id="loading">
    <div data-role="content">
        <h1>Your Page</h1>
    </div>
</div>

Затем используйте CSS, чтобы сдвинуть верхнюю часть каждой страницы вниз: 

.ui-page{
    top:64px !important;
}

Я не доволен тем, что ! Важный там, но правила jQueryMИспользование в CSS имеет высшую специфичность без использования идентификатора.Если вы знаете все свои удостоверения личности, вы, вероятно, можете обойтись без них ... Не стесняйтесь предлагать другие правила, которые лучше ... Я слишком долго бьюсь над этим, чтобы меня больше волновать.

0 голосов
/ 03 февраля 2012

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

$( document ).delegate( ".ui-page", "pagebeforeshow", function( event, ui ) {
            var page = $( event.target ),
                footer = page.find( ":jqmData(role='footer')" ),
                id = footer.data( "id" ),
                prevPage = ui.prevPage,
                prevFooter = prevPage && prevPage.find( ":jqmData(role='footer')" ),
                prevFooterMatches = prevFooter.length && prevFooter.jqmData( "id" ) === id;

            if ( id && prevFooterMatches ) {
                stickyFooter = footer;
                setTop( stickyFooter.removeClass( "fade in out" ).appendTo( $.mobile.pageContainer ) );
            }
        })
        .delegate( ".ui-page", "pageshow", function( event, ui ) {
            var $this = $( this );

            if ( stickyFooter && stickyFooter.length ) {
                setTimeout(function() {
                    setTop( stickyFooter.appendTo( $this ).addClass( "fade" ) );
                    stickyFooter = null;
                }, 500);
            }

            $.mobile.fixedToolbars.show( true, this );
        });

Я думаю добавить к нему 

setTop( page.find( ":jqmData(role='header')").removeClass( "fade in out" ).appendTo( $.mobile.pageContainer ) );

.Пожелай мне удачи ...

0 голосов
/ 14 июня 2011

Отметьте в этом примере в разделе Создание постоянных колонтитулов и заголовков.

...