使用jquery.more.js来实现点击底部之二次开发

时间：2017-06-05 08:57:03

这个JQ插件，一个页面只能实例化一个实例，多个实例就会出问题，

分析原因：不能自定义保存数据变量，导致多个实例时变量冲突，

故修改变量名使一个网页应用多个实例。

实例化：

1 2 3 4 5 6 7 8 9 10 11 12

<script type="text/javascript">     $(function() {         $('#vlist2').more2({             'id' : '2',             'amount': '4',             "url": '{:caturl(42,"ajaxlists")}',             "data":{"datetype":"Y-m-d H:i","cuttitle":20,"cutdescription":40},             "template": "#single_item2",             "trigger": "#get_more2"         });     }); </script>

插件改后

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135

/**  * 调用参数,方法如:$('#more').more({'url': 'data.php'});  * amount  :'10'           每次显示记录数  * url :'comments.php'     请求后台的地址  * data:{},                自定义参数  * template:'.single_item' html记录DIV的class属性  * trigger :'#get_more'    触发加载更多记录的class属性  * scroll  :'false'        是否支持滚动触发加载  * offset  :'100'          滚动触发加载时的偏移量  */ (function($) {     var target2 = null;     var template2 = null;     var lock2 = false;     var variables2 = {         'last': 0,         'page': 1 //当前分页     };     var settings2 = {         'id' : '1',         'amount': '8',         'url': '',         'template': '.single_item',         'data':{},         'trigger': '#get_more',         'scroll': 'false',         'offset': '100'     };     var methods2 = {         //新加一个方法，重置或追加 自定义参数         callvariables: function(myvariables){             // return mysettings;//settings2.url;             variables2 = myvariables;             // return settings2.data.where;         },         init: function(options) {             return this.each(function() {                 if (options) {                     $.extend(settings2, options);                 }                 template2 = $(this).children(settings2.template).wrap('<div/>').parent();                 template2.css('display', 'none');                 $(this).append('<div class="loading ft12" id="waitbox"><img src="/statics/extres/wap/images/loading.gif" width="19" height="19" />载入中..</div>');                 $(this).children(settings2.template).remove();                 target2 = $(this);                 if (settings2.scroll == 'false') {                     $(this).find(settings2.trigger).bind('click.more2', methods2.get_data);                     $(this).more2('get_data');                 } else {                     if ($(this).height() <= $(this).attr('scrollHeight')) {                         target2.more2('get_data', settings2.amount * 1);                     }                     $(this).bind('scroll.more2', methods2.check_scroll);                 }             });         },         check_scroll: function() {             if ((target2.scrollTop() + target2.height() + parseInt(settings2.offset)) >= target2.attr('scrollHeight') && lock2 == false) {                 target2.more2('get_data');             }         },         remove: function() {             target2.children(settings2.trigger).unbind('.more');             target2.unbind('.more');             target2.children(settings2.trigger).remove();         },         add_elements: function(data) {             var root = target2;             var counter = 0;             if (data.status == '1') {                 $(data.lists).each(function() {                     counter++;                     var t = template2;                     $.each(this, function(key, value) {                         if (t.find('.' + key)){                             t.find('.' + key).html(value);                         }                         if(key == 'url'){                             t.find('a').attr("href",value);                         }                         if(key == 'thumb'){                             t.find('img').attr("src",value);                         }                     });                     if (settings2.scroll == 'true') {                         root.children('.more_loader_spinner').before(t.html());                     } else {                         root.children(settings2.trigger).before(t.html());                     }                     root.children(settings2.template + ':last').attr('id', 'more_element_' + ((variables2.last++) + 1));                 });                 root.children(settings2.trigger).before('<div class="clear"></div>');                 variables2.page++             } else {                 methods2.remove();             }             target2.children('.more_loader_spinner').css('display', 'none');             if (counter < settings2.amount)                 methods2.remove();         },         get_data: function() {             var ile;             lock2 = true;             target2.children(".more_loader_spinner").css('display', 'block');             $(settings2.trigger).css('display', 'none');             if (typeof (arguments[0]) == 'number')                 ile = arguments[0];             else {                 ile = settings2.amount;             }             var postdata = settings2.data;                 postdata['last'] = variables2.last;                 postdata['amount'] = ile;                 postdata['mypage'] = variables2.page;             $.post(settings2.url, postdata, function(data) {                 $(settings2.trigger).css('display', 'block');                 methods2.add_elements(data);                 lock2 = false;                 if(data.status == '1'){                     $("#waitbox").remove();                 }else{                     $('#waitbox').html('暂无内容');                 }             }, 'json');         }     };     $.fn.more2 = function(method) {         if (methods2[method])             return methods2[ method ].apply(this, Array.prototype.slice.call(arguments, 1));         else if (typeof method == 'object' || !method)             return methods2.init.apply(this, arguments);         else             $.error('Method ' + method + ' does not exist!');     } })(jQuery)