JQuery Mobile - отображение встроенной HTML-формы - PullRequest
Новая
       25

JQuery Mobile - отображение встроенной HTML-формы

7 голосов
/ 22 декабря 2011

Цель: Отображение текстового поля и кнопки отправки в одной строке в Jquery Mobile.

Проблема: Они не будут отображаться в одной строке.

Я много раз пытался отобразить текстовое поле и кнопку отправки в одной строке, но это никогда не работает. Вот мой код и комбинации, которые я использовал ... 

<form method="GET" style="display: inline-block;">
     <input type="text" name="id" value="Other">
     <input type="submit" data-type="button" data-icon="plus" value="Add">
</form>

Это не сработало. 

<form method="GET">
   <span>
     <input type="text" name="id" value="Other">
     <input type="submit" data-type="button" data-icon="plus" value="Add">
   </span>
</form>

Ни один не сделал этого. 

<form method="GET">
      <ul style="display: inline; list-style-type: none;">
          <li style="display: inline;"><input type="text" name="id" value="Other"></li>
          <li style="display: inline;"><input type="submit" data-type="button" value="Add"></li>
       </ul>
</form>

Что я делаю не так и как мне достичь своей цели?

Спасибо и счастливого Рождества!

Ответы [ 3 ]

14 голосов
/ 22 декабря 2011

Будет ли работать сетка?

HTML: 

<fieldset class="ui-grid-a">
    <div class="ui-block-a">
            <input type="text" name="id" value="Other">
    </div>
    <div class="ui-block-b">
            <input type="submit" data-type="button" data-icon="plus" value="Add">
    </div>
</fieldset>
6 голосов
/ 22 декабря 2011

Вы можете использовать медиазапрос, чтобы отобразить кнопку в строке с вводом текста для экранов большей ширины и показать текстовое поле над кнопкой отправки для экранов меньшей ширины: 

form .ui-input-text {
    display : inline-block;
    width   : 65%;
    vertical-align : middle;
}
form > .ui-btn {
    display : inline-block;
    width   : 25%;
    vertical-align : middle;
}
@media all and (max-width:480px) {
    form .ui-input-text {
        width   : 100%;
    }
    form > .ui-btn {
        width   : 100%;
    }
}

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

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

Вот то, во что превращается HTML-код кнопки отправки после того, как jQuery Mobile его инициализирует: 

<div data-theme="c" class="ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-up-c" aria-disabled="false">
    <span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">
        <span class="ui-btn-text">Add</span>
        <span class="ui-icon ui-icon-plus ui-icon-shadow"></span>
    </span>
    <input type="submit" value="Add" data-icon="plus" data-type="button" class="ui-btn-hidden" aria-disabled="false">
</div>

Если вы хотите поддерживать IE7, вам нужно добавить следующий код, потому что IE7 не понимает display : inline-block: 

form .ui-input-text {
    display : inline-block;
    width   : 65%;
    vertical-align : middle;

    /*Fix for IE7*/
    *display : inline;
    zoom     : 1;
}
form > .ui-btn {
    display : inline-block;
    width   : 25%;
    vertical-align : middle;

    /*Fix for IE7*/
    *display : inline;
    zoom     : 1;
}
0 голосов
/ 29 октября 2016

Добавление их в два отдельных столбца в строке таблицы HTML также работает.

...