- 締切済み
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"に一番最初に表示されるように 設定されたページが開いてしまいます。 ----------------------------------------------------------- 以上です。 解決策をご存知の方がいらっしゃいましたら ご教授願えますでしょうか。 どうぞ宜しくお願い致します。
- cn_satom
- お礼率77% (7/9)
- JavaScript
- 回答数5
- ありがとう数24
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- my--
- ベストアンサー率89% (91/102)
- my--
- ベストアンサー率89% (91/102)
>質問者 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; //子要素リスト探索終了 } } */ } // ここまで });
お礼
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"に変更して試してみましたが、 エラー内容、それからページに変化はありませんでした。 上記のことからもしお分かりになられることがありましたら ご教授願えますでしょうか。 お手数をお掛けいたしますが、 よろしくお願い致します。
補足
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)
悪戦苦闘中なのに違った方向からの回答で申し訳ないですが 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(); } } ココで良いと思います。
お礼
*********************************************************** ※以下の文章は、回答番号：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 : '次へ»', }); 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> ----------------------------------------------------------- 以上です。よろしくお願いします。
補足
my--さん>>> 非常にご丁寧なご回答、ありがとうございます。 感謝しています。 ただ、大変恐縮なのですが、 できればダウンロードしてきたjQueryのスクリプトには、 後日アップデートがかかったときのことを考慮し、 編集を入れることは避けたいと思っています。 申し訳ありません。 --- ダウンロードしてきたjQuery以外に編集を入れるかたちで 解決策をお伺いできますと幸甚です。 何卒よろしくお願い致します。
- yyr446
- ベストアンサー率65% (870/1330)
ページナビゲーションの部分は、 <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(); }
お礼
いろいろ試してみましたが、なかなかうまくいきません。 一方が機能したら、一方が機能しない、といった感じで いたちごっこになってしまっています。 現在ページAのJavascriptは以下のように記載しています。 （HTMLに直接記載） ------------------------------------- <script type="text/javascript"> $(document).ready(function () { $("#longText").pager("div", { navAttach : 'append', height:'auto', prevText : '«前へ', nextText : '次へ»', }); $(".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はありません。 現在の状況を以下に記載します。 ------------------------------------- ＜起こっている不具合＞ ページングが機能しない ＜状況＞ ページは自動でページング化されず、 全てのコンテンツを表示しています。 ページ内リンクは機能します。 ------------------------------------- どの部分にどのような問題があるのでしょうか。 お分かりになられる方がいらっしゃいましたら ご教授願います。 よろしくお願い致します。
補足
yyr446さん>>> 連絡が遅くなり、申し訳ありません。 ご丁寧にご回答いただき、ありがとうございました。 先週から教えていただいた内容を試しているのですが、 うまく機能せず、悪戦苦闘中です。 私のJavascriptの設置場所や書き方に誤りがあると 思われます。 解決しましたら改めてお礼を申し上げます。 よろしくお願い致します。
- yyr446
- ベストアンサー率65% (870/1330)
それは、ページＡの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"; とでもすれば
補足
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初心者で分からないことが多く 恐縮です。 お手数をお掛けいたしますが、 宜しくお願い致します。
お礼
my-->>> いろいろとありがとうございました。 大変お手数をお掛けいたしました。 勉強になりました。
補足
自分の質問に自分で回答ができないので、 補足スペースで失礼します。 下記の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 : '次へ»', }); // 指定ページに移動 クリックイベントを実行 //$('#' + pageNavId + ' a[rel=' + id + ']').trigger('click'); $('#' + pageNavId + ' a[rel=' + id + ']').click(); }); </script> ----------------------------------------------------------- yyr446さん、my--さん、 いろいろとありがとうございました。 感謝しております。 以上です。