имея текстовое поле и кнопку горизонтально - PullRequest
Новая
       22

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

1 голос
/ 01 февраля 2012

Можно ли иметь текстовое поле и кнопку горизонтально, используя JQuery Mobile?

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

встроенные данные пример

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>

Ответы [ 2 ]

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

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

<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.

2 голосов
/ 18 марта 2013

Я пытаюсь найти подобное решение для пользовательской кнопки, но в вашем случае я считаю, что вы можете использовать встроенные методы для очистки данных ('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">
...