Проблемы при использовании только значка без текста в панели навигации в мобильном нижнем колонтитуле jquery - PullRequest
Новая
       1

Проблемы при использовании только значка без текста в панели навигации в мобильном нижнем колонтитуле jquery

4 голосов
/ 04 июля 2011

Это код, который я использую: 

<!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>Home</h1>
            </div>
            <div data-role="content" data-theme="b">
            </div>
             <div data-role="footer" data-position="fixed" data-id="pFooter">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#" data-icon="custom" class="ui-btn-active" >Home</a></li>
                        <li><a href="#first" data-icon="grid">Page1</a></li>
                        <li><a href="#" data-icon="star">Page2</a></li>
                        <li><a href="#" data-icon="arrow-r" data-iconpos="notext"></a></li>
                    </ul>
                </div>
        </div>  
    </div>
    </body>
</html>

Вы можете увидеть его в действии здесь - http://jsfiddle.net/PJWQr/

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

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

Ответы [ 5 ]

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

Вам на самом деле не нужен iconpos="notext", поскольку это технически не кнопка.

Удалите этот атрибут и добавьте символ пробела к содержимому элемента a: 

<li><a href="#" data-icon="arrow-r">&nbsp;</a></li>
1 голос
/ 09 августа 2013 
<a id="xyz" data-icon="grid" href="#" data-iconpos="notext">&nbsp;</a>

Вы можете использовать это, чтобы избежать лишних пробелов в кнопке.

1 голос
/ 04 июля 2011

Вероятно, легкое (вроде бы быстрое и грязное, но я иду спать, так что вот что вы получаете;) - просто персонаж там: http://jsfiddle.net/PJWQr/2/

0 голосов
/ 23 декабря 2014

Ваш тег привязки должен содержать некоторый текст для вспомогательных технологий, таких как программы чтения с экрана.A &nbsp; недостаточно .У вас есть несколько вариантов:

Включить простой текст: 

<li><a href="#" data-icon="arrow-r">Next</a></li>

Использовать aria-label: 

<li><a href="#" data-icon="arrow-r" aria-label="Next">&nbsp;</a></li>

Использовать что-то вродеBootstrap's sr-only Класс CSS: 

<li><a href="#" data-icon="arrow-r"><span class="sr-only">Next</span></a></li>
0 голосов
/ 03 мая 2013

Вы можете сделать это, чтобы извлечь диск ... для тех, кто ищет это в будущем. Добавьте это к элементу кнопки:

данные iconshadow = "ложь"

...