jquery初心者です。リストタグを使用したhtmlコンテンツにページャーを付けたいと考えております。プラグインを色々と探しましたが希望に合うものが見つからず、一番近いものをどうにかカスタムして使えないかと思い投稿いたしました。ページャー部分をなるべくコンパクトにしたいため、prev/nextボタンと現在表示しているページ番号のみを表示できるものが理想です(またはprev,nextボタンのみ) 例現在のjqueryの記述は下記のようになっております (記述が長いためjs doitにjava,htmlともに記載) http://jsdo.it/minatoakm3/Q0BU はたしてこちらを使用してこのようなページャーを作ることは可能でしょうか？なにぶん知識がないため元の記述をどのように削除・修正してよいかわからず途方に暮れております。ご教授宜しくお願いいたします。

つらい・・・

JQueryリストタグへのページネーション　現在のページ番号を表示

解決済

質問者：minatoakm
質問日時：2016/06/17 21:55
回答数：1件

jquery初心者です。リストタグを使用したhtmlコンテンツにページャーを付けたいと考えております。
プラグインを色々と探しましたが希望に合うものが見つからず、一番近いものをどうにかカスタムして使えないかと思い投稿いたしました。

ページャー部分をなるべくコンパクトにしたいため、prev/nextボタンと現在表示しているページ番号のみを表示できるものが理想です(またはprev,nextボタンのみ)

例　<　2　>

現在のjqueryの記述は下記のようになっております (記述が長いためjs doitにjava,htmlともに記載)

http://jsdo.it/minatoakm3/Q0BU

はたしてこちらを使用してこのようなページャーを作ることは可能でしょうか？

なにぶん知識がないため元の記述をどのように削除・修正してよいかわからず途方に暮れております。
ご教授宜しくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

参考程度に

No.1ベストアンサー

回答者： fujillin
回答日時：2016/06/20 17:23

こんにちは

私の環境が、js doitをキチンとみられない環境なので、ちゃんと確認したわけではないのですが・・・

ご利用のスクリプトはライブラリ化されているようで、オプション指定で見え方や機能を制御できるようになっているものと想像されます。
配布元サイトがわかりませんが、そのサイトにオプション等の説明がありませんでしたでしょうか？
わざわざカスタマイズしなくても、それを利用することでご質問の内容のかなりの部分は対応可能ではないかと想像しますが。
（スクリプトを解析して調べるのは面倒なので…あくまでも想像です。）

一方で、ご質問程度の内容であれば、機能限定にすればそれほど複雑にはなりませんので、以下にサンプル的なものを作成してみました。
※ #articles内のリストの各項目（ＬＩ）を1ページとして考えています。
※ クラスpaginationの要素内にページネーションが作成されます。
　（複数あっても可）
※ ページの両端ではprev、nextの表示にdisabledクラスを付与しています。
　（サンプルではCSSでグレー表示でカーソルは通常になるようにしています）
※ スクリプトの最初のprevText、nextTextを変えれば表示テキストが変わります。
※ 1ページ分の表示でスクロールが発生することはないと想定していますが、必要な場合は該当項目のtopへスクロールする方がよいのかも知れません。（コメントアウトの行がその機能になっています）
※ おまけとして、ページ内から他のページへのリンクを可能にしてあります。
　（HTMLを見ればわかりますが、リンク先を#pageNo○○のように指定します）

以下、ご参考まで。
（インデントを全角空白にしてあるので半角に戻してください）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
#articles { margin:0; padding:0; list-style-type:none;}
#articles>li { width:600px; height:400px; background-color:#DFD; }

.pagination { color:black; font-weight:bold; }
.pagination .prev, .pagination .next { cursor:pointer; }
.pagination .disabled { color: #BBB; cursor:auto; }
</style>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1");</script>

<script type="text/javascript">
$(function(){
　var prevText = "<", nextText = "&#62";
　var disabl = "disabled";

　var articles = $("#articles>li").hide();
　var current, pageMax = articles.length -1;
　var page = $(".pagination").html("");

　var prev = $("<span>").appendTo(page);
　prev.html(prevText + "　").addClass("prev");
　var pageNo = $("<span>").appendTo(page).addClass("pageNo");
　var next = $("<span>").appendTo(page);
　next.html("　" + nextText).addClass("next");

　var setPage = function(n){
　　if( n<0 || pageMax<n ) return;
　　var elm = articles.hide().eq(n).show();
//　 $(window).scrollTop( elm.offset().top );
　　pageNo.html( 1 * n + 1 );
　　current = n;
　　0==n? prev.addClass(disabl): prev.removeClass(disabl);
　　pageMax==n? next.addClass(disabl): next.removeClass(disabl);
　}

　prev.on("click", function(){ setPage(current-1);});
　next.on("click", function(){ setPage(current+1);});
　setPage(0);

//以下おまけ（削除可能）
　$("#articles").on("click", "a", function(e){
　　if(n = /^#pageNo(\d+)$/.exec($(e.target).attr("href"))){
　　　setPage(n[1] - 1);
　　　return false;
　　}
　});
});
</script>
</head>
<body>
<div class="pagination"></div>

<ul id="articles">
<li>*** 1 ***
<p><a href="#pageNo6">6ページへ</a>
</li>
<li>*** 2 ***</li>
<li>*** 3 ***</li>
<li>*** 4 ***</li>
<li>*** 5 ***</li>
<li>*** 6 ***
<p><a href="#pageNo1">1ページへ</a>
</li>
</li>
</ul>

<div class="pagination"></div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

fujillin様

お返事遅くなってすいません。サンプル付きで回答までしてくださりありがとうございました。
js doitのプラグイン配布先は海外サイトでして、使用方法が全て英語での記載となっており解読できずカスタムしようと思った次第です。

ですがこの数日他に代用できるものはないかと探した結果、なんとか使えそうな物が見つかりました。
fujillin様に教えていただいた記述は後々リンクを貼る際の参考と、jqueryの勉強に活用させてもらいます。

この度は丁寧にご回答いただき本当にありがとうございました。

通報する

お礼日時：2016/06/23 22:30

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！