jQueryプラグイン quoteEffect

現在位置：E-riverstyle Design ホーム DevelopmentJavaScriptライブラリ

jQuery Plugin quoteEffect

概要

blockquoteの表示に引用元を表示するためのjQueryプラグインです。

デモ

1.4.3 最低限のコントラスト: テキスト及び画像化された文字の視覚的な表現には、少なくとも 4.5：1 のコントラスト比をもたせる。(レベルAA)

設置方法

本プラグインは、jQuery 1.5.1で動作検証をしています。jQuery 1.5.1以上が必要です。公式サイトから入手してください。入手したら、head要素の範囲以内にjQueryを設置してください。

jQueryのダウンロードはこちらから

<script type="text/javascript" src="jquery.js"></script>

また以下のような指定でもかまいません。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>

必要ファイルをダウンロードして、JSファイルを同じくhead要素の範囲以内に設置してください。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="quoteeffect.js"></script>

また、下記のように本jQueryプラグインを動作せるために、head要素に設置してください。

<script type="text/javascript">
$(function(){
    $("blockquote").quoteEffect();
});
</script>

下記のようにblockquote要素には、cite属性とtitle属性を必ず入れてください。どちらかが無ければ本プラグインは適用されません。

<blockquote cite="引用元のURL" title="引用元のタイトル">
    <p>引用文/<p>
</blockquote>

動作確認

Firefox 3.6.15
Google Chrome 9
Safari 5.0.2
Opera 11
Internet Explorer 8

オプション

本プラグインはoptionでblockquoteのデザインの変更ができます。それぞれのオプションは下記表となっています。

オプションの一覧表
オプション	意味	値
citeshowBorderWidth	blockquoteの範囲の左枠線のサイズ	数値（px、em、%）
citeshowBorderStyle	blockquoteの範囲の左枠線のスタイル	solid、dotted（枠線のスタイル）
citeshowBorderColor	blockquoteの範囲の左枠線の色	カラーコード
citeshowQuote	blockquoteの背景画像、デフォルトでは’の画像が表示される	画像のパス
citeshowRepeat	背景画像を繰り返し表示するか	no-repeat、repeat-x、repeat-y
citeshowBgPosition	背景画像の位置	数値（%）、top、bottom、center、left、right
citeshowBgColor	blockquoteの背景色	カラーコード
citeshowPadding	blockquoteのパディング	数値（px、em、%）
citeshowFontWeight	blockquoteの文字の太さ	bold、normal
citeshowAlign	cite要素の位置	left、center、right
citeshowLineHeight	blockquoteの行間	数値（px、em、%）
citeshowLineHeight	cite要素の文字の太さ	bold、normal
citeshowFontSize	cite要素の文字のサイズ	数値（px、em、%）
citeshowPaddingTop	上パディング	数値（px、em、%）

オプション適用例

背景色と文字色を変更したい場合は下記のように指定してください。

<script type="text/javascript">
$(function(){
    $("blockquote").quoteEffect({
            citeshowBorderWidth : "10px",
            citeshowBorderColor : "#999999"
        });
});
</script>