jQuery（とCSS）を使って検索ボックスをデザインしてみました。
View Demo
jQueryを使わず、単純にCSSを使うだけでも良かったのですがjQueryを使った理由は以下の通りです。
- CSS有効で画像をオフにしたら何も表示されなかった
- submitボタンの背景に画像を使用するため、valueの値を空にしないとvalueの値が見えてしまう。valueの値を空にすると、CSSをオフにした状態でsubmitボタンにテキストが何も表示されなくなる。※
※inputのtypeをimageにすれば問題無。画像をオフにしたでも実行フォームが表示される。
<input type="submit">のvalue属性に"search"を入れた場合、searchの文字が見えてしまう。
value属性の値を空にするとCSSオフの状態でsubmitボタンの文字が表示されなかった。
CSS有効で画像オフの場合何も表示されなかった。
jQueryで無くても良いのかもしれませんが、なんせ普通のJavaScriptが書けないもので。
jQuery部分のコードは次の通りです。
Read more
もっと簡単なコードで書けますね。クリックした要素のindexとマッチしたdivを開閉するって方法です。
$(function()
{
var targetElem = $("div#simpleAccordion div");
targetElem.hide();
$("div#simpleAccordion h2").click(function()
{
var index = $("div#simpleAccordion h2").index(this);
targetElem.eq(index).toggle("normal");
});
});
jQueryを使った超シンプルなアコーディオンを作ってみました。#simpleAccordionを与えたdivの子要素であるh2をクリックするとその直後のdiv要素が開くと言うものです。
Read more
iTunes StoreのNew ReleaseWhat's Hotなどの部分で使われているインターフェイスは省スペースで多くの情報を提供出来るクールで優れたインターフェイスですよね。色々なJavaScriptライブラリが公開されていますが、その中でもjQueryを使ったライブラリであるCoda-Sliderを紹介します。
必要なライブラリは計4つ。Ver1.2以上のjQuery、jQuery easing plugin、jQuery easing compatability plugin、そしてCoda-Sliderです。
まずはデモを作りましたのでご覧ください
View Demo
ページを切り替える左右の矢印とセンター上部のタブはCoda-Slider.jsで生成されます。JavaScriptが無効になっている場合はslide.cssの.cswで定義されるのでアクセシビリティ的にも問題ないと思います。
ただデザインする時にJSで生成される部分が作りづらいので僕の場合、JSで生成されるHTMLコードも含めたHTMLファイルdammy_slide.htmlなるものを用意してます。
dammy_slide.htmlを含めたデモサイトをZIPに圧縮したものをダウンロード出来るようにしておきますので参考にしてみてください。slide.cssで定義している画像のwidthやheight、background、divのwidthやheightをちょこっと変更するだけで使えると思います。
Download
この2〜3日、透過pngを大量に使うデザインのコーディングを行っていましたが、その中で困ったのがIE6で透過pngがロールオーバーしてくれないこと。
様々なライブラリを試したけれどもやっぱりロールオーバーしません。ところが唯一ロールオーバーに対応していたのがユンサンが配布しているiepngfix.jsのバージョン1.4。マウスオーバーさせたいオブジェクトとロールオーバー画像を引数にしてhover関数をコールすると言う使い方をします。
僕の場合はjQueryを使うケースが多いので、外部JSに以下のように書き出して使ってます。
$(function()
{
var lo_nav1 = document.getElementById('lo_nav1');
IEPNGFIX.hover(lo_nav1, 'btn_hoge_on.png');
});
ちなみに通常透過pngを使う場合は専用のクラス
* html .iepngfix { behavior: expression(IEPNGFIX.fix(this)); }
のように作っていますが、ロールオーバーさせるオブジェクトにはこのクラスの記述はしません。通常だったら<img src="hoge.gif" class="iepngfix" />みたいな記述をするけれどもロールオーバーさせたい場合は<img src="hoge.gif" id="lo_nav1" />のようにIDの指定だけでオーケーです。クラスを記述してしまうとロールオーバーしたままになるので要注意です。
