限时优惠活动
亲爱的苦力吧用户，我们为了回馈新老用户一直以来的鼎力支持，即日起（2025-02-06至2025-03-06）凡是购买苦力吧VIP/充值K币的新老用户，都直接可获得买一送一的优惠馈赠。例如：购买一个月的VIP会员可直接获得两个月的VIP会员；充值100K币可直接获得200K币，以此类推！有任何疑问可联系在线客服，感谢各位用户对苦力吧素材的信任与厚爱，我们将一如既往的给大家上新更多优质的素材源码，祝大家开工大吉、工作顺利、心想事成。
  1. 首页
  2. 网页特效
  3. 展开&收缩

jquery支持自定义数据条数显示更多特效代码

所属分类： 网页特效-展开&收缩    2023-11-22 01:55:17

 9.6K  1  查看评论 (0)
jquery支持自定义数据条数显示更多特效代码 ie兼容6
 查看演示  登录后下载 温馨提示
登录会员即可享受免费下载  我要建站

jquery支持自定义数据条数显示更多特效代码（共11个文件）

    • showMoreItems.min.js
    • showMoreItems-theme.min.css
    • showMoreItems.js
    • showMoreItems-theme.css
    • index.html

使用方法

  • code
  • source
  1. ;(function(factory) {

  2.     if (typeof define === 'function' && define.amd) {

  3.         define(['jquery'], factory);

  4.     } else if (typeof exports !== 'undefined') {

  5.         module.exports = factory(require('jquery'));

  6.     } else {

  7.         factory(jQuery);

  8.     }

  9. 

  10. }(function($) {

  11.     var ShowMoreItems = window.ShowMoreItems || {};

  12.     ShowMoreItems = (function() {

  13.         var instanceUid = 0;

  14.         function ShowMoreItems(element, settings) {

  15.             $(element).addClass('showMoreItemsList')

  16.             var _ = this, dataSettings;

  17.             var defaults = {

  18.                 nowNum:1,

  19.                 //getView:0,

  20.                 startNum:1,

  21.                 afterNum:1,

  22.                 original:false,

  23.                 moreText:'Show more',

  24.                 noMoreText:'No more',

  25.                 backMoreText:'Reset',

  26.                 responsive:''

  27.             }

  28.             dataSettings = $(element).data('showMoreItems') || {};

  29.             _.defaults = $.extend({}, defaults, settings, dataSettings);

  30.             _.options = $.extend({}, defaults, settings, dataSettings);

  31.             _.registerBreakpoints(element);

  32.             _.init(element);

  33.         }

  34.         return ShowMoreItems;

  35.     }());

  36.     ShowMoreItems.prototype.init = function(element) {

  37.         var _ = this;

  38.         _.sum = $(element).children().length

  39.         _.runData(element, _);

  40.         return false

  41.     };

  42.     ShowMoreItems.prototype.runData = function(element, settings) {

  43.         var _ = this;

  44.         _.goOut=false;

  45.         $(element).children().hide()

  46.         $(element).next('.button-box').remove()

  47.         _.nowNum =settings.options.nowNum -1

  48.         _.goNum = _.nowNum + settings.options.startNum

  49.         if(_.sum<=settings.options.startNum){

  50.             _.goNum=_.sum;

  51.             _.goOut=true;

  52.         }

  53.         for (var i = _.nowNum; i < _.goNum; i++) {

  54.             $(element).children().eq(i).show()

  55.             _.nowNum+=1;

  56.         }

  57.         if(!_.goOut){

  58.             $(element).after('<div class="button-box"><button class="addListData">'+settings.options.moreText+'</button></div>');

  59.         }

  60.         $(element).next().on('click','.addListData', function(event) {

  61.             _.goNum = _.nowNum + settings.options.afterNum

  62.             if(_.sum<=_.goNum){

  63.                 _.goNum=_.sum

  64.                 _.goOut=true

  65.             }

  66.             for (var i = _.nowNum; i < _.goNum; i++) {

  67.                 $(element).children().eq(i).show()

  68.                 _.nowNum+=1

  69.             }

  70.             if(_.goOut && settings.options.original){

  71.                 $(this).text(settings.options.backMoreText).addClass('original')

  72.             }

  73.             else if(_.goOut){

  74.                 $(this).text(settings.options.noMoreText)

  75.             }

  76.         });

  77.         $(element).next().on('click','.original', function(event) {

  78.             $(this).removeClass('original');

  79.             _.reflesh($(this));

  80.             return false

  81.         });

  82.     };

  83.     ShowMoreItems.prototype.reflesh = function(element) {

  84.         var _ = this;

  85.         thisE = element.parent().prev();

  86.         element.remove();

  87.         _.registerBreakpoints(element);

  88.         _.init(thisE);

  89.     }

  90. 

  91.     ShowMoreItems.prototype.registerBreakpoints = function(element) {

  92.         var _ = this;

  93.         if(_.options.responsive){

  94.             ResponsiveArr = _.options.responsive

  95.             //排序

  96.             ResponsiveArr = ResponsiveArr.sort(function (a, b) {

  97.              return a.breakpoint > b.breakpoint ? -1 : 1;

  98.             });

  99.             _.options.responsive = ResponsiveArr

  100.             _.Oindex = -1

  101.             _.Owidth = $(window).width()

  102.             $.each(_.options.responsive, function(index, value) {

  103.                 if($(window).width()<=value.breakpoint){

  104.                     _.Oindex= index

  105.                     value = value.settings

  106.                     _.options = $.extend({}, _.options, value);

  107.                 }

  108.             });

  109.             $(window).resize(function() {

  110.                 run=false

  111.                 if($(window).width() <_.Owidth){

  112.                     _.Owidth = $(window).width()

  113.                     $.each(_.options.responsive, function(index, value) {

  114.                         if(_.Owidth<=value.breakpoint && _.Oindex < index){

  115.                             _.Oindex= index

  116.                             value = value.settings

  117.                             _.options = $.extend({}, _.options, _.defaults);

  118.                             _.options = $.extend({}, _.options, value);

  119.                             run=true

  120.                             return _.Oindex

  121.                         }

  122.                     });

  123.                 }

  124.                 if($(window).width() >_.Owidth){

  125.                     _.Owidth = $(window).width()

  126.                     $.each(ResponsiveArr, function(index, value) {

  127.                         if(_.Owidth>value.breakpoint && _.Oindex > index-1){

  128.                             _.Oindex= index-1

  129.                             if(_.Oindex!=-1){

  130.                                 value = ResponsiveArr[index-1].settings

  131.                                 _.options = $.extend({}, _.options, _.defaults);

  132.                                 _.options = $.extend({}, _.options, value);

  133.                                 run=true

  134.                             }else{

  135.                                 _.options = $.extend({}, _.options, _.defaults);

  136.                                 run=true

  137.                             }

  138.                             return _.Oindex

  139.                         }

  140.                     });

  141.                 }

  142.                 if(run==true){

  143.                      _.runData(element, _);

  144.                 }

  145.                 return false

  146.             });

  147.         }

  148.     };

  149.     $.fn.showMoreItems = function() {

  150.         var _ = this,

  151.             opt = arguments[0],

  152.             args = Array.prototype.slice.call(arguments, 1),

  153.             l = _.length,

  154.             i,

  155.             ret;

  156.         for (i = 0; i < l; i++) {

  157.             if (typeof opt == 'object' || typeof opt == 'undefined')

  158.                 _[i].showMoreItems = new ShowMoreItems(_[i], opt);

  159.             else

  160.                 ret = _[i].showMoreItems[opt].apply(_[i].showMoreItems, args);

  161.             if (typeof ret != 'undefined') return ret;

  162.         }

  163.         return _;

  164.     };

  165.     $( function () {

  166.         if($('[data-showMoreItems="true"]').length){

  167.             selecter =$('[data-showMoreItems="true"]')

  168.             if(selecter.attr('data-showMoreItems')=='true'){

  169.                 var settings = {

  170.                     nowNum:1,

  171.                     getView:0,

  172.                     startNum:1,

  173.                     afterNum:1,

  174.                     original:false,

  175.                     moreText:'Show more',

  176.                     noMoreText:'No more',

  177.                     backMoreText:'Reset',

  178.                     responsive:''

  179.                 }

  180.                 if(selecter.attr('data-nowNum')){

  181.                     settings.nowNum=parseInt(selecter.attr('data-nowNum'))

  182.                 }

  183.                 if(selecter.attr('data-startNum')){

  184.                     settings.startNum=parseInt(selecter.attr('data-startNum'))

  185.                 }

  186.                 if(selecter.attr('data-afterNum')){

  187.                     settings.afterNum=parseInt(selecter.attr('data-afterNum'))

  188.                 }

  189.                 if(selecter.attr('data-original')){

  190.                     settings.original=Boolean(selecter.attr('data-original'))

  191.                 }

  192.                 if(selecter.attr('data-moreText')){

  193.                     settings.moreText=selecter.attr('data-moreText')

  194.                 }

  195.                 if(selecter.attr('data-noMoreText')){

  196.                     settings.noMoreText=selecter.attr('data-noMoreText')

  197.                 }

  198.                 if(selecter.attr('data-backMoreText')){

  199.                     settings.backMoreText=selecter.attr('data-backMoreText')

  200.                 }

  201.                 if(selecter.attr('data-responsive')){

  202.                     settings.responsive=eval(selecter.attr('data-responsive'))

  203.                 }

  204.             }

  205.             $('[data-showMoreItems="true"]').showMoreItems(settings);

  206.         }

  207.     });

  208. }));

;(function(factory) {
    if (typeof define === 'function' && define.amd) {
        define(['jquery'], factory);
    } else if (typeof exports !== 'undefined') {
        module.exports = factory(require('jquery'));
    } else {
        factory(jQuery);
    }

}(function($) {
    var ShowMoreItems = window.ShowMoreItems || {};
    ShowMoreItems = (function() {
        var instanceUid = 0;
        function ShowMoreItems(element, settings) {
            $(element).addClass('showMoreItemsList')
            var _ = this, dataSettings;
            var defaults = {
                nowNum:1,
                //getView:0,
                startNum:1,
                afterNum:1,
                original:false,
                moreText:'Show more',
                noMoreText:'No more',
                backMoreText:'Reset',
                responsive:''
            }
            dataSettings = $(element).data('showMoreItems') || {};
            _.defaults = $.extend({}, defaults, settings, dataSettings);
            _.options = $.extend({}, defaults, settings, dataSettings);
            _.registerBreakpoints(element);
            _.init(element);
        }
        return ShowMoreItems;
    }());
    ShowMoreItems.prototype.init = function(element) {
        var _ = this;
        _.sum = $(element).children().length
        _.runData(element, _);
        return false
    };
    ShowMoreItems.prototype.runData = function(element, settings) {
        var _ = this;
        _.goOut=false;
        $(element).children().hide()
        $(element).next('.button-box').remove()
        _.nowNum =settings.options.nowNum -1
        _.goNum = _.nowNum + settings.options.startNum
        if(_.sum<=settings.options.startNum){
            _.goNum=_.sum;
            _.goOut=true;
        }
        for (var i = _.nowNum; i < _.goNum; i++) {
            $(element).children().eq(i).show()
            _.nowNum+=1;
        }
        if(!_.goOut){
            $(element).after('<div class="button-box"><button class="addListData">'+settings.options.moreText+'</button></div>');
        }
        $(element).next().on('click','.addListData', function(event) {
            _.goNum = _.nowNum + settings.options.afterNum
            if(_.sum<=_.goNum){
                _.goNum=_.sum
                _.goOut=true
            }
            for (var i = _.nowNum; i < _.goNum; i++) {
                $(element).children().eq(i).show()
                _.nowNum+=1
            }
            if(_.goOut && settings.options.original){
                $(this).text(settings.options.backMoreText).addClass('original')
            }
            else if(_.goOut){
                $(this).text(settings.options.noMoreText)
            }
        });
        $(element).next().on('click','.original', function(event) {
            $(this).removeClass('original');
            _.reflesh($(this));
            return false
        });
    };
    ShowMoreItems.prototype.reflesh = function(element) {
        var _ = this;
        thisE = element.parent().prev();
        element.remove();
        _.registerBreakpoints(element);
        _.init(thisE);
    }

    ShowMoreItems.prototype.registerBreakpoints = function(element) {
        var _ = this;
        if(_.options.responsive){
            ResponsiveArr = _.options.responsive
            //排序
            ResponsiveArr = ResponsiveArr.sort(function (a, b) {
             return a.breakpoint > b.breakpoint ? -1 : 1;
            });
            _.options.responsive = ResponsiveArr
            _.Oindex = -1
            _.Owidth = $(window).width()
            $.each(_.options.responsive, function(index, value) {
                if($(window).width()<=value.breakpoint){
                    _.Oindex= index
                    value = value.settings
                    _.options = $.extend({}, _.options, value);
                }
            });
            $(window).resize(function() {
                run=false
                if($(window).width() <_.Owidth){
                    _.Owidth = $(window).width()
                    $.each(_.options.responsive, function(index, value) {
                        if(_.Owidth<=value.breakpoint && _.Oindex < index){
                            _.Oindex= index
                            value = value.settings
                            _.options = $.extend({}, _.options, _.defaults);
                            _.options = $.extend({}, _.options, value);
                            run=true
                            return _.Oindex
                        }
                    });
                }
                if($(window).width() >_.Owidth){
                    _.Owidth = $(window).width()
                    $.each(ResponsiveArr, function(index, value) {
                        if(_.Owidth>value.breakpoint && _.Oindex > index-1){
                            _.Oindex= index-1
                            if(_.Oindex!=-1){
                                value = ResponsiveArr[index-1].settings
                                _.options = $.extend({}, _.options, _.defaults);
                                _.options = $.extend({}, _.options, value);
                                run=true
                            }else{
                                _.options = $.extend({}, _.options, _.defaults);
                                run=true
                            }
                            return _.Oindex
                        }
                    });
                }
                if(run==true){
                     _.runData(element, _);
                }
                return false
            });
        }
    };
    $.fn.showMoreItems = function() {
        var _ = this,
            opt = arguments[0],
            args = Array.prototype.slice.call(arguments, 1),
            l = _.length,
            i,
            ret;
        for (i = 0; i < l; i++) {
            if (typeof opt == 'object' || typeof opt == 'undefined')
                _[i].showMoreItems = new ShowMoreItems(_[i], opt);
            else
                ret = _[i].showMoreItems[opt].apply(_[i].showMoreItems, args);
            if (typeof ret != 'undefined') return ret;
        }
        return _;
    };
    $( function () {
        if($('[data-showMoreItems="true"]').length){
            selecter =$('[data-showMoreItems="true"]')
            if(selecter.attr('data-showMoreItems')=='true'){
                var settings = {
                    nowNum:1,
                    getView:0,
                    startNum:1,
                    afterNum:1,
                    original:false,
                    moreText:'Show more',
                    noMoreText:'No more',
                    backMoreText:'Reset',
                    responsive:''
                }
                if(selecter.attr('data-nowNum')){
                    settings.nowNum=parseInt(selecter.attr('data-nowNum'))
                }
                if(selecter.attr('data-startNum')){
                    settings.startNum=parseInt(selecter.attr('data-startNum'))
                }
                if(selecter.attr('data-afterNum')){
                    settings.afterNum=parseInt(selecter.attr('data-afterNum'))
                }
                if(selecter.attr('data-original')){
                    settings.original=Boolean(selecter.attr('data-original'))
                }
                if(selecter.attr('data-moreText')){
                    settings.moreText=selecter.attr('data-moreText')
                }
                if(selecter.attr('data-noMoreText')){
                    settings.noMoreText=selecter.attr('data-noMoreText')
                }
                if(selecter.attr('data-backMoreText')){
                    settings.backMoreText=selecter.attr('data-backMoreText')
                }
                if(selecter.attr('data-responsive')){
                    settings.responsive=eval(selecter.attr('data-responsive'))
                }
            }
            $('[data-showMoreItems="true"]').showMoreItems(settings);
        }
    });
}));

站长提示：
1. 苦力吧素材官方QQ群：950875342
2. 平台上所有素材资源，需注册登录会员方能正常下载。
3. 会员用户积极反馈网站、素材资源BUG或错误问题，每次奖励2K币。
4. PHP源码类素材，如需协助安装调试，或你有二次开发需求，可联系苦力吧客服。
5. 付费素材资源，需充值后方能下载，如有任何疑问可直接联系苦力吧客服
标签： 显示隐藏显示更多展开收缩加载更多
相关资源 / 展开&收缩
查看更多

jquery可扩展折叠的文件目录导航菜单插件

 JSON数据可视化为可扩展和可折叠的树结构，适用于文件夹目录、家族谱、组织结构图等。
  展开&收缩
 9344  0

jquery垂直展开收缩的手风琴特效代码

 一款垂直手风琴特效组件，支持键盘上下箭头控制展开收缩操作，弹性动画呈现展开收缩。
  展开&收缩
 9356  0

原生js实现的侧边栏展开收缩高度伸缩特效

 一款javascript侧边栏高度伸缩特效，鼠标点击侧边栏可自动置顶拉伸高度，再次点击可恢复原位。
  展开&收缩
 8153  0

jquery支持屏蔽禁用的手风琴展开收缩插件

 一款常用的问答显示隐藏插件，支持对指定div进行禁止点击事件，禁止触发展开收缩特效。
  展开&收缩
 1357  0

评论数(0) 回复有机会获得K币 用户协议

^_^ 还没有人评论，快来抢个沙发！
😀
  • 😀
  • 😊
  • 😂
  • 😍
  • 😑
  • 😷
  • 😵
  • 😛
  • 😣
  • 😱
  • 😋
  • 😎
  • 😵
  • 😕
  • 😶
  • 😚
  • 😜
  • 😭
发表评论