MacOSX風の検索フォームを作成するjavascript「AppleSearch」

iPhoneのみならずiPodなどapple社製品のUIデザインには定評があります。
MacOSXでもDockシステムなど至る所でデザイン処理がされています。
Brand Spanking NewではMacOSX風の検索フォームを作成するOS X Style Searchboxを公開しています。

使用方法
applesearch.zipをダウンロード＆解凍しアップロードします。
＊なおdummy.cssが空ですが、これはMacOSXのデフォルトブラウザ「Safari」には同デザインのフォームがあるためによります。
　javascript内でSafariに関する処理を行ないSafari以外にはapplesearch.cssが適用されます。

head内に以下の様に表記します。
<script type="text/javascript" src="http://yourdomain/applesearch.js"></script>
<link rel="stylesheet" href="http://yourdomain/default.css" name="default" type="text/css">
<link rel="stylesheet" href="http://yourdomain/dummy.css" id="dummy_css" type="text/css">
<script type="text/javascript">
//<![CDATA[
window.onload = function () { applesearch.init(); }
//]]>
</script>
またHTMLに以下の様に書き込めば完成です。
<div id="applesearch">
<span class="sbox_l"></span>
<span class="sbox"><input type="search" id="srch_fld" placeholder="Search..." autosave="applestyle_srch" results="5" onkeyup="applesearch.onChange('srch_fld','srch_clear')"></span>
<span class="sbox_r" id="srch_clear"></span>
</div>
MacOSX風の検索フォームを作成するjavascript「AppleSearch」サンプル

2007年10月20日

前の記事：コンテンツをスライド表示するjavascript「Coda-Slider」
次の記事：Movable TypeでPHP化せずにページ分割するプラグイン「PageBute」

関連記事

• JavaScriptライブラリ「jQuery」を使用してフォームを華麗に彩る「jqTransform」
• ビジュアル面で最高のタイムピッカーJavaScript「nogray_time_picker」
• フォームで全自動でフリガナを付与するJavaScript「AutoKana.js」
• [jQuery]Confirm
• [mootools]WysEditor

• ファイルサイズをJavaScriptライブラリ「jQuery」で自動表示する「addSizes.js」
• JavaScriptライブラリ「jQuery」を使用してフォームを華麗に彩る「jqTransform」
• Webカラーに関するサイト21
• 英字新聞ぽいコラムをJavaScriptライブラリ「jQuery」で作る「Columnizer」
• 心地よく要素を切り替えるJavaScript「jFlip」
• CoverFlowを実現するJavaScript「JS Coverflow」
• 画像を丸く輝かせるJavaScript「sphere.js」
• セクシーなLightBoxを実現するJavaScript「Sexy LightBox」
• JavaScriptライブラリ「jQuery」を使ってカレンダーを作る「jCal.js」
• カバーフローぽい画像ギャラリーJavaScript「ProtoFlow」