今回は、jQueryプラグインで、とても便利なものを見つけたのでご紹介を。 いつもならinputタグをcssで装飾をしようとすると、とても難しいです。 しかし、そのinputタグをaタグで置き換える事により、とても簡単にしてくれます。
jquery.css3form.jsここからダウンロードできます(ページの一番下)。
利点は、いままでのjavascriptのコードには何も手を加えなくていいところです。 例えば、
<input type="checkbox" id="hoge" checked>
という要素があって、導入する前には
if($("#hoge").attr("checked")){alert("checked");}
というコードを書いていたとしましょう。
鋭い方はもうお気づきだと思います(気がついたか結構すごいと思いますけど)。 先ほど「inputタグを置き換える」と言いました。 そう、その置き換えた要素をクリックしてもinputタグを押した事にはならないのです。
if($(置き換えたもの).hasClass(".checked")){alert("checked");}
こう変えなければいけないのでしょうか?
答えはもちろん「いいえ」です。 その要素をクリックすると元の要素でもそのイベントが起きた事になります。 つまり、.trigger()が使われています。
ココまで聞くと、とてもいいもので問題もないように思えます。しかし、もちろん問題点もあります。
selectを二つ置くと、表示がおかしくなる(のびる部分が上の要素のしたになって、隠れてしまう)のです。
これは意外とおおきいとおもいます(私はselect使わない事にしたので問題はありませんでした)。
それからもうひとつ。 チェックボックスのクリックにて、event.preventDefault();とかくと動かなくなります。
