Указание стилей для выбранной вкладки в панели навигации - PullRequest
Новая
       4

Указание стилей для выбранной вкладки в панели навигации

3 голосов
/ 11 июля 2011

У меня есть следующий HTML-код 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width; initial-scale=1.0" />
        <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
        <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
    </head>
    <body>
        <div data-role="page" id="home">
            <div data-role="header" data-theme="b">
                <h1>Test</h1>
            </div>
            <div data-role="content" data-theme="d">
                <div data-role="navbar" data-theme="d">
                    <ul>
                        <li><a href="#" data-icon="custom" class="ui-btn-active">Home</a></li>
                        <li><a href="#" data-icon="grid">Second page</a></li>
                        <li><a href="#" data-icon="star">Third page</a></li>
                    </ul>
                </div>
            </div>

        </div>

    </body>
</html>

Чего я хочу добиться, это установить некоторые стили для активной в данный момент вкладки на панели навигации и изменить значок и фон для выбранной вкладки (значок будет отличаться для разных вкладок).

Используя этот CSS, я могу выбрать активную вкладку 

.ui-btn-active{
    background:red !important;
}

Но я хочу настроить таргетинг на каждую вкладку отдельно, потому что мне нужно отдельные выбранные значки для каждой вкладки (Или, скажем, для простоты иллюстрации - мне нужен отдельный цвет активной вкладки для каждой вкладки: красный для первого, синий для второго, зеленый для третьего )

Вы можете увидеть это здесь - http://jsfiddle.net/8pwFK/

Пожалуйста, дайте мне знать, как этого добиться. Заранее спасибо

Редактировать: Реальная проблема, с которой я сталкиваюсь, заключается в установке выбранного состояния для моей пользовательской иконки. Это CSS, который я использую для пользовательской иконки: 

.tab1 .ui-icon { background:  url(icon1.png) 50% 50% no-repeat; background-size: 30px 30px; }

Я думаю, мне нужно как-то соединить .ui-btn-active и .ui-icon, чтобы это работало. Но я не могу понять, как.

Ответы [ 2 ]

2 голосов
/ 11 июля 2011

Объединение классов CSS.

HTML: 

<li><a href="#" data-icon="custom" class="home ui-btn-active">Home</a></li>
<li><a href="#" data-icon="grid" class="two">Second page</a></li>
<li><a href="#" data-icon="star" class="three">Third page</a></li>

CSS: 

.home.ui-btn-active {
    background:red !important;
}
.two.ui-btn-active {
    background:green !important;
}
.three.ui-btn-active {
    background:blue !important;
}

Обновленная скрипта:

http://jsfiddle.net/8pwFK/3/

2 голосов
/ 11 июля 2011

Добавьте идентификатор к каждому элементу, который вы хотите стилизовать, используя css:

Live Пример:

HTML:

<li><a href="#" data-icon="custom" class="ui-btn-active" id="custom-li-1">Home</a></li>
<li><a href="#" data-icon="grid" id="custom-li-2">Second page</a></li>
<li><a href="#" data-icon="star" id="custom-li-3">Third page</a></li>

CSS: 

#custom-li-1.ui-btn-active {
    background:green !important;
}

#custom-li-2.ui-btn-active {
    background:red !important;
}

#custom-li-3.ui-btn-active {
    background:blue !important;
}

Документы для пользовательских значков:

Пользовательские значки

Чтобы использовать пользовательские значки, укажите значение значка данных с уникальным именем, таким как myapp-email, и плагин кнопки сгенерирует класс, добавив к данным префикс ui-icon--icon значение и применить его к кнопке.Затем вы можете написать правило CSS, предназначенное для класса ui-icon-myapp-email, чтобы указать фоновый источник значка.Чтобы обеспечить визуальную согласованность, создайте белый значок 18x18 пикселей, сохраненный в формате PNG-8 с альфа-прозрачностью.

и

Использование наборов иконок сторонних производителей

Вы можете добавить любой изпопулярные библиотеки значков, такие как Glyphish, для создания вкладки в стиле iOS с большими иконками, расположенными поверх текстовых меток.Все, что требуется, это немного пользовательских стилей, чтобы связать значки и расположить их на панели навигации.Вот пример использования иконок Glyphish и пользовательских стилей (просмотр исходной страницы для стилей) в нашей панели навигации:

Ссылки по теме:

ОБНОВЛЕНИЕ:

Вот то, что я думаю, что вы ищете:

JS: 

$('#custom-li-1').click(function() {
    $(this).attr('data-icon','star');
    $(this).children().children().next().removeClass('ui-icon-custom').addClass('ui-icon-star');
}).page();

$('#custom-li-2').click(function() {
    $(this).attr('data-icon','home');
    $(this).children().children().next().removeClass('ui-icon-grid').addClass('ui-icon-home');
}).page();

$('#custom-li-3').click(function() {
    $(this).attr('data-icon','grid');
    $(this).children().children().next().removeClass('ui-icon-star').addClass('ui-icon-grid');
}).page();
...