appleのデザインっていいですよね。
サイトでも使いたいですよね。
jQueryプラグインjQuery Safari Searcherを使用すると検索フォームをSafariっぽくできます。
使用方法
jQuery Safari Searcherからファイル一式をダウンロードします。
<link type="text/css" rel="stylesheet" href="j-searcher.css" />
<!--[if lt IE 8]><link rel="stylesheet" href="j-searcher.ie.css" type="text/css" media="screen"><![endif]-->
<!--[if IE 6]><link rel="stylesheet" href="j-searcher.ie6.css" type="text/css" media="screen"><![endif]-->
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.dependClass.js"></script>
<script type="text/javascript" src="templating.js"></script>
<script type="text/javascript" src="inheritance.js"></script>
<script type="text/javascript" src="jquery.searcher.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#id名").searcher();
});
</script>
あとは以下のようにid名を記載すれば完成です。
<input id="id名" type="search" placeholder="Search" autocomplete="off" />
Safariっぽい検索フォームを作るJavaScript「jQuery Safari Searcher」サンプル
記事作成:2009年11月16日
▼Safariっぽい検索フォームを作るJavaScript「jQuery Safari Searcher」へのコメントはtwitterにて受け付けています。
twitterでコメントする
前の記事:フォームに入力したら削除マークを表示するJavaScript「Clearable Text Field」
次の記事:マウスオーバーした要素にスポットライトを当てるJavaScript「Making a Cool Spotlight Effect with jQuery」