jquery初心者です。リストタグを使用したhtmlコンテンツにページャーを付けたいと考えております。
プラグインを色々と探しましたが希望に合うものが見つからず、一番近いものをどうにかカスタムして使えないかと思い投稿いたしました。
ページャー部分をなるべくコンパクトにしたいため、prev/nextボタンと現在表示しているページ番号のみを表示できるものが理想です(またはprev,nextボタンのみ)
例 < 2 >
現在のjqueryの記述は下記のようになっております (記述が長いためjs doitにjava,htmlともに記載)
http://jsdo.it/minatoakm3/Q0BU
はたしてこちらを使用してこのようなページャーを作ることは可能でしょうか?
なにぶん知識がないため元の記述をどのように削除・修正してよいかわからず途方に暮れております。
ご教授宜しくお願いいたします。
No.1ベストアンサー
- 回答日時:
こんにちは
私の環境が、js doitをキチンとみられない環境なので、ちゃんと確認したわけではないのですが・・・
ご利用のスクリプトはライブラリ化されているようで、オプション指定で見え方や機能を制御できるようになっているものと想像されます。
配布元サイトがわかりませんが、そのサイトにオプション等の説明がありませんでしたでしょうか?
わざわざカスタマイズしなくても、それを利用することでご質問の内容のかなりの部分は対応可能ではないかと想像しますが。
(スクリプトを解析して調べるのは面倒なので…あくまでも想像です。)
一方で、ご質問程度の内容であれば、機能限定にすればそれほど複雑にはなりませんので、以下にサンプル的なものを作成してみました。
※ #articles内のリストの各項目(LI)を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 = ">";
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>
fujillin様
お返事遅くなってすいません。サンプル付きで回答までしてくださりありがとうございました。
js doitのプラグイン配布先は海外サイトでして、使用方法が全て英語での記載となっており解読できずカスタムしようと思った次第です。
ですがこの数日他に代用できるものはないかと探した結果、なんとか使えそうな物が見つかりました。
fujillin様に教えていただいた記述は後々リンクを貼る際の参考と、jqueryの勉強に活用させてもらいます。
この度は丁寧にご回答いただき本当にありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- WordPress(ワードプレス) ワードプレスで、投稿一覧ページにタグを表示する方法 投稿につけたタグを、記事一覧ページにもカテゴリと 1 2023/05/10 21:41
- JavaScript スマホ上で、左右スワイプで次のページに移動させたいです 2 2022/11/11 17:04
- Excel(エクセル) 【Excel】指定のセル内容を基に別シートのセルを検索して選択する【VBA】 1 2022/06/16 16:16
- 知的財産権 ユーチューバーやブロガーが気を付けるべき著作権について 1 2022/08/28 21:18
- JavaScript プラグイン無しでContactform7にdatepickerを実装 3 2022/10/25 02:18
- HTML・CSS ホームページをちょっと加工する程度の無料または古くて安く購入できる作成ソフトを教えてください 5 2022/12/16 12:17
- Visual Basic(VBA) VBA Userformで一部別シートに転記がしたいのですが 2 2023/05/24 13:08
- CAD・DTP 「機能ブロック図」の描画用フリーソフトを教えてください 1 2022/09/23 16:12
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
文字と数字が混在する要素のsor...
-
ホームページビルダー15 メニュ...
-
プルダウンメニュー連動後の処...
-
jqueryアコーディオンのマウス...
-
JQueryで、liタグの背景に色を...
-
ツリーメニューについて
-
jqueryプルダウンメニュー個別着色
-
javascript テキストエリアを1...
-
MAX関数を使ってからLEFT JOIN...
-
htmlの記述で link rel=styles...
-
画像の上に画像リンクを貼る方法
-
スライダーを実装した場合、ペ...
-
背景色を一定時間ごとにランダ...
-
文字を固定したいのですが…
-
javascriptでURLにマウスオーバー
-
[急ぎ] videoタグで埋め込んだm...
-
離れた場所にマウスオーバーで...
-
c++std::string型をTCHARに変換...
-
タブで開いてさらにタブ内をア...
-
1行で左寄せと右寄せと中央揃え...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
javascriptでEnterキーをtabキ...
-
クリックした<a>タグのみにClas...
-
チェックボックスに入っている...
-
【javascript で動的に a タグ...
-
jquery ドロップダウンメニュー...
-
「jQuery」アコーディオンメニ...
-
jQueryで、リンクURLの一致を確...
-
jQueryのeqで最後からn番目以降...
-
ネストされたチェックボックス...
-
javascriptで、クリックしたら...
-
onmouseoverの表示切り替えが上...
-
文字と数字が混在する要素のsor...
-
jQueryでネスト構造の<li>がク...
-
タブメニューを上下に設置
-
<li></li>の数を制限
-
jQuery多層式アコーディオンメ...
-
どの<li><a> が押されたか判別...
-
CSSとJavaScriptを使ってドロッ...
-
複数の画像をランダム(シャッ...
おすすめ情報