スライディングドア型の、角丸エリアを作成するときに、装飾用のタグを必要とし、ドキュメントの品質を下げたり、ソースの可読性が下がる。といった大きな問題があった。
jQueryを使うことで、ソースの可読性を損なわないで済む上に、何個でもクラス名を指定してやるだけで、ボックスを表示することができます。

勉強になったサイト

書き方

<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操作は、とても面白いものだと思いました。