с текстовым полем и кнопкой горизонтально

Возможно ли иметь текстовое поле и кнопку горизонтально с помощью JQuery Mobile?с текстовым полем и кнопкой горизонтально

Использование data-inline="true" работает для кнопок, но не при смешивании с кнопкой и текстовым полем.

рядный данные example

data-type="horizontal" также не работает.

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title></title> 
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css"/> 
<script type="text/javascript"> 

    $(document).ready(function(){ 

      $("#clearMeClearMe").click(function(){ 
       //$(this).hide(); 
       $("#clearMe22").val(""); 
      }); 
}); 
</script> 
<body> 


<div data-role="page"> 
    <div data-role="header"> 
     <h1>Textbox Clear Demo</h1> 
    </div><!-- /header --> 

    <div id="content"> 
     <input type="text" id="clearMe22" data-inline="true" name="clearMe22"/>  
      <a href="#" data-role="button" data-icon="delete" 
         data-iconpos="notext" id="clearMeClearMe">Clear</a> 
    </div> 
</div><!-- /page --> 
</body> 
</html>

источник

2012-02-01 Jay Mayu

Кажется, работает лучше для меня, когда я плавать правую кнопку и ограничить ширину ввода текста:

<span> 
      <input style="width:90%;display:inline-block" type="text" id="clearMe22" data-inline="true" name="clearMe22" />  
      <a style="float:right" href="#" class="ui-input-clear" data-role="button" data-icon="delete" 
         data-iconpos="notext" id="clearMeClearMe">Clear</a> 
</span>

http://jsfiddle.net/xeyyr/1/

Но кто-то может быть в состоянии обеспечить более элегантное решение CSS.

источник

2012-02-02 22:59:37 Jivings

Я пытаюсь найти аналогичное решение для пользовательской кнопки, но в вашем случае я считаю, что вы можете использовать встроенные методы для очистки данных ('data-clear-btn'). Вы можете найти это документировано здесь:

http://jquerymobile.com/demos/1.3.0-rc.1/docs/demos/widgets/textinputs/

и будут выглядеть следующим образом:

<input data-clear-btn="true" name="text-3" id="text-3" value="" type="text">

источник

2013-03-18 17:39:20

к тому времени, вопрос был задан не было сборки в поддержке JQuery Mobile. Я знал, что они поддерживали его с 1.3.0 :). +1 для указания здесь. –

Просто смотрите на эту ссылку и не видите разницы с или без 'data-clear-btn' (ни iPhone5, ни Safari, ни Win7/Chrome26). – Marc

с текстовым полем и кнопкой горизонтально

ответ

Смежные вопросы