round-corner.js - 丸角ライブラリ

javascript

Nifty Corners: rounded corners without images By Alessandro Fulciniti

を参考にやってみたら結構シンプルな作りでできるのねん。 Grazie così tanto! Alessandro.


ポイントは

window.onload = function() {
    RoundCorner.apply( "divClass1","divClass2", "divClass3" );
}

というようなコードで丸角ができるっていうところです。
RoundCorner.applyの引数にはHTML要素のclassを好きなだけ並べてください。1個でも2個でもOK(上記は3個ね)。後は必要なスタイルを予め登録しておいて、スクリプトを2つ追加するだけです。

他のライブラリだと、色の指定をしなきゃなんないみたいなんですが、このスクリプトには必要ありません(bodyには色を指定しておかないといけないけど)。

以下スクリプトとサンプルのHTMLです。

sample-round-corner.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>round corner example</title>
<style type="text/css">
body{
    padding: 20px; 
    background-color: #FFFFFF; /* body's background-color is mandatory */
    font: 100.00% medium "MS UI Gothic",Arial,sans-serif
}
div { text-align: center }
div.divClass1{ margin: 5px 10%; background: #377CB1}
div.divClass2{ margin: 5px 10%; background: #9BD1FA}
div.divClass3{ margin: 5px 10%; background: #D1FA9B}
    
/** the following styles are usually provided in 'niftyCorners.css' */
.rtop,.rbottom{display:block}
.rtop *,.rbottom *{display:block;height: 1px;overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px;height: 2px}
.rs1{margin: 0 2px}
.rs2{margin: 0 1px}
</style>
<script language="JavaScript" type="text/javascript" src="prototype.js"></script>
<script language="JavaScript" type="text/javascript" src="/round-corner.js"></script>
<script language="JavaScript" type="text/javascript"><!--
    window.onload = function() {
        RoundCorner.apply( "divClass1","divClass2", "divClass3" );
    }
--></script>
</head>
<body>
    round corner example
    <div class="divClass1">
        This example is using just 2 libraries.
        <div class="divClass2">
            round-corner.js
            which is written by <a href="http://d.hatena.ne.jp/akm/">Akima-ta</a> and is another implementation of 
            <div class="divClass3">
                <a href="http://pro.html.it/esempio/nifty/">NiftyCorner By Alessandro Fulciniti</a> 
                Grazie cosi tanto!
            </div>
        </div>
        powered by 
        <div class="divClass2">
            <a href="http://prototype.conio.net/">prototype.js</a>
        </div>
    </div>
</body>
</html>


round-corner.js

/**
 * round-corner.js
 * 
 * require 
 *   prototype.js (1.4.0 - )
 * 
 * @author T.Akima
 * @copyright T.Akima
 * 
 * see also: NiftyCorner written by Alessandro Fulciniti
 * http://pro.html.it/esempio/nifty/
 */
RoundCorner = Class.create();
Object.extend( RoundCorner, {
    apply: function() {
        for(var i = 0; i < arguments.length; i++)
            this._apply( arguments[i] );
    },
    
    _apply: function( className ) {
        var elements = document.getElementsByClassName(className, document);
        for(var i = 0; i < elements.length; i++) {
            var element = elements[i];
            var elementBg = Element.getStyle(element, "background-color");
            var parentBg = this.getParentColor( element );
            new RoundCorner( element, elementBg , parentBg );
        }
    },
    
    getParentColor: function( element ) {
        var elementBg = Element.getStyle(element, "background-color");
        for(var current = element.parentNode; current != document; current = current.parentNode) {
            var currentBg = Element.getStyle(current, "background-color");
            if (elementBg != currentBg)
                return currentBg;
        }
        return elementBg;
    }
} );
RoundCorner.prototype = {
    initialize: function( element, innerColor, outerColor, size ) {
        this.element = element;
        this.innerColor = innerColor;
        this.outerColor = outerColor;
        this.size = size || null;
        this.addTopPart();
        this.addToBottom();
    },
    
    addTopPart: function() {
        var d = document.createElement("b");
        d.className="rtop";
        d.style.backgroundColor = this.outerColor;
        var cn = (this.size == "small") ? "rs" :"r";
        var lim = (this.size == "small") ? 2 : 4;
        for(var i=1; i <= lim; i++){
            var x = document.createElement("b");
            x.className = cn + i;
            x.style.backgroundColor = this.innerColor;
            d.appendChild(x);
        }
        this.element.insertBefore(d, this.element.firstChild);
    },
    
    addToBottom: function() {
        var d = document.createElement("b");
        d.className = "rbottom";
        d.style.backgroundColor = this.outerColor;
        var cn = (this.size == "small") ? "rs" :"r";
        var lim = (this.size == "small") ? 2 : 4;
        for(var i=lim; i>0; i--){
            var x = document.createElement("b");
            x.className = cn + i;
            x.style.backgroundColor = this.innerColor;
            d.appendChild(x);
        }
        this.element.appendChild(d, this.element.firstChild);
    }
}