Как добавить отступы к элементам в jQuery Mobile - PullRequest
Новая
       22

Как добавить отступы к элементам в jQuery Mobile

3 голосов
/ 26 февраля 2012

Удивительно, как быстро вы начинаете использовать этот фреймворк, но я застрял на одной, казалось бы, очевидной вещи. Во всех макетах, которые я видел, включая Theme Roller , на всех элементах есть приятные отступы. по какой-то странной причине во всей документации ничего не упоминается о создании столь необходимого пространства между пользовательским интерфейсом и окном просмотра.

Как это определить?

В HTML Desktop это будет так же просто, как 

body{margin:20px}

Любая помощь будет принята с благодарностью.

Конечно, я даже скачал настройки по умолчанию, найденные на Theme Roller, и ничего не происходит.

Интересно, разве у jQuery mobile нет документации по всем отдельным классам? Или хотя бы перечислить разные классы на странице, чтобы их можно было использовать?

Ниже я добавил пример того, что я имею в виду. Это на самом деле из собственных документов jQuery Mobiles. Что делает вещи еще более запутанными, так это то, что кнопка отображается с кнопкой, имеющей отступ, но не с меню.

Для пояснения, в jQuery Mobile есть «встроенный» метод, который просто добавляет закругленные углы к вещам, вам просто нужно добавить class="ui-corner-bl ui-corner-br" ... Я в идеале ищу такой метод.

enter image description here

Ответы [ 3 ]

4 голосов
/ 26 февраля 2012

Поскольку страницы в jQuery mobile абсолютно позиционированы, вам нужно добавить позицию: относительный div-обертка с полем. 

<body>
  <div style='margin:20px; position:relative'>
    <div data-role="page">
    ...

Я бы порекомендовал инструмент проверки Google Chrome или Firefox, чтобы помочь вам понять и изменить CSS элемента.

EDIT:

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

3 голосов
/ 27 февраля 2012

Часть проблемы с документацией jQuery Mobile заключается в том, что они показывают результаты, но не показывают разметку, необходимую для их достижения.

Прежде всего, вам редко нужно добавлять классы CSS непосредственноваша разметка.Большая часть рендеринга контролируется атрибутами data- *.Чтобы придать вашему списку вид закругленного угла, вы используете data-inset="true".Это также обеспечивает заполнение.

Вот jsFiddle разметки http://jsfiddle.net/kiliman/W48wn/

<html>
<head>
    <title>jQuery Mobile Test</title>
</head>
<body>
<div id="page" data-role="page">
    <div data-role="content">
    <ul data-role="listview" data-inset="true">
        <li data-role="list-divider">Overview</li>
        <li><a href="#">Intro to jQuery Mobile</a></li>
        <li><a href="#">Quick start guide</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="#">Accessibility</a></li>
        <li><a href="#">Supported Platforms</a></li>
    </ul>                        
    <ul data-role="listview" data-inset="true">
        <li data-role="list-divider">Components</li>
        <li><a href="#">Pages &amp; dialogs</a></li>
        <li><a href="#">Toolbars</a></li>
    </ul>                        
    </div>
</div>

1 голос
/ 11 мая 2014

Вы можете использовать data-role = "content" на своей data-role = "page", и элементы больше не будут занимать всю ширину экрана, а будут иметь хороший стандартный отступ в 20px.

Fiddle 

<div data-role="page">
    <div data-role="content">
        <ul data-role="listview" data-inset="true">
            <li>1st Item</li>
            <li>2nd Item</li>
            <li>3rd Item</li>
        </ul>
    </div>
</div>

Но data-role = "content" сейчас устарело . Таким образом, мы остались с:

Old: 

<div data-role="content">
</div>

Новое: 

<div class="ui-content" role="main">
</div>
...