【jQuery】PULL OUT CONTENT PANEL WITH JQUERYの使い方メモ

「PULL OUT CONTENT PANEL WITH JQUERY」は、スクロールでページの下部に来ると表示されるメニュー（コンテンツ）を実装できるプラグインです。

• プラグイン配布元デモページ
• プラグインダウンロードページ

このプラグインをどこまでカスタマイズして実装できるのか、検証メモを残しておきます。

カスタマイズがどこまでできるか検証

1. アイテムボックス（div.pc_item）内はレイアウト自由（要CSSカスタマイズ）
2. 見た目もCSSで簡単に変更可。アイテムボックスの横幅、高さ等も変更可。
   （style.cssの各要素をカスタマイズでOK）
3. 下からどの位置で表示させるかも変更可（Javascript部分をカスタマイズ）

3.の変更は以下の部分です。

	function hidePanel(){
					//165 => 20 pc_title + 120 item + margins
					$pc_panel.css({
						'right'	: -window_w + 'px',
						'top'	: window_h - 165 + 'px'
					}).show();

‘top’ : window_h – 165 + ‘px’の数値を変更することで、高さの調整が可能です。
アイテムボックスの高さ、マージンを考慮して設定する必要があります。

サンプルを変更した際の覚え書き

プラグインをダウンロードし、サンプルを少しいじった時点で「h2」が日本語で表示されず「？？？？」状態になりました。

こちらは、サンプルに「cufon-yui.js」というプラグインが別途実装されていたためでした。このプラグインの使用を辞めると、無事日本語も表示されました。

参考サイト
Cufonの使い方

そのため、まず今回不要な以下の部分をサンプルから削除します。

<script type="text/javascript" src="js/cufon-yui.js"></script><script type="text/javascript" src="js/Liberation_Sans.font.js"></script>
<script type="text/javascript">// <![CDATA[
Cufon.replace('#content h1, #content h2,#content span, .pc_item h2');
// ]]></script>