Настройка Listview <li>Высота в jQuery Mobile - PullRequest
Новая
       24

Настройка Listview <li>Высота в jQuery Mobile

4 голосов
/ 12 января 2012

Я пытаюсь изменить размер <li> на моем мобильном сайте jQuery (просмотр списка) и не могу найти подходящий класс в CSS для этого. Я в основном изменил размеры некоторых элементов (верхний и нижний колонтитулы и т. Д.). У меня пять <li> кнопок, расположенных вертикально, под кнопками и нижним колонтитулом есть пробел.

Я просто хочу установить высоту каждого <li> на 20% (это бы помогло, так как их пять, и они вложены в элемент содержимого тела. Кто-нибудь знает класс в jQuery Mobile CSS что контролирует это? Я не могу найти эту информацию в поиске. Вот ссылка на CSS для справки:

jQuery Mobile По умолчанию CSS

Спасибо!

UPDATE

Изначально я хотел обсудить «просмотр списка» исключительно для кнопок. Я был слишком широк в своем первоначальном объяснении, но в основном я пытаюсь изменить размеры не всех кнопок, а только <li> s.

Ответы [ 4 ]

6 голосов
/ 13 января 2012

Если вы извлекаете классы, вы можете принять собственное решение о том, как выбрать элементы LI, я бы использовал класс .ui-li, и если вы хотите получить только один элемент listview, тогдаВы можете указать более детальный селектор: 

#my-listview-id > .ui-li {
    height : 20%;
}

Вот пример listview вывода из документов jQuery Mobile: 

            <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
                <li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-btn ui-bar-f ui-corner-top ui-btn-up-undefined">Overview</li>
                <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c"><div class="ui-btn-inner ui-li" aria-hidden="true"><div class="ui-btn-text"><a href="docs/about/intro.html" class="ui-link-inherit">Intro to jQuery Mobile</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li>
                <li data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li"><div class="ui-btn-inner ui-li" aria-hidden="true"><div class="ui-btn-text"><a href="docs/about/getting-started.html" class="ui-link-inherit">Quick start guide</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li>  
                <li data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li"><div class="ui-btn-inner ui-li" aria-hidden="true"><div class="ui-btn-text"><a href="docs/about/features.html" class="ui-link-inherit">Features</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li>
                <li data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li"><div class="ui-btn-inner ui-li" aria-hidden="true"><div class="ui-btn-text"><a href="docs/about/accessibility.html" class="ui-link-inherit">Accessibility</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li>
                <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-corner-bottom ui-btn-up-c"><div class="ui-btn-inner ui-li" aria-hidden="true"><div class="ui-btn-text"><a href="docs/about/platforms.html" class="ui-link-inherit">Supported platforms</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li>
            </ul>

ОБНОВЛЕНИЕ

В этом было немного больше, чем я писал ранее, вот несколько проверенных / рабочих кодов: 

#my-page {
    height   : 100%;
    margin     : 0;
    padding    : 0;
}
#my-page .ui-content, #my-listview {
    min-height : 100%;
    height     : 100%;
    margin     : 0;
    padding    : 0;
}
#my-listview .ui-li {
    height : 20%;
}

Где #my-page - это идентификатор моего элемента data-role="page" и #my-listviewэто идентификатор элемента data-role="listview".

Вот демоверсия: http://jsfiddle.net/gu7WE/

0 голосов
/ 27 сентября 2013

Это просто так: 

.ui-li>.ui-btn-inner {
  padding-top: 10px
  padding-bottom: 10px
}
0 голосов
/ 25 мая 2013

Почему так сложно? ИМХО это тоже сработало бы. 

#my-listview-id {
   height:100%;
}
#my-listview-id li {
    height: 20%;
}
0 голосов
/ 12 января 2012

.ui-btn - это класс, который вы должны использовать. Но этот же класс используется не только "кнопками". Другие компоненты jQuery Mobile, такие как listview, также используют его. Так что если вы установите высоту .ui-btn вы тоже испортите эти компоненты. Так что лучше определить отдельный класс, только для этих пяти кнопок, а затем установить height в 20% для этого класса.

...