水平使用文本框和按鈕

水平使用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在這裏指出來。 – 2013-03-19 04:24:30

只看這個鏈接，沒有看到有或沒有'data-clear-btn'（iPhone5/Safari和Win7/Chrome26）沒有任何區別。 – Marc 2013-05-06 16:59:37

水平使用文本框和按鈕

回答

相關問題