<p>そういえば、中学の時の英語の先生は「人生、せつないね」と口癖のように言ってたっけ。</p>


<h3>クリボーの一生</h3>

<p><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/ViO6Gu7qHcE&amp;hl=ja"></param><embed src="http://www.youtube.com/v/ViO6Gu7qHcE&amp;hl=ja" type="application/x-shockwave-flash" width="425" height="344"></embed></object></p>

<p>いいねえ、せつないねえ・・</p>

こんな人生、悲しすぎる

ブラウザごとに異なるチェックボックスの外観を統一したい！



<script type="text/javascript" src="/lab/replace_checkbox/replace_checkbox.js"></script>
<script type="text/javascript">
var rc = new ReplaceCheckBox("/lab/replace_checkbox/nocheck.gif", "/lab/replace_checkbox/checked.gif");
rc.pickById("replace");
rc.marginSupplement(0,3,3,0);
//
function checkValue(data)
{
    var msg = "";
    for(var i=0,len=data.length; i<len; i++)
    {
        var name = data[i].getAttribute("name");
        var checked = data[i].getAttribute("checked");
        msg += name+" : "+checked+"\n";
            //console.log(name+" : "+checked);
    }
    alert(msg);
    return false;
}
</script>

# 初期設定のチェックボックス

<ul style="margin: 0 0 30px">
<li><label><input name="check0" type="checkbox" value="EXAMPLE" />check1</label></li>
</ul>

特にFirefoxのフォーム関係のUIは残念な感じ。

<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="screenshot.gif" src="/legacy/assets/screenshot.gif" width="250" height="100" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" /></span>

# カスタマイズしたチェックボックス

<form name="replace_test" onsubmit="return checkValue(this);">
<ul id="replace" style="margin: 0 0 30px">
<li><label><input name="check1" type="checkbox" value="REPLACE1" />check1</label></li>
<li><label><input name="check2" type="checkbox" value="REPLACE2" />check2</label></li>
<li><input name="check3" type="checkbox" value="REPLACE3" />check3(no label)</li>
<li><input name="submit" type="submit" value="送信" /></li>
</ul>
</form>

あんまり変わってないけど・・！

もともとのinput要素をスタイルシートのdisplay属性で非表示にして、そこにimg要素を突っ込みます。input要素の包含要素がlabel要素の場合にはlabel要素に、それ以外は追加するimg要素自体にclickイベントを追加します。

クリックすると、画像の切り替えをするとともに、非表示になっているinput要素のchecked属性を変更します。

<a href="/lab/replace_checkbox/index.html">ソースはこちら</a>

# IE6だけチェックボックスの渡す値がおかしい

formを送信したとき、IE6以外はremoveAttribute()メソッドでchecked属性を削除すればnullが渡るのですが、IE6の場合nullは渡らないみたいなのでsetAttribute()メソッドでfalseを明示しないといけないようです。IE7はどうなんでしょ。

XHTMLではchecked属性のとりうる値は"checked"しかないはずなのにfalseを指定しないといけないのは気持ち悪い。

Archive for 2008.06

こんな人生、悲しすぎる

チェックボックスをカスタマイズする