Настройка макета jQuery для мобильных устройств

Я делаю первые шаги в jQuery Mobile и немного разочаровываюсь отсутствием предоставляемых им настроек...

Например, у меня есть простая форма, и я хотел бы настроить макет компонентов формы.

Это мой код:

<form id="loginForm" action="#" method="post">
  <input id="rememberMe" name="rememberMe" type="checkbox"/>
  <label for="rememberMe">Remember me in this computer</label>

  <a id="info" href="#" data-role="button" data-icon="info" data-iconpos="notext">Info</a>

  <input id="submit" type="submit" value="log in" data-inline="true"/>
</form>

См. скрипку.

Конкретно хотелось бы:

  • Флажок rememberMe должен быть такой же ширины, как текст внутри, а кнопка info должна быть встроена в флажок.
  • «Группа», содержащая предыдущий флажок и кнопку для выравнивания по правому краю.
  • Кнопка submit также должна быть справа.

Пожалуйста, приведите пример того, как такие вещи могут быть достигнуты...

EDIT: мне нужно что-то вроде этого:

желаемый макет


html css jquery-mobile jquery-mobile-button jquery-mobile-checkbox
person MikO    schedule 17.04.2013    source источник
comment
jsfiddle.net/5avUc/2 проверьте это   -  person Omar    schedule 17.04.2013
comment
Пример обновления. Я использовал сетки для достижения того, чего вы хотите jsfiddle.net/5avUc/3   -  person Omar    schedule 17.04.2013

Ответы (3)


arrow_upward
3
arrow_downward

Требуемая настройка будет исходить не от jQM, а от пользовательского CSS.

Обычно это можно легко сделать с помощью сеток jQuery Mobile, но они не такие гибкие. Поэтому вам нужно индивидуальное решение.

Div вокруг каждого элемента необходим, потому что jQM воссоздает каждый элемент с новым стилем, и если у нас нет родительского div, все пойдет к черту.

Рабочий пример: http://jsfiddle.net/Gajotres/8NB22/

HTML:

<form id="loginForm" action="..." method="post">
    <div class="row">
        <div class="inline-mid">
            <a id="info" href="..." data-role="button" data-icon="info" data-iconpos="notext" class="middle-button">Info</a>
        </div>    
        <div class="inline-left">
            <input id="rememberMe" name="rememberMe" type="checkbox"/>
            <label for="rememberMe">Remember me in this computer</label>        
        </div>
    </div>
    <div class="row">
        <div class="inline-left">        
            <input id="submit" type="submit" value="log in" data-inline="true"/>        
        </div>    
    </div>    
</form>

CSS:

.row  {
    min-width: 400px;
    width: 400px;
}

.inline-left, .inline-mid , .row {
    position: relative;
    float: right;
}

.inline-mid {
    margin-left: 10px;
    padding-top: 5px;
}
person Gajotres    schedule 17.04.2013
comment
Спасибо большое! ваша точка зрения если у нас нет родительского div, все пойдет к черту, это именно то, что мне нужно... Я много пытался настроить CSS, но ничего не работало! - person MikO; 17.04.2013

arrow_upward
3
arrow_downward

Этого можно достичь с помощью ui-grid классов.

Рабочая демонстрация

Разметка

<form id="loginForm" action="..." method="post">
 <div class=ui-grid-a>
  <div class=ui-block-a>
   <input id="rememberMe" name="rememberMe" type="checkbox"/>
   <label for="rememberMe" data-inline="true">Remember me in this computer</label>
  </div>
  <div class=ui-block-b>
   <a id="info" href="..." data-role="button" data-icon="info" data-iconpos="notext">Info</a>
  </div>  
 </div>  
 <div class=ui-grid-solo>
  <input id="submit" type="submit" value="log in" data-inline="true"/>
 </div>
</form>

Переопределить CSS

.ui-block-a { width: 95% !important; text-align: right !important; }
.ui-block-b { width: 5% !important; padding-top: 5px !important; }
.ui-grid-solo { text-align: right !important; }
person Omar    schedule 17.04.2013
comment
Спасибо @Omar, тоже хороший подход, используя grids, хотя флажок rememberMe шире, чем текст внутри... - person MikO; 17.04.2013
comment
@MikO Я влюблен в сетки;) Я все равно обновил свой ответ для дальнейшего использования. - person Omar; 17.04.2013

arrow_upward
0
arrow_downward

Макет никогда не должен быть основной обязанностью кода Javascript, поэтому вы не должны обвинять в этом jQuery Mobile.

Настройку для разных размеров экрана следует выполнять с помощью CSS Media Queries. Нажмите на ссылку, чтобы узнать больше примеры, чем вам когда-либо понадобится.

person Niels Keurentjes    schedule 17.04.2013
comment
Это не имеет ничего общего с запросами @media. Это может быть достигнуто с помощью UI-сеток. - person Omar; 17.04.2013
comment
@Niels Я не виню jQuery Mobile, но, насколько я понимаю, он предназначен для того, чтобы позволить мобильным разработчикам создавать приложения без написания каких-либо CSS. На самом деле, он включает в себя CSS классов и HTML атрибутов, которые можно использовать для настройки интерфейсов... Я только говорю, что, на мой взгляд, таких вариантов настройки очень мало... - person MikO; 17.04.2013