角丸2/jquery.corner.js

角丸を実現したい許りに其の再初期には、 table タグを用い最早化石となった所謂テーブルデザインで作成したり、 将又、画像のみによりてしか実現のならずと曰ふてみたり、 次いで数年前よりはCSSの時代とて、 div タグを4つも使用したり、2つに減らして工夫したと放言したり、 愈々Ajaxも華やかなりしjavascriptの復権を果たせば、 様々なライブラリの登場に欣喜雀躍し、利用した内にも、 最も有用だと思われたのが当ブログは2008年3月13日のアーティクル 角丸 にご紹介の curvycorner でしたが、此処に至り、遂に登場となったのが、 JQuery Corner なるjQueryにて角丸を実現するプラグイン jquery.corner.js の、 先ずは百聞は一見に如かずの デモページ は驚きの、御本尊は此方Dave Methvin氏による JQuery Corner Gallery にて英文ですが詳細が記されています。
此れを受けてMike Alsup氏が更なるデモを展開するのが、 もっとデモページ にて、此方では角丸に必須の枠線機能がバラエティー豊かに展開されています。
当情報の紹介されていたIDEA*IDEAの2008年8月28日の記事 jQueryでさまざまな角丸っぽい効果を実現するプラグイン『jQuery Corner』 に於いても記法がシンプルであることに触れ
これは超絶便利そう
と表現のされるは全く以て其の通りと肯かされるは以下に実際に使用して見た上からの感想です。
スポンサーリンク
以下は主にMike Alsup氏に依るソースを参考にさせていただきました。

先ずはシンプルな標準の機能で実現される表示です。 当機能のみにても実に有用に感じさせられます。

Round

$(this).corner();

Bevel

$(this).corner("bevel");

Notch

$(this).corner("notch");

Bite

$(this).corner("bite");

Cool

$(this).corner("cool");

Sharp

$(this).corner("sharp");

Slide

$(this).corner("slide");

Jut

$(this).corner("jut");

Curl

$(this).corner("curl");

Tear

$(this).corner("tear");

Fray

$(this).corner("fray");

Wicked

$(this).corner("wicked");

Sculpt

$(this).corner("sculpt");

Long

$(this).corner("long");

Dog Ear

$(this).corner("dog");

Dog2

$(this).corner("dog2");

Dog3

$(this).corner("dog3");



次いでは任意のコーナーを丸める形式です。

Top Bevel

$(this).corner("bevel top");

Top-Left Bite

$(this).corner("bite tl");

Round Bottom

$(this).corner("bottom");

Bottom-Left Notch

$(this).corner("notch bl");

Top-Right Dog Ear

$(this).corner("dog tr");

Top-Left, Bottom-Right Cool

$(this).corner("cool tl br");



コーナーを丸める半径は指定も出来ます。

Round 30px

$(this).corner("30px");

Round 5px

$(this).corner("5px");

Cool 20px

$(this).corner("cool 20px");

Sharp 20px

$(this).corner("sharp 20px");

Bite 30px

$(this).corner("bite 30px");

Wicked 20px

$(this).corner("wicked 20px");

Dog 20px

$(this).corner("dog 20px");

Dog2 30px

$(this).corner("dog2 30px");

Dog3 30px

$(this).corner("dog3 30px");



Mike Alsup氏の実装による肝にて枠線の表示を実現しています。

Round

$(this).corner("round 8px").parent().css('padding', '4px').corner("round 10px")

Round

$(this).corner("round 8px").parent().css('padding', '8px').corner("round 14px")

Round

$(this).corner("round 14px").parent().css('padding', '15px').corner("round 14px")

Bevel

$(this).corner("bevel 8px").parent().css('padding', '5px').corner("bevel 10px")

Bevel

$(this).corner("bevel 8px").parent().css('padding', '10px').corner("bevel 14px")

Bite

$(this).corner("bite 10px").parent().css('padding', '8px').corner("bite 10px")

Bite

$(this).corner("bite 20px").parent().css('padding', '15px').corner("bite 20px")

Fray

$(this).corner("fray 10px").parent().css('padding', '10px').corner("fray 10px")

Tear

$(this).corner("tear 20px").parent().css('padding', '15px').corner("tear 20px")

Notch

$(this).corner("notch 4px").parent().css('padding', '4px').corner("notch 4px")

Notch

$(this).corner("notch 10px").parent().css('padding', '12px').corner("notch 10px")

Sharp

$(this).corner("sharp 10px").parent().css('padding', '8px').corner("sharp 10px")

Cool

$(this).corner("cool 20px").parent().css('padding', '10px').corner("cool 10px")

Bite/Round

$(this).corner("round 20px").parent().css('padding', '8px').corner("bite 10px")

Round/Bite

$(this).corner("bite 15px").parent().css('padding', '8px').corner("round 10px")

Fray/Tear

$(this).corner("tear 20px").parent().css('padding', '8px').corner("fray 10px")

Jut/Sculpt

$(this).corner("sculpt 20px").parent().css('padding', '8px').corner("jut 10px")

Bevel/Notch

$(this).corner("notch 20px").parent().css('padding', '8px').corner("bevel 15px")

Notch/Bite

$(this).corner("bite 15px").parent().css('padding', '10px').corner("notch 10px")

Bite/Notch

$(this).corner("notch 15px").parent().css('padding', '15px').corner("bite 20px")

Curl/Long

$(this).corner("long 15px").parent().css('padding', '15px').corner("curl 15px")



コーナー及びボーダーの色を指定して面白い効果を出しています。

normal corners

$(this).corner();

colored corners

$(this).corner("cc:#ef1a45");

colored strips

$(this).corner("sc:#ef1a45");

"keep" border

$(this).corner("keep");

cc:#ef1a45 notch

$(this).corner("cc:#ef1a45 notch");

cc:#ef1a45 keep notch

$(this).corner("keep notch cc:#ef1a45");

cc:#ef1a45 keep bite

$(this).corner("bite keep 15px cc:#ef1a45");

cc:#ef1a45 cool keep

$(this).corner("cc:#ef1a45 cool keep 20px");



任意のコーナーを指定の形式で変更することにより、 全体として上下に矢印が表示される様な実装です。

Left

$(this).corner("sharp tr br 20px");

Right

$(this).corner("sharp tl bl 20px");



単に角丸に留まらず、様々の表示の機能が用意されれば、 選択に困惑する嬉しい悲鳴が聞こえてきそうな充実振りです。
スポンサーリンク