Javascriptを使って動的に角丸コーナーを作成するjQuery用のCurvyCordersプラグインを使ってみます。
Drupalの場合jQueryは標準でインストールされロードされますのでプラグインのみをインストールするだけで楽に使うことができます。
これはサンプルです。こんな感じの角丸コーナーをイメージデータを使わずにCSSとJavascriptだけで簡単に作成することができます
プラグインの入手先はこちら
Anti-aliased Rounded corners with JQuery
http://blue-anvil.com/archives/anti-aliased-rounded-corners-with-jqueryjQuery.comのプラグイン紹介ページからもダウンロード可能です。
JQuery Curvy Corners
http://plugins.jquery.com/project/curvy-cornersダウンロードしたものを展開したものの中に含まれるjquery.curvycorners.packed.jsファイルのみを使用します。ここでは使用するテーマのディレクトリにこのファイルをコピーしておいて使うにします。
まず、このJavascriptがページロード時に自動的にロードされるようにするためにpage.tpl.phpのヘッダー部(<head>と</head>の間)に以下の記述を追加します。
- <script type="text/javascript" src="<?php print base_path() . path_to_theme() ?>/jquery.curvycorners.packed.js"></script>
- <script type="text/javascript">
- $(function() {
- $('.sample').corner();
- $('.sample2').corner();
- });
- </script>
これがjavascriptで処理されるとこんな感じになります。
ここが角丸になったDIVです。2pxの枠線があります。
次にULのほうは以下のようなHTMLを記述すると
これがjavascriptで処理されるとこんな感じになります。
-
ここが角丸になったULです。ここは枠線はありません。
長くなりますのでつづきは次の記事へ
jQueryプラグインCurvyCornersを使う (2)