4月
1
2012

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

XOOPS Cube流行のJQueryで、スクロールしながらTOPに戻るプラグインを
実装してみたのだけど、これをpreloadでできないかな?と考え、
練習がてらやってみました。以下、備忘録。
 

 
既にXOOPS123さんのところで、「ページトップに戻るボタンを
付加するプリロード
」という素晴らしいpreloadが公開されていますが、
ボタンのcssを変更する技術が足りずに思ったように変えられなかったので、
画像で変えられる「jQuery Scroll to Top Control v1.1」を採用。

が、preloadにするにあたっての問題点もTOPに戻る画像にあった様で…
XCLに設置する場合ソースの12行目あたりにある画像置いてるURLをhttpから
はじまる絶対パスに書き変える必要があるのですが、JavascriptではPHPの
$_SERVER[‘HTTP_HOST’]みたいに簡単に取得できないらしい。

で、色々調べてみたら、JavaScriptに引数を渡す記事を発見。
preload側で、PHPで画像の絶対パスを取得してサイズなんかを指定させて、
引数で渡す方法で試してみました。
 
 
【材料】
jQuery Scroll to Top Control v1.1
(scrolltopcontrol.js 及び up.png)
 
 
【作り方】
全3ファイルを以下のような感じで配置する事になります。

html
├─[preload]─JQueryScrollTopControl.class.php
├─[common]──scrolltopcontrol.js
├─[images]─up.png

赤文字は新規作成ファイル、青文字はjQuery Scroll to Top Control
 同梱のファイル(一部変更有)になります。
 
 
1.preload新規作成

作成ファイル:/html/preload/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の変更

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/ へアップロード。

前述の通り、画像ファイル名やサイズを変えた場合、
 JQueryScrollTopControl.class.phpの該当箇所を変更してください。
 
 
【後記】
moduleを作る前にpreloadからはじめるのも良いかもと最近購入した
書籍で見たので、練習がてらはじめてpreloadを作ってみました。
ソースにすっごい長い引数(画像ファイルの絶対パス)がくっついた
scriptタグが埋め込まれる事になるのだが…こんな方法で良いのだろうか;;

因みに、エントリタイトルに記した通り、XCL2.2系専用になります。
(試しに僕が管理しているXCL2.1系に入れていたら動きませんでした。)
XCL2.1はjQuery本体を読み込まず、preloadでjavascriptを読み込む
機能もないらしいです。ご教示くださった有識者の方に、この場を借りて
お礼申し上げます。
 
 

【参考サイト】
》XOOPS Cube wiki – Legacy JavaScript;ja
》jQueryで、ぬるっとスクロールしながらページのトップに戻る機能を実装する。
》JavaScriptファイルに引数を渡す

 
 
【追記1】
「JQueryScrollTopControl.class.php」ですが、間違って修正前のソースを
貼り付けてしまいましたので、新しいのに修正しました。
また、本記事はpreload作成練習の記事ですので、個人1サイトでXCL使ってて
jQuery Scroll to Top Controlを導入したい場合は、素直に
scrolltopcontrol.js内の画像ファイルURLを固定で記述して
設置しまう方が楽だと思います。
 
 
【追記2】
この記事をQuiitaにも掲載し、preloadをGitHubにあげました。
両方とも、まだよく使い方解ってないんですけどね;
作るのメンドい方は、GitHubからドゾ。
 
GitHub pianoman-net / JQueryScrollTopControl
Qiita TOPへ戻るをpreloadにしてみるテスト。[XCL2.2系専用]
 
 

 


4 Comments + Add Comment

  • はじめまして。
    xoops123.com の管理人 marine と申します。

    ネット検索していて、ここの記事を見つけました。
    良いものを作られましたね~(^O^)

    画像のフルパスについては、私も結構悩みまして・・・
    結局、CSSで解決しました。

    今回の方法、なかなか良い方法だと思いますので、どこかで公開されると良いと思いますよ。

  • marineさん、コメントありがとうございます。
    で、某所ではいつもお世話になっております。
    常々サイトを参考にさせて頂いているmarineさんから
    お褒め頂いてとても光栄です!
    実はGitHubあたりに載せようかと思っているのですが、
    時間がとれずなかなか勉強できていません。
    今後ともご指導をよろしくお願いします。

  • あ、なるほど・・・アイコンで気づきました。

    素晴らしい内容なので、是非とも公開してみませんか?
    とりあえず、Facebookの XOOPS Creators に登録させていただきましたので、訪問してみてくださいな。。。

  • marineさん、重ね重ねありがとうございます!
    “XOOPS Creators”なんてできてたんですね…バタバタしてて気付きませんでした;
    ようやくひと段落になると思いますので、GitHub勉強して公開してみます。

コメントする

*

2017年10月
« 7月    
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

Archives

Recommended