[jQuery Safari Searcherライブラリ] Safari風の検索フィールドを表示する
説明
jQuery Safari SearcherライブラリでSafari風の検索フィールドを表示するにはテキストフィールドにID名を割り当てます。割り当てたID名を$()のパラメータに指定しsearcher()メソッドを呼び出します。また、必要なスタイルシートファイルも読み込ませておく必要があります。あまり横幅が長い検索フィールドにすると表示がずれてしまうことがあるので500ピクセル以内にしておくとよいでしょう。
サンプルプログラム
【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="css/j-searcher.css" type="text/css" media="screen">
<!--[if lt IE 8]>
<link rel="stylesheet" href="css/j-searcher.ie.css" type="text/css" media="screen">
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" href="css/j-searcher.ie6.css" type="text/css" media="screen">
<![endif]-->
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/global/inheritance.js"></script>
<script type="text/javascript" src="js/global/templating.js"></script>
<script type="text/javascript" src="js/jquery.core-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.dependClass.js"></script>
<script type="text/javascript" src="js/jquery.searcher.js"></script>
<script type="text/javascript" src="js/sample.js"></script>
</head>
<body>
<h1>Safari風の検索フィールド</h1>
<form>
<input type="search" id="mySearch" placeholder="Search">
</form>
</body>
</html>
【sample.js】
$(function(){
$("#mySearch").searcher();
});