締切済み

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

2010/06/03 16:18

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"に一番最初に表示されるように設定されたページが開いてしまいます。 ----------------------------------------------------------- 以上です。解決策をご存知の方がいらっしゃいましたらご教授願えますでしょうか。どうぞ宜しくお願い致します。

cn_satom
お礼率77% (7/9)

JavaScript
回答数5
ありがとう数24

みんなの回答 （5）
専門家の回答

みんなの回答

my--
ベストアンサー率89% (91/102)

2010/06/09 20:23 回答No.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"></script> <style type="text/css"></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/10 12:32

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

質問者

補足 2010/06/10 12:39

自分の質問に自分で回答ができないので、補足スペースで失礼します。下記の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 : '«前へ', nextText : '次へ&raquo', }); // 指定ページに移動クリックイベントを実行 //$('#' + pageNavId + ' a[rel=' + id + ']').trigger('click'); $('#' + pageNavId + ' a[rel=' + id + ']').click(); }); </script> ----------------------------------------------------------- yyr446さん、my--さん、いろいろとありがとうございました。感謝しております。以上です。

my--
ベストアンサー率89% (91/102)

2010/06/08 15:37 回答No.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/09 16:47

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 12:18

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> --------------------------------------------- 何が問題なのか、もう少し自分でも調べてみます。

my--
ベストアンサー率89% (91/102)

2010/06/07 19:36 回答No.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/14 11:31

*********************************************************** ※以下の文章は、回答番号：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 : '«前へ', 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/08 11:30

my--さん>>>　非常にご丁寧なご回答、ありがとうございます。感謝しています。ただ、大変恐縮なのですが、できればダウンロードしてきたjQueryのスクリプトには、後日アップデートがかかったときのことを考慮し、編集を入れることは避けたいと思っています。申し訳ありません。 --- ダウンロードしてきたjQuery以外に編集を入れるかたちで解決策をお伺いできますと幸甚です。何卒よろしくお願い致します。

yyr446
ベストアンサー率65% (870/1330)

2010/06/04 15:16 回答No.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"とかだったら、最後の１文字"3"を取得して if(location.hash!=''){ 　var page=location.hash.charCodeAt(location.hash.length-1); // =>"3" 　$(".nav a[rel='"+ page +"']").click(); }

質問者

お礼 2010/06/07 16:24

いろいろ試してみましたが、なかなかうまくいきません。一方が機能したら、一方が機能しない、といった感じでいたちごっこになってしまっています。現在ページAのJavascriptは以下のように記載しています。（HTMLに直接記載） ------------------------------------- <script type="text/javascript"> $(document).ready(function () { $("#longText").pager("div", { navAttach : 'append', height:'auto', prevText : '«前へ', 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 14:24

yyr446さん>>>　連絡が遅くなり、申し訳ありません。ご丁寧にご回答いただき、ありがとうございました。先週から教えていただいた内容を試しているのですが、うまく機能せず、悪戦苦闘中です。私のJavascriptの設置場所や書き方に誤りがあると思われます。解決しましたら改めてお礼を申し上げます。よろしくお願い致します。

yyr446
ベストアンサー率65% (870/1330)

2010/06/03 17:08 回答No.1

それは、ページＡのjavascriptの $(function(){.....}); の中で、無条件にページャーをセット$().pager(...); しているから、ページＡがロードされると無条件にページャーが実行され初期ページ表示になるのだと思います。 $(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/04 13:04

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初心者で分からないことが多く恐縮です。お手数をお掛けいたしますが、宜しくお願い致します。

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