[jQuery]リスト表示で『もっと見る』的な機能を再現
2014/10/02 ※追記
『IEで表示されない』とのご指摘がありましたので、
JSファイルを更新させて頂きました。
※IE 11では動作確認が取れました。
2015/02/24 ※追記
表示する項目数の設定値を
リストのアイテム数以上に設定した場合
リストが表示されなくなるバグの対応を行いました。
スマホサイトにおけるリスト表示でよくある
『もっと見る』的な機能をjQueryで再現してみました。
本来は非同期通信等を組み込んでやるべきなのですが
今回はすでにあるリストを編集するのみです。
ファイル一式はGithubから
ダウンロード可能になっています。
https://github.com/myhub4869/list-more
HTML側(抜粋)
<ul id="list_more"> <li> <img src="images/list_img01.jpg" /> <p>テストデータです。</p> </li> <li> <img src="images/list_img01.jpg" /> <p>テストデータです。</p> </li> <li> <img src="images/list_img01.jpg" /> <p>テストデータです。</p> </li> <li> <img src="images/list_img01.jpg" /> <p>テストデータです。</p> </li> <li> <img src="images/list_img01.jpg" /> <p>テストデータです。</p> </li> <li> <img src="images/list_img01.jpg" /> <p>テストデータです。</p> </li> <li> <img src="images/list_img01.jpg" /> <p>テストデータです。</p> </li> </ul>
JS側(読み込み部分)
# No.01 <script src="js/jquery-2.1.1.js"></script> <script src="js/jquery.listmore.js"></script>
JS側(実行部分)
$( document ).ready( function() { # No.02 $( "#list_more" ).listMore(); });
デモページ一覧
-
デフォルト
-
表示件数を変更
-
アニメーション付き
-
デバッグ処理(項目数対応)
解説
# No.01
jQueryと対象JSファイルを読み込みます。
# No.02
適用したいリストIDに対して
関数を実行します。
(現在の仕様ではタグ[ul]かタグ[ol]のみ適用可能です)
IEで表示されないのですが・・・イジメ?
IEで表示されないのですが・・・
JSファイルを修正いたしましたので
ご確認してみてください。
※IE 11で動作確認済み
ありがとうございます!!!
とても嬉しい限りでございます!!
表示するアイテム数を変更したいと思い、
jquery.listmore.jsの44行目の数字を10に変更すると(showNum:10,)、
アイテムが全て非表示になりました。
10以上の数字は全てダメっぽいです。
何か解決方法があれば教えて頂ければと思います。
情報、ありがとうございました。
表示する項目数をリストアイテム以上に設定しますと
リストが表示されないようになっていましたので修正しました。
現在、Github上に最新版をアップ致しましたので
アップデートをしていただくと確認が取れるかと思います。
いろいろとご迷惑をお掛けして申し訳ございません。
ご対応ありがとうございます!
無事に解決いたしました!!