Memo > mootools > 角丸ライブラリ – Transcorners

最近好きなjavascriptライブラリのmootoolsでHTML内のボックス要素をスムーズに角丸(角を丸める)を実現するTranscornersという物があります。

中々面白いのでちょろりとデモなぞ書いてみます。角丸はcssでも実現できますがHTML側での改編が結構必要だったり、画像を用意したりするので、javascriptで実現するとなかなか楽チンでいいです。

重要追記

mootoolsのRevision76の大幅改編でTranscornersは現状普通では動きません。Transcorners側でも対処が入るとは思いますが、一時的な対処法があるので、別途一番下を見てください。

一番単純な例

基本的に「makeRounded」というメソッドを使うと角丸にする事が出来ます。どうも該当要素の上位要素のバックグラウンドを角丸のバックグラウンドに使っているらしいので、角丸のバックグラウンドを変えたい時は上位要素のバックグラウンドの色も変更しないとダメみたいです。また、要素に「padding」を入れないと角丸が上の被さってしまうので注意(もちろんz-indexを指定すればOKです)。ちなみにオプションを入れない単純な角丸の場合は「10px」の幅が取られます。

html code

<div id="demo1" style="background:#999999; color:#FFFFFF; padding:10px; width:300px;">
一番単純な例
</div>

javascript code

$('demo1').makeRounded();

角を更に丸めてみる

角丸の大きさも「radius」のオプションを指定する事で変更する事が出来るみたいです。この例では50pxに指定しています。同時に角丸にする該当要素に「padding:50px」を指定しています。

html code

<div id="demo2" style="background:#999999; color:#FFFFFF; padding:50px; width:220px;">
角を更に丸めてみる
</div>

javascript code

$('demo2').makeRounded({radius: 50});

ボーダー(線)を入れる＋一部だけ角丸にする。

角丸の外側にボーダー(線)を入れる事もできます。ただオプションで指定する「borderColor」は角丸部分のみが反映されるので、角丸にしたい該当要素にもボーダー「border」をスタイルシートで入れています。また上下左右の一部のみも角丸に指定する事が出来るらしいです。「top left」を入れると上の左のみ、「top」だと上の左右って感じです。

html code

<div id="demo3" style="background:#EEEEEE; color:#333333; padding:10px; width:300px; border:1px solid #339933;">
ボーダー(線)を入れる＋一部だけ角丸にする。
</div>

javascript code

$('demo3').makeRounded('top left', {borderColor: '#339933', radius: 10});

直線的な角にも

mootoolsにある「fx.linear」「Fx.Transtions.linear」をオプション指定する事で直線的な角を作る事もできます。

html code

<div id="demo4" style="background: #999999; color: #FFFFFF; padding: 10px; width: 300px;">
直線的な角にも
</div>

javascript code

$('demo4').makeRounded({transition: Fx.Transitions.linear});

角丸全部入り

角丸で、ボーダーを入れて、更に上・右下に角丸を入れるオプション全部入りです。

html code

<div id="demo5" style="background:#EEEEEE; color:#333333; padding:30px; width:260px; border:1px solid #339933;">
角丸全部入り
</div>

javascript code

$('demo5').makeRounded('top,bottom right', {borderColor:'#339933', radius: 30});

直線角全部入り

「fx.linear」を使った直線角を使った全部入りです。

html code

<div id="demo6" style="background:#EEEEEE; color:#333333; padding:30px; width:260px; border:1px solid #339933;">
直線角全部入り
</div>

javascript code

$('demo6').makeRounded('top left, bottom', {transition: Fx.Transitions.linear, radius: 30});

新しくなったmootoolsに対応させる。

mootools側での大幅改編の内容としてはエフェクトを計算するためのメソッド(custom transition)の名前が変わったという事です。

* Fx.js is heavily modified to allow all of Robert Penner transitions! The downside is that if you have ever used a custom transition you’ll have to upgrade your code, as all the transitions are now stored in Fx.Transition. …
so transition: Fx.quadIn becomes Fx.Transitions.quadIn etc.

つまり、いままで「Fx.quadIn」という名前で使っていたものが「Fx.Transitions.quadIn」になります。Transitionの中にバラバラになっていたものを纏めた形だと思われます。また引数が増え外側からもオプションを指定できるようになっているみたいです。

そこで、先日エントリしたTranscornersにも影響が出ました。一応以下の部分を変更すると使えるようになると思われます。（というか変更したものをこのブログでも使ってます。）

変更点１ – 11行目

transition: Fx.circIn,

まず、ここを以下のように変更↓↓↓

transition: Fx.Transitions.circIn,

変更点２ – 61行目

margin = Math.round(this.options.transition((this.options.radius - i) / this.options.radius) * this.options.radius);

次にここをこのように変更↓↓↓

margin = Math.round(this.options.transition((this.options.radius - i) / this.options.radius,0,1,1) * this.options.radius);

これで動くようになると思われます・・・。ま、今度Transcornersに改編あったらまたエントリー設けようと思います。

• Transcorners — Cornerus Pride is there scared
• mootools