Posted at

TOPへ戻るをpreloadにしてみるテスト。[XCL2.2系専用]

More than 5 years have passed since last update.

JQueryで、スクロールしながらTOPに戻るプラグイン「jQuery Scroll to Top Control v1.1」を

XOOPS Cubeで利用可能にするプリロードを作ってみました。(XCL2.2系専用)

※3つのファイルを、以下のような感じで配置する事になります。

html

├─[preload]─JQueryScrollTopControl.class.php

├─[common]─scrolltopcontrol.js

├─[images]─up.png





1.preload作成

作成ファイル:/html/preload/JQueryScrollTopControl.class.php


JQueryScrollTopControl.class.php

<?php

if (!defined('XOOPS_ROOT_PATH')) exit();

class JQueryScrollTopControl extends XCube_ActionFilter
{
public function preBlockFilter()
{
$this->mRoot->mDelegateManager->add('Site.JQuery.AddFunction',array(&$this, 'addScript'));
}

public function addScript(&$jQuery)
{
$ImgIcon = "up.png"; //画像ファイルの名前
$ImgWidth = "50"; //画像ファイルの横幅(単位:px)
$ImgHeight = "50"; //画像ファイルの高さ(単位:px)

$ControlIcon = XOOPS_URL . "/images/" . $ImgIcon;
$JQueryScrollTopControlScript = "/common/js/scrolltopcontrol.js?" . "url=" . $ControlIcon . "&width=" . $ImgWidth . "&height=" . $ImgHeight;

$jQuery->addLibrary($JQueryScrollTopControlScript, true);
}
//class END
}
?>


※画像ファイル名を変更する場合、$ImgIconにファイル名、

 $ImgWidthに画像の横幅、$ImgHeightに画像の高さを指定してください。



2.jQuery Scroll to Top Controlの変更

jQuery Scroll to Top Control v1.1をダウンロードして、scrolltopcontrol.jsを開き、

先頭に下記コードを追加。

var configs = new Object;

var scripts = document.getElementsByTagName("script");
for (var i = 0; i < scripts.length; i++) {
var s = scripts[i];
if (s.src && s.src.match(/scrolltopcontrol\.js(\?.*)?/)) {
var params = s.src.replace(/.+\?/, '');
break;
}
}

params = params.split("&");
for(var i = 0; i < params.length; i++) {
var tmp = params[i].split("=");
configs[tmp[0]] = unescape(tmp[1]);
}

imgtag = '<img src="' + configs.url + '" style="width:' + configs.width + 'px; height:' + configs.height + 'px;" />';

更に、12行目あたりにある

controlHTML: '<img src="up.png" style="width:48px; height:48px" />',

…を、以下の通りに変更。

controlHTML: imgtag,

変更したscrolltopcontrol.jsを /html/common/js/ にアップロード。



3.TOPへ戻る画像

jQuery Scroll to Top Control同梱の画像(若しくは自分で作った画像)を、

/html/images/ へアップロード。


GitHubにあげてあるので、こちらからどうぞ。

pianoman-net / JQueryScrollTopControl