jQuery мобильные стили не применяются в элементах вне data-role = "page" - PullRequest
Новая
       2

jQuery мобильные стили не применяются в элементах вне data-role = "page"

4 голосов
/ 23 ноября 2011

В моем приложении jQM у меня есть панель заголовков, которую я хочу сохранить.Из-за проблемы с фиксированными заголовками в jQM я решил создать такую ​​структуру: 

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head> 
<body style="overflow:hidden;"> 
<div data-role="navbar">
    <ul>
        <li><a href="#page1" class="ui-btn-active">One</a></li>
        <li><a href="#page2">Two</a></li>
    </ul>
</div>
<div id="page1" data-role="page" style="top:80px">
    <div data-role="content">
        Page1
        <input type="button" value="Click"/>
    </div>
</div>

<div id="page2" data-role="page" style="top:80px">
    <div data-role="content">
        Page2
        <input type="button" value="Click2"/>
    </div>
</div>
</body>
</html>

Цель состоит в том, чтобы держать панель навигации фиксированной сверху.При нажатии на соответствующую вкладку она должна загрузить страницу.Так как я дал padding-top для data-role="page" div, он будет выглядеть так, как будто заголовок остается фиксированным сверху.Но он работает не так, как задумано, в том смысле, что стили data-role="navbar" не применяются к панели навигации в заголовке.Заранее спасибо.

Демо здесь - http://jsfiddle.net/UPZrs/

Ответы [ 3 ]

2 голосов
/ 23 ноября 2011

У меня была точно такая же проблема.В итоге я просто взял HTML-код из моей панели навигации после того, как jQuery Mobile его стилизовал (через FireBug), и я использовал этот код, который выглядит примерно так: 

<div id="edge_menu">
    <ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
        <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-corner-top ui-btn-up-c">
            <div class="ui-btn-inner ui-li ui-corner-top" aria-hidden="true">
                <div class="ui-btn-text">
                    <a href="/m/default.html" class="ui-link-inherit">Home</a>
                </div>
                <span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span>
            </div>
        </li>
    </ul>
</div>

Если вы изучите классы, которые jQuery Mobile добавляет,на самом деле довольно легко изменить классы, чтобы изменить тему или параметры округления / тени.

Другой обходной путь, который я нашел для работы, - это разместить ваше меню внутри data-role="page" div при загрузке страницы, пусть jQuery Mobileстиль страницы, а затем переместите div меню из data-role="page" div, чтобы быть потомком тега body.

1 голос
/ 23 ноября 2011

Интересная проблема. Мне нравится навигация, но содержание меняется. Это может быть что-то, что JQM может предложить в будущем. Вот моя попытка с использованием метода @ GerjanOnline, но проблема в том, что jQM каждый раз перемещает страницу, так что это выглядит довольно вяло. Вот попытка решения, но, как вы можете видеть, jQM все еще использует только то, что «грешит» тегом страницы. Я просто показываю элементы позади страницы, нажимая их вниз:

Возможно, это даст вам представление о том, как изменить их стиль с помощью элементов управления jQM.

Добавлен запрос функции: https://github.com/jquery/jquery-mobile/wiki/Feature-Requests

1 голос
/ 23 ноября 2011

Вы можете использовать плагин "navbar": $("div:jqmData(role='navbar')").navbar();

http://jsfiddle.net/UPZrs/1/ Вам все еще нужно исправить макет

Имейте в виду, что position:fixed не очень хорошо поддерживается во всех видах мобильных браузеров

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...