Safariっぽい検索フォームを作るJavaScript「jQuery Safari Searcher」
[ 2分で読めて簡単導入できます]
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日
