ボタンの装飾

jQuery

jQuery ui の button を使うと見栄えの良いボタンが簡単に作れる。

独立したボタン

  • html
    • 普通にボタンを作っておいて
<input type="submit" style="font-size:12px" value="login">
<input type="reset" style="font-size:12px" value="reset">
  • script
    • DOMに対して button() を呼んであげるといい
$(function(){
	$( "input:reset").button();
	$( "input:submit").button();
    return;
});

くっついた感じのボタン

  • html
    • div で class を "button-toolbar"(なんでもいい) としておいて
<div class="button-toolbar" style="display:inline; ">
  <input type="button" style="font-size:10px" value="Edit" onclick="クリックイベントの処理"/>
  <input type="button" style="font-size:10px" value="Cancel" onclick="クリックイベントの処理"/>
</div>
  • script
    • div の DOMに対して buttonset() を呼んであげる
$(function(){
	$(".button-toolbar").buttonset();
    return;
});

非常に簡単だ。iPad 用のボタンとしても押しやすそう。
cssを変えれば見栄えも変えられるらしい。

実際にやってみた。

2011/1/1追記: iPadでくっついたボタンはできる？

input を使うとiPad ではくっついた感じにならないけれど、button ではうまくいくみたい。

<div class="button-toolbar" style="display:inline; ">
  <button style="font-size:10px" onclick="$('#push_edit_ipad').fadeIn();">iPadでも</button>
  <button style="font-size:10px" onclick="$('#push_edit_ipad').fadeOut();">くっつく</button>
</div>

でも、初期表示は上手く行くが、Ajaxなどで DOMを prepend() を使って追加した場合(動的表示?)は button の buttunset() をやるとボタン表示が壊れてしまう。button の動的表示はうまくいかないのだろうか‥　通常の Safariでの挙動の違いが謎。

2011/1/2追記: prepend()だけではうまくいく！

buttonタグを使ったボタンを prepend() してみたサンプルを作ってみたが上手く行った。Todoリストでどうしてボタンが壊れてしまうかはまだ不明‥　他の原因がありそう。