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

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

使用方法
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」サンプル

sponsors

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

記事作成:
記事URL:

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