2012-02-01 11 views
1

は、Jquery Mobileのsearch barのようなテキスト入力を作成する方法はありません。たとえば、テキストを入力するときに、ユーザーがフィールドをクリアするための十字マークが必要です。Jquery Mobileの検索バーのようなテキストボックス

入力欄に検索バーを使用しても、検索アイコンが表示されていて、それはテキストボックスにとってうまくやっていないようです。

誰かが私を助けることができますか?事前に感謝

答えて

3

私はこれがあなたが探していると思います。アイデアは、検索入力のアイコンを非表示にすることです。

ここ
<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> 
    <style> 
    .content .ui-icon-searchfield::after{ 
     display:none !important; 
    } 

    .content .ui-input-search{ 
     padding:0 10px !important; 
    } 

    </style> 
</head> 
<body> 

<div data-role="page"> 

    <div data-role="header"> 
     <h1>Page Title</h1> 
    </div><!-- /header --> 

    <div data-role="content" class="content"> 
     <input type="search" name="search" id="searc-basic" value="" />  
    </div><!-- /content --> 
</div><!-- /page --> 

</body> 
</html> 

デモ - http://jsfiddle.net/8sg6M/

+0

ご入力テキストボックスにデータをクリア-BTN = "true" を追加します。 –

3

Thsiが素晴らしいおかげで