Как мы можем использовать data-inline="true" для типа кнопки?

Может кто-нибудь, пожалуйста, скажите мне, как я могу использовать data-inline="true" на кнопку типа в JQuery мобильных?

например: <button type="submit" data-inline="true" data-theme="b">Save</button>

Когда я попробовал, это не работает, и это работает только для тега привязки.

например: <a href="index.html" data-role="button" data-inline="true" data-theme="b">Save</a>

Источник

4 ответа

Решение

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

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

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

HTML:

<!-- FIRST SOLUTION -->

<div id="hidden-wrapper">
    <input type="text" name="name" data-inline="true" id="basic" value=""  /> 
    <button type="reset" data-inline="true" data-theme="b">Reset</button>
</div>

<!-- SECOND SOLUTION -->

<div id="hidden-wrapper2">
    <div id="text-container">
        <input type="text" name="name" data-inline="true" id="basic" value=""  /> 
    </div>
    <div id="btn-container">
        <button type="reset" data-inline="true" data-theme="b">Reset</button>
    </div>        
</div>

CSS:

/* FIRST SOLUTION */
#hidden-wrapper .ui-input-text {
   width: 68% !important;
    display: inline-block !important;
}

#hidden-wrapper .ui-btn {
   width: 19% !important;
}

/* SECOND SOLUTION */

#text-container, #btn-container {
    display: inline-block;
    height: 40px;
}

#text-container {
    width: 70%;     
}

#btn-container {
    width: 28%;  
}

#btn-container .ui-btn {
    margin-top: -9px !important;
    width: 100% !important;
}

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

Второе решение, вероятно, лучшее.

Источник

Вот еще один пример использования grids, Сетки полезны для таких случаев, поскольку они отзывчивы. Вам не нужно беспокоиться, когда ориентация меняется.

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

наценка

<div class="ui-grid-a">
 <div class="ui-block-a">
  <input type="text" name="" value="" />
 </div>
 <div class="ui-block-b">
    <button type="reset" data-theme="b">Reset</button>
 </div>
</div>

CSS

.ui-block-b {
 width: 25% !important;
}
.ui-block-a {
 width: 75% !important;
 padding-top: 3px !important; // to push down input box.
}
Источник

Обновить

Вы не можете смешивать кнопки и ввод текста в одной строке, используя атрибут data-inline.

Вместо этого используйте сетки.

<div class="ui-grid-a">
    <div class="ui-block-a"><input type="text" name="name" data-inline="true" id="basic" value=""  /> </div>
    <div class="ui-block-b" align="right"><button type="reset" data-inline="true" data-theme="b">Reset</button></div>
</div>

Пример живой скрипки доступен по адресу http://jsfiddle.net/mayooresan/ewaBd/1/

старый ответ

<button type="submit" data-inline="true" data-theme="b">Save</button> 
<button type="submit" data-inline="true" data-theme="b">Rest</button>

Это просто работает нормально.

Проверьте эту живую скрипку http://jsfiddle.net/mayooresan/BFWvG/

Источник

Стиль работает нормально; проверьте скрипку @MayuMayooresan, но если вы хотите, чтобы href работал; сделай это так:

<a href="index.html"><button type="submit" data-inline="true" data-theme="b">Save</button></a>

посмотрите: http://jsfiddle.net/BFWvG/3/

Источник
Другие вопросы по тегам