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

原创于 2024-04-30 11:14:20 发布 · 252 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery #前端

大前端专栏收录该内容

30 篇文章

订阅专栏

本文讲述了在使用JQ插件时遇到的一个问题，即一个页面上多个实例可能导致变量冲突。作者分析了原因并提供了修改插件代码以实现一个网页应用多个实例的方法，重点在于解决自定义数据变量的管理和冲突问题。

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

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

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

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

实例化：

<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>

插件改后

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)