こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

jQueryのpagerを使ったページで、

jQueryのpagerを使ったページで、
ページ内リンクを機能させる方法を教えてください。

以下のサイトを参考に、
自動でページング化されるページを作りました。

『ゼロからはじめるpager - Web文章をらくらく分割してみよう』(マイコミ)
http://journal.mycom.co.jp/articles/2007/06/19/null/index.html

ページング機能は問題なく作動しているのですが、
外部からのページ内リンクがうまく機能しません。
どうしても、ページを開いたときに
一番最初に表示するよう設定しているページが
開いてしまいます。

-----------------------------------------------------------
<例>
ページング機能を施したページを"ページA"とします。
"ページA"で2ページ目以降に表示される特定の箇所に
<a id="hoge"></a>を設置します。

"ページB"を作ります。
"ページB"に<a href="ページA#hoge">hoge</a>を設置します。
リンク"hoge"をクリックすると、
"ページA"の<a id="hoge"></a>にはジャンプせず、
"ページA"に一番最初に表示されるように
設定されたページが開いてしまいます。
-----------------------------------------------------------

以上です。
解決策をご存知の方がいらっしゃいましたら
ご教授願えますでしょうか。
どうぞ宜しくお願い致します。

投稿日時 - 2010-06-03 16:18:02

QNo.5942078

困ってます

このQ&Aは役に立ちましたか?

20人が「このQ&Aが役に立った」と投票しています

回答(5)

ANo.5

>No.4補足
状況を再現できないので、ちょっと分からないですね。
"uri"はただの変数ですから、何に変えても状況は変わらないです。
エラーメッセージでの原因特定も私にはできません。

参考にされたサイトに掲載されているものですから
似たような構成になっていると思いますが、こちらのソースコード全文です。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.pager.js"></script>
<script type="text/javascript"><!--
$(function() {
var parent = $('#longText').pager('.hogeclass');
var uri = location.href;
var num = uri.lastIndexOf('#');
if (num > -1) {
var idStr = uri.substring(num + 1);
var childs = parent.children('.hogeclass');
childs.each(function(n) {
if (this.id === idStr) {
$('#nav a[rel="' + (n + 1) + '"]').click();
return false;
}
});
}
});
// --></script>
<style type="text/css"><!--
#longText {
width:400px;
height:auto;
border:1px solid gray;
}
.nav { background: #eee; border-top: 1px solid #ccc; padding: 5px; }
.nav a { padding: 0 5px; }
.nav a.highlight { color: #000; font-weight: bold; }
--></style>
<title>Pager サンプル</title>
</head>
<body>
<h1>Pager サンプル</h1>
<div id="longText">
<div id="a" class="hogeclass"><p>
ここは最初の部分になります。
</p></div>
<div id="b" class="hogeclass"><p>
おまけに…
</p></div>
<div id="c" class="hogeclass"><p>
このPageを使うにはjQueryライブラリが必要です。
</p></div>
</div>
</body>
</html>

jQueryに依存してますから、バージョンによっては動かないのかも知れません。
さんざんやってるんでしょうけど、その辺りも含め確認してみて下さい。

投稿日時 - 2010-06-09 20:23:48

補足

自分の質問に自分で回答ができないので、
補足スペースで失礼します。

下記のjavascriptを"ページA"に記載することで
問題解決ができました。

-----------------------------------------------------------
<script type="text/javascript">
$(document).ready(function () {
var pageNavId = '#longText';
var id = '1'; // デフォルト選択ページ指定
//var prefix = 'page'; // 数字の前に付けるプリフィクス(アンカーがテキスト"page"+数字の場合)
var prefix = ''; // 数字の前に付けるプリフィクス(アンカーが数字のみの場合)
var num = location.href.lastIndexOf('#'); //uri末尾から'#'の位置を検索
if (num > -1) { //'#'が見付かれば
var idStr = location.href.substring(num + 1); //末尾まで('#'を含まない)を抜き出す
var id = location.href.substring(num + 1 + prefix.length); // プリフィクスを除く数字 => rel値
}

$('#' + pageNavId).pager('.hogeclass', {
navId : pageNavId,
navAttach : 'append',
//prepend:表示領域内の上、append:表示領域内の下、before:表示領域外の上、after:表示領域外の下
height:'auto',
prevText : '&laquo;前へ',
nextText : '次へ&raquo',
});

// 指定ページに移動 クリックイベントを実行
//$('#' + pageNavId + ' a[rel=' + id + ']').trigger('click');
$('#' + pageNavId + ' a[rel=' + id + ']').click();

});
</script>
-----------------------------------------------------------

yyr446さん、my--さん、
いろいろとありがとうございました。
感謝しております。

以上です。

投稿日時 - 2010-06-10 12:39:34

お礼

my-->>> いろいろとありがとうございました。
大変お手数をお掛けいたしました。
勉強になりました。

投稿日時 - 2010-06-10 12:32:49

ANo.4

>質問者
No.3補足の件了解。
No.1、No.2でも書かれているclickイベントを実行する方向で。

$(function () {
var parent = $('#longText').pager('div');
// ここから
var uri = location.href; //表示uri取得
var num = uri.lastIndexOf('#'); //uri末尾から'#'の位置を検索
if (num > -1) { //'#'が見付かれば
var idStr = uri.substring(num + 1); //末尾まで('#'を含まない)を抜き出す
var childs = parent.children('div'); //子(div)要素リスト(jQuery childrenメソッド)
//ナビ(div)と同じ要素の場合、ナビ要素もリストに含まれるので注意

//子要素リスト探索(jQuery eachメソッド)
childs.each(function(n) {
if (this.id === idStr) { //idと一致すれば
//オプションでナビ(div要素)を先頭に挿入した場合は + 1しません
$('#nav a[rel="' + (n + 1) + '"]').click();
//$($('#nav').find('a')[n + 1]).click();
//子孫要素リストから要素選択することも可能です
return false; //子要素リスト探索終了
}
});

/*
//子要素リスト探索(普通にfor文)
for (var n = 0, len = childs.length; n < len; n++) {
if (childs[n].id === idStr) { //idと一致すれば
//オプションでナビ(div要素)を先頭に挿入した場合は + 1しません
$('#nav a[rel="' + (n + 1) + '"]').click();
break; //子要素リスト探索終了
}
}
*/
}
// ここまで
});

投稿日時 - 2010-06-08 15:37:03

補足

my--さん>>> こんにちは。さっそくご回答ありがとうございます。
上記試してみましたが、状況はかわりません。
自動ページング化が行われず、
コンテンツ全てが1枚のページに表示されています。
ページ内リンクは機能しています。
また、「前へ」「次へ」の表記が消えてしまいました。

こちらで行った作業内容を記載します。

※『$("#longText").pager("div", {』の部分の"div"ですが、
分かりずらいので".hogeclass"と表記させていただきます。
※コメントアウトの部分は削除させていただきます。
実際のソースでは削除していません。

---------------------------------------------

"ページA"の<head></head>内のjavascriptを
ご回答いただいた内容に全て書き換えました。


↓↓↓

<script type="text/javascript">
$(function () {
var parent = $('#longText').pager('.hogeclass');

var uri = location.href;
var num = uri.lastIndexOf('#');
if (num > -1) {
var idStr = uri.substring(num + 1);
var childs = parent.children('.hogeclass');

childs.each(function(n) {
if (this.id === idStr) {

$('#nav a[rel="' + (n + 1) + '"]').click();

return false;
}
});

}

});
</script>
---------------------------------------------

何が問題なのか、もう少し自分でも調べてみます。

投稿日時 - 2010-06-09 12:18:46

お礼

my--さん>>> こんにちは。
スクリプトを確認していて気になったので教えてください。

---------------------------------------------
> var uri = location.href; //表示uri取得
> var num = uri.lastIndexOf('#'); //uri末尾から'#'の位置を検索
> if (num > -1) { //'#'が見付かれば
> var idStr = uri.substring(num + 1); //末尾まで('#'を含まない)を抜き出す
---------------------------------------------

上記に含まれる"uri"ですが、"url"の誤りでしょうか。

また、私のマシン環境ですが、WindowsXP HE上で
FF3.6.3を使用しておりますが、
エラーコンソールで以下のエラーが出ています。

---------------------------------------------
エラー: missing : after property id
ソースコード: var uri = location.href; //表示uri取得
---------------------------------------------

"uri"は"url"に変更して試してみましたが、
エラー内容、それからページに変化はありませんでした。

上記のことからもしお分かりになられることがありましたら
ご教授願えますでしょうか。

お手数をお掛けいたしますが、
よろしくお願い致します。

投稿日時 - 2010-06-09 16:47:23

ANo.3

悪戦苦闘中なのに違った方向からの回答で申し訳ないですが
jquery.pager.jsを直接書き換えてみました。

//jquery.pager.js
var me = $(this); //親要素
var size;
var i = 0; //表示子要素番号初期値(1番目)

初期の表示要素を決定しているのはこの数値です。
その後もこの数値の増減、変更で表示要素を特定しています。
かなり重要な役割をしている変数ですから、もう少し命名に気を遣っても良い気はしますが。。。

//location.href値を元に要素特定し変数iの値を設定
// ここから
var uri = location.href; //表示uri取得
var num = uri.lastIndexOf('#'); //uri末尾から'#'の位置を検索
if (num > -1) { //'#'が見付かれば
var idStr = uri.substring(num + 1); //末尾まで('#'を含まない)を抜き出す
var childs = me.children('div'); //子(div)要素リスト(jQuery childrenメソッド)

//子要素リスト探索(jQuery eachメソッド)
childs.each(function(n) {
if (this.id === idStr) { //idと一致すれば
i = n; //表示子要素番号設定
return false; //子要素リスト探索終了
}
});

/*
//子要素リスト探索(普通にfor文)
for (var n = 0, len = childs.length; n < len; n++) {
if (childs[n].id === idStr) { //idと一致すれば
i = n; //表示子要素番号設定
break; //子要素リスト探索終了
}
}
*/
}
// ここまで

コードの挿入位置ですが

//jquery.pager.js
function init () {
size = $(clas, me).not(navid).size();
if(settings.height == null) {
settings.height = getHighest();
}
if(size > 1) {
makeNav(); // ナビ要素構築

//ココに挿入

show(); // 子要素表示
highlight(); // ナビ要素クラス名設定
}
sizePanel();
if(settings.linkWrap != null) {
linkWrap();
}
}

ココで良いと思います。

投稿日時 - 2010-06-07 19:36:35

補足

my--さん>>> 非常にご丁寧なご回答、ありがとうございます。
感謝しています。

ただ、大変恐縮なのですが、
できればダウンロードしてきたjQueryのスクリプトには、
後日アップデートがかかったときのことを考慮し、
編集を入れることは避けたいと思っています。

申し訳ありません。

---

ダウンロードしてきたjQuery以外に編集を入れるかたちで
解決策をお伺いできますと幸甚です。
何卒よろしくお願い致します。

投稿日時 - 2010-06-08 11:30:36

お礼

***********************************************************
※以下の文章は、回答番号:No.5のやり取りの続きなのですが、
すでに補足・お礼欄が埋まってしまっているので、
ここに回答をさせていただきます。
(教えて!gooのサポートセンターに確認したところ、
該当の補足・お礼欄が埋まってしまった場合は、
空いているその他の回答の補足・お礼欄を使用するよう
指示がありました)
大変分かりづらくなってしまいますが、何卒ご了承ください。
***********************************************************

回答番号:No.5の補足欄の自己解決済みJavascriptですが、
当方が希望していた動きと少々異なりましたので、
下記に修正したものを記載します。

<回答番号:No.5の補足欄のJavascriptの動き>
[ページB]<a href="ページA.html#page3"> -> [ページA]page3へリンク
[ページB]<a href="ページA.html#page2"> -> [ページA]page2へリンク
[ページB]<a href="ページA.html#page1"> -> [ページA]page1へリンク

<当方が実現したかった動き>
[ページB]<a href="ページA.html#page3"> -> [ページA]page1へリンク
[ページB]<a href="ページA.html#page2"> -> [ページA]page2へリンク
[ページB]<a href="ページA.html#page1"> -> [ページA]page3へリンク

-----------------------------------------------------------
訂正版javascript)

<script type="text/javascript">
$(document).ready(function () {
var pageNavId = 'longText';
var id = '1'; // デフォルト選択ページ指定
var prefix = 'page'; // 数字の前に付けるプリフィクス
var num = location.href.lastIndexOf('#'); //uri末尾から'#'の位置を検索

if (num > -1) { //'#'が見付かれば
id = location.href.substring(num + 1 + prefix.length); // プリフィクスを除く数字 => rel値
}
$('#' + pageNavId).pager('.hoge_class', {
navAttach : 'append',
//prepend:表示領域内の上、append:表示領域内の下、before:表示領域外の上、after:表示領域外の下
height:'auto',
prevText : '&laquo;前へ',
nextText : '次へ&raquo',
});

pages = new Array();
re = new RegExp((prefix) ? prefix + "([0-9]+)" : "^([0-9]+)$");
$('#' + pageNavId + ' > a[id*=' + prefix + ']').each(function() {
str = $(this).attr('id');
if (str.search(re) != -1) {
pages.push(RegExp.$1);
}
});

var func = function(a, b) {return (parseInt(a) > parseInt(b)) ? 1 : -1;}
pages.sort(func);
pages.reverse(func);
// 指定ページに移動 クリックイベントを実行
$('#nav a[rel=' + pages[id - 1] + ']').trigger('click');
});
</script>
-----------------------------------------------------------

以上です。よろしくお願いします。

投稿日時 - 2010-06-14 11:31:55

ANo.2

ページナビゲーションの部分は、
<div class="nav" id="xxxx">
 <a rel="prev" href="#" class=""><<</a>
 <a rel="1" href="#" class="highlight">1</a>
 <a rel="2" href="#" class="">2</a>
 <a rel="3" href="#" class="">3</a>
 <a rel="4" href="#" class="">4</a>
 <a rel="next" href="#" class="">>></a>
</div>
みたいに自動生成されるみたいです。
rel属性でページ番号が特定できるから、jQueryの
セレクターで選べます。
'n'ページ目を選びたければ、
 $(".nav a[rel='n']").click();
です。
参考(jQueryのセレクター)
http://semooh.jp/jquery/api/selectors/%5Battribute+value%5D/

location.hashで渡された値が"Page3"とかだったら、
最後の1文字"3"を取得して

if(location.hash!=''){
 var page=location.hash.charCodeAt(location.hash.length-1); // =>"3"
 $(".nav a[rel='"+ page +"']").click();
}

投稿日時 - 2010-06-04 15:16:36

補足

yyr446さん>>> 連絡が遅くなり、申し訳ありません。
ご丁寧にご回答いただき、ありがとうございました。
先週から教えていただいた内容を試しているのですが、
うまく機能せず、悪戦苦闘中です。

私のJavascriptの設置場所や書き方に誤りがあると
思われます。

解決しましたら改めてお礼を申し上げます。

よろしくお願い致します。

投稿日時 - 2010-06-07 14:24:14

お礼

いろいろ試してみましたが、なかなかうまくいきません。
一方が機能したら、一方が機能しない、といった感じで
いたちごっこになってしまっています。

現在ページAのJavascriptは以下のように記載しています。
(HTMLに直接記載)

-------------------------------------
<script type="text/javascript">
$(document).ready(function () {
$("#longText").pager("div", {
navAttach : 'append',
height:'auto',
prevText : '&laquo;前へ',
nextText : '次へ&raquo',
});

$(".nav a[rel='n']").click();
})


$(document).ready(function () {
if(location.href.split('#')[1]!=undefined)
var page=location.href.split('#')[1];
ellse page="page1";
})
</script>
-------------------------------------

ページBに追加したjavascriptはありません。

現在の状況を以下に記載します。
-------------------------------------
<起こっている不具合>
ページングが機能しない

<状況>
ページは自動でページング化されず、
全てのコンテンツを表示しています。
ページ内リンクは機能します。
-------------------------------------


どの部分にどのような問題があるのでしょうか。
お分かりになられる方がいらっしゃいましたら
ご教授願います。
よろしくお願い致します。

投稿日時 - 2010-06-07 16:24:17

ANo.1

それは、ページAのjavascriptの
$(function(){.....});
の中で、無条件にページャーをセット$().pager(...);
しているから、ページAがロードされると無条件にページャーが
実行され初期ページ表示になるのだと思います。

$(function(){}
のページャーセットの後で、location.hrefかlocation.hashを参照して、
アンカーのパラメーターがついていたら、そのページまで、ページャー設定後、
そのページまでページ送りするようにすればよろしかろうと...

ページ送りは
linkText : ["page1", "page2", "page3" ]
に対して
$(".nav a:contains('page3')").click();
で、page3が選べるはずです。

location.hrefの分解は
if(location.href.split('#')[1]!=undefined)
var page=location.href.split('#')[1];
ellse page="page1";

とでもすれば

投稿日時 - 2010-06-03 17:08:01

補足

yyr446さん>>>
ご回答、ありがとうございました。
上記の方法で問題を解決することができました。

大変恐縮ですが、もう1つ教えていただけますでしょうか。

実は、
linkText : ["page1", "page2", "page3" ]
の分ですが、今後ページ数が増えてゆく予定ですので
自動で数字が表示されるようコメントアウトにしています。

この場合、
> $(".nav a:contains('page3')").click();」

> if(location.href.split('#')[1]!=undefined)
> var page=location.href.split('#')[1];
> ellse page="page1";」
部分はどのようになるのでしょうか。

当方、Javascript初心者で分からないことが多く
恐縮です。

お手数をお掛けいたしますが、
宜しくお願い致します。

投稿日時 - 2010-06-04 13:04:12

あなたにオススメの質問