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>