skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

Safariっぽい検索フォームを作るJavaScript「jQuery Safari Searcher」

｜ ｜ ｜ ｜ ｜ ｜ ｜

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日

前の記事：フォームに入力したら削除マークを表示するJavaScript「Clearable Text Field」
次の記事：マウスオーバーした要素にスポットライトを当てるJavaScript「Making a Cool Spotlight Effect with jQuery」