実行結果
例1:クリックすると伸縮する角丸ボックス
This approach responds to both random size changes and element.style assignments (try clicking this box to morph it).
The idea is to be somewhat compatible with a Javascript effects library of your choosing.
例2:背景なしの角丸ボックス
Here's a transparent box.
例3:ロールオーバー角丸ボックス
It can handle small elements:
例4:背景画像(GIF)を使用した角丸テーブル
This box has a background GIF image.
例5:背景画像(PNG)を使用した角丸テーブル
This box has a background PNG image ...it works in IE6 without AlphaImageLoader - wacky.
例6:円形ボックス
円形ボックス
設置サンプルのソース
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>DD_roundies| 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="/content/lib/DD_roundies_0.0.1a-min.js" type="text/javascript"></script>
<script type="text/javascript">
DD_roundies.addRule('.box', 10); /* 共通 */
DD_roundies.addRule('#morph', 10); /* 例1 */
DD_roundies.addRule('.nav li a', 5); /* 例3 */
DD_roundies.addRule('#not_quite_a_circle', 65); /* 例6 */
</script>
<!-- CSS -->
<style type="text/css">
/* 共通 */
.box { display:block; position:relative; overflow:hidden; zoom:1; margin:10px auto; padding:15px; background:#85bca7; border:4px solid #827452;}
/* 例1:クリックすると伸縮する角丸ボックス */
#morph { padding:20px 30px; border:0px solid #333; color:#FFF; background:#000;}
/* 例2:背景なしの角丸ボックス */
.no_background { border:5px solid #85bca7; background:none; }
/* 例3:ロールオーバー角丸ボックス */
.nav, .nav * { margin:0; padding:0; }
.nav li { display:inline; }
.nav li a { position:relative; zoom:1; float:left; *float:none; *display:inline-block; margin:8px 5px 0 0; *margin-right:1px; padding:2px 5px 3px; border:2px solid #fff; background:#827452; color:#fff; text-decoration:none; }
.nav li a:hover { border-color:#827452; background:#fff; color:#827452; }
.nav li a * {cursor:pointer}
/* 例4:背景画像(GIF)を使用した角丸テーブル */
/* 例5:背景画像(PNG)を使用した角丸テーブル */
.has_gif { background:transparent url(/content/img/pengin.gif) repeat 0 0 ;}
.has_png { background:transparent url(/content/img/pattern.jpg) repeat 0 0; }
.has_gif,
.has_png { padding:40px; font-size:150%; }
.has_png { color:#fff; border-color:#85bca7; }
/* 例6:円形ボックス */
#not_quite_a_circle { width:100px; height:100px; border:0px solid #000; background:#ff6699; line-height:100px; text-align:center; color:#fff; font-weight:bold; }
</style>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<div id="wrap">
<h1><a href='http://dillerdesign.com/experiment/DD_roundies/'>DD_roundies</a> | 設置サンプル</h1>
<!-- CODE -->
<h2>例1:クリックすると伸縮する角丸ボックス</h2>
<div class="box orange" id="morph">
This approach responds to both random size changes and element.style assignments <b>(try clicking this box to morph it)</b>.<br>
<br>
The idea is to be somewhat compatible with a Javascript effects library of your choosing.
</div>
<script>
var d = 0;
var c = 0;
var upOrDown = true;
var setBorder = function() {
var obj = this;
var windDown = setInterval(function() {
d += upOrDown ? 1 : (-1);
if (d >= 0 && d <= 10) {
obj.style.borderWidth = d + 'px';
c = d%11;
if (c == 10) {
c = 'A';
}
c = c.toString();
obj.style.marginLeft = d + 'px';
obj.style.marginRight = d + 'px';
obj.style.backgroundColor = '#' + c + c + c;
obj.style.fontSize = (100 + (d*5)) + '%';
}
else {
upOrDown = !upOrDown;
clearInterval(windDown);
}
}, 10);
};
document.getElementById('morph').onclick = setBorder;
</script>
<h2>例2:背景なしの角丸ボックス</h2>
<div class="box no_background">
Here's a transparent box.
</div>
<h2>例3:ロールオーバー角丸ボックス</h2>
<div class="box">
It can handle small elements:
<ul class="nav oh">
<li><a href="#">These</a></li>
<li><a href="#">are</a></li>
<li><a href="#">anchor</a></li>
<li><a href="#">elements</a></li>
<li><a href="#">and</a></li>
<li><a href="#">get</a></li>
<li><a href="#">psuedo-classes.</a></li>
</ul>
</div>
<h2>例4:背景画像(GIF)を使用した角丸テーブル</h2>
<div class="box has_gif">
This box has a background GIF image.
</div>
<h2>例5:背景画像(PNG)を使用した角丸テーブル</h2>
<div class="box has_png">
This box has a background PNG image ...it works in IE6 without AlphaImageLoader - wacky.
</div>
<h2>例6:円形ボックス</h2>
<div class="box" id="not_quite_a_circle">
<span>円形ボックス</span>
</div>
<!-- CODE / -->
</div>
</body>
</html>