prototype.jsで角丸を実装してみる
ようやくjsのライブラリに手を出してみます。
もう一昨年の話になりますが、CSS Nite LP2でロクナナの中村さんのお話を聞いて「よし、これからはデザイナーもスクリプトくらい書けなきゃいかん！」と思って一年以上月日は流れ、ようやく覚束ないながらもなんとなく書けるようになってきました。
WebクリエイティブのためのDOM Scripting （Web Designing Books）
posted with amazlet on 08.02.06
中村享介
毎日コミュニケーションズ (2007/04/20)
売り上げランキング: 5146
毎日コミュニケーションズ (2007/04/20)
売り上げランキング: 5146
これは薄くて読みやすく、理解しやすいので、入門本としては非常によかったです。
まあ、今回はDOMを使えればなんでもよかった訳ですが、普段あまり使う事のないprototypeを使ってみました。
サンプルはこんな感じ。
コードはこんな感じ。
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>addcorner</title>
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<script type="text/javascript" src="scripts/prototype-1.6.0.2.js"></script>
<script type="text/javascript" src="scripts/base.js"></script>
<link rel="stylesheet" href="styles/base.css" type="text/css" media="all" />
</head>
<body>
<div id="wrapper">
<div id="main">
<div class="box box01">hogehoge</div>
<!-- /.box -->
</div>
<!-- /#main -->
<div id="sub">
<div class="box box02">hogehoge</div>
<!-- /.box -->
</div>
<!-- /#sub -->
</div>
<!-- /#wrapper -->
</body>
</html>
CSS
@charset "UTF-8";
/* ------------------------------------------------------------
common
------------------------------------------------------------ */
*
{
margin:0;
padding:0;
}
html, body
{
height:100%;
}
body
{
padding:20px;
}
/* ------------------------------------------------------------
column
------------------------------------------------------------ */
div#wrapper
{
width:950px;
margin:0 auto;
border:solid 1px #ccc;
}
div#main
{
width:530px;
float:left;
}
div#sub
{
width:400px;
float:right;
}
/* ------------------------------------------------------------
box
------------------------------------------------------------ */
div.box
{
padding:10px;
min-height:60px;
position:relative;
}
* html div.box
{
height:40px;
}
/* image */
div.box01{background:#faa url(../images/t01.png) repeat-x 0 0;}
div.box01 div.corner{background:url(../images/corner01.png);}
div.box01 div.border_lr{background:url(../images/lr01.png);}
div.box01 div.border_b{background:url(../images/b01.png) repeat-x 0 bottom;}
div.box02{background:#aacdff url(../images/t02.png) repeat-x 0 0;}
div.box02 div.corner{background:url(../images/corner02.png);}
div.box02 div.border_lr{background:url(../images/lr02.png);}
div.box02 div.border_b{background:url(../images/b02.png) repeat-x 0 bottom;}
/* corner */
div.tl,
div.tr,
div.bl,
div.br
{
width:10px;
height:10px;
position:absolute;
font-size:0;
}
div.tl, div.tr
{
height:30px;
}
/* corner-position */
div.tl{top:0;left:0;}
div.tr{top:0;right:0;}
div.bl{bottom:0;left:0;}
div.br{bottom:0;right:0;}
/* corner-image-position */
div.box div.tl{background-position:0 0;}
div.box div.tr{background-position:-10px 0;}
div.box div.bl{background-position:0 -30px;}
div.box div.br{background-position:-10px -30px;}
/* border */
div.l,
div.r
{
height:100%;
width:10px;
position:absolute;
}
div.border_b
{
width:100%;
height:10px;
position:absolute;
}
/* border-position */
div.l{top:0;left:0;}
div.r{top:0;right:0;}
div.b{bottom:0;left:0;}
* html div.b{left:10px;}
/* border-image */
div.box div.l{background-position:0 0;}
div.box div.r{background-position:-10px 0;}
/* ------------------------------------------------------------
clearfix
------------------------------------------------------------ */
div#wrapper:after
{
zoom:1;
}
div#wrapper:after
{
content:'.';
display:block;
height:0;
visibility:hidden;
clear:both;
}
JavaScript
/* ------------------------------------------------------------
add box-corner
last modified 2008.02.05
------------------------------------------------------------ */
function addCorner(){
var cornerBox = document.getElementsByClassName('box');
var cornerClassName01 = [
'r border_lr',
'l border_lr',
'b border_b',
'br corner',
'bl corner',
'tr corner',
'tl corner'
];
cornerBox.each(function(obj){
for(i=0; i<=6; i++){
new Insertion.Bottom(obj, '<div class="'+cornerClassName01[i]+'"></div>');
}
});
}
window.onload = addCorner;
ビジュアルをある程度リッチに作り込む予定だったので、ボックスの4隅(上下左右)と、左辺、右辺、下辺の3つの辺(上辺はボックスに背景画像を指定して表現)の、合わせて7つのdiv要素をスクリプトで動的に生成し、角丸にしたいボックスの周辺に配置しています。
あとは生成したそれぞれのdiv要素のサイズを決めて、背景画像を入れてあげればはいできあがり…。という具合です。
こうやって動的に要素を生成して角丸を表現する場合、メリットとして、ボックスのサイズの制限がなく、トリッキーな背景画像の作成やマークアップを行わなくてすむという事があげられます。
一方、デメリットとしては、表示のパフォーマンスやスクリプトオフ時の表示の差異などが挙げられます。スタティックな角丸とスクリプトで生成する角丸のどちらかが絶対よいという事はなく、当然ケースバイケースなので、どちらの実装方法も知っておいて、実際にマークアップを行う際に「これはスタティックかな」「これはスクリプト使った方がいいだろ」くらいの判断ができると、仕事のに余裕というか、厚みがぐっと増すような…、気がします。