<script>
(function($){
jQuery(function(){
jQuery("div").eq(0).remove();
$("div.roundbox").wrap('<div class="dialog"><div class="bd">'+
'<div class="c"><div class="s"></div></div></div></div>');
$('div.dialog')
.prepend('<div class="hd">'+
'<div class="c"></div></div>')
.append('<div class="ft">'+
'<div class="c"></div></div>');
});
})(jQuery);
</script>
…
<div class="roundbox">
スライディングドア型の、角丸エリアを作成するときに、装飾用のタグを必要とし、ドキュメントの品質を下げたり、ソースの可読性が下がる。といった大きな問題があった。
</div>
htmlだけで記述した場合
<div class="dialog">
<div class="hd"><div class="c"></div></div>
<div class="bd">
<div class="c">
<div class="s">
<!-- content area -->
<!-- content area -->
</div>
</div>
</div>
<div class="ft"><div class="c"></div></div>
</div>
Tutorials:Rounded Cornersで紹介されている。
昔から見かけた懐かしい、スライディングドア角丸ボックスに、jQueryを使うと、どんないいことがあるのか、実際に作ってみたサンプルです。
スライディングドア型の角丸デザインは、タブや、コンテンツの表示領域などに広く使われています。
しかし、装飾用の、エレメントを必要としたり、ソースの可読性は、著しく低下します。htmlドキュメントとしても、文書構造とは無関係なタグがあることは、好ましいものではありません。
クライアントサイドで、ブラウザの閲覧性を高める工夫のひとつとして、DOM操作は、とても面白いものだと思いました。