|
|
|
/**
|
|
|
|
* 首页优选品牌js
|
|
|
|
* @author: liuyue(yue.liu@yoho.cn)
|
|
|
|
* @date: 2015/12/08
|
|
|
|
*/
|
|
|
|
|
|
|
|
var $ = require('yoho-jquery'),
|
|
|
|
Handlebars = require('yoho-handlebars'),
|
|
|
|
lazyLoad = require('yoho-jquery-lazyload');
|
|
|
|
|
|
|
|
(function() {
|
|
|
|
var LogoBrand = function(element, options) {
|
|
|
|
this.$element = $(element);
|
|
|
|
this.options = $.extend({}, $.fn.logoBrand.defaults, options);
|
|
|
|
|
|
|
|
this.init();
|
|
|
|
};
|
|
|
|
|
|
|
|
LogoBrand.prototype = {
|
|
|
|
init: function() {
|
|
|
|
this.$element.addClass('logos-' + this.options.showNum);
|
|
|
|
this._sendRequest();
|
|
|
|
},
|
|
|
|
_createHelper: function() {
|
|
|
|
var showNum = this.options.showNum;
|
|
|
|
|
|
|
|
Handlebars.registerHelper('brandList', function(items, options) {
|
|
|
|
var out = '<ul>',
|
|
|
|
i = 0,
|
|
|
|
item = null,
|
|
|
|
fillNum = 0;
|
|
|
|
|
|
|
|
// 不是每页显示个数的倍数，填充数据
|
|
|
|
if (items.length % showNum !== 0) {
|
|
|
|
fillNum = showNum - (items.length % showNum);
|
|
|
|
for (i = 0; i < fillNum; i++) {
|
|
|
|
items.push({
|
|
|
|
href: 'javascript:;',
|
|
|
|
img: ''
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
for (i = 0; i < items.length; i++) {
|
|
|
|
item = options.fn(items[i]);
|
|
|
|
|
|
|
|
if (i % showNum === 5 || i === 5) {
|
|
|
|
|
|
|
|
// 插入切换按钮的位置
|
|
|
|
out = out + '<li class="logo-brand-switch" data-page="' + Math.floor(i / showNum) + '">' +
|
|
|
|
'<a class="prev iconfont" href="javascript:;"></a>' +
|
|
|
|
'<a class="next iconfont" href="javascript:;"></a></li>' +
|
|
|
|
'<li data-page="' + Math.floor(i / showNum) + '">' + item + '</li>';
|
|
|
|
} else if (i !== 0 && i % showNum === 0) {
|
|
|
|
|
|
|
|
// 插入more的位置，more占的是下一页第一个brand的位置，所以page是i/17
|
|
|
|
out = out + '<li class="brand-more" data-page="' + Math.floor(i / (showNum + 1)) + '">' +
|
|
|
|
'<a href="javascript:;" target="_blank">MORE ></a></li>' +
|
|
|
|
'<li data-page="' + Math.floor(i / showNum) + '">' + item + '</li>';
|
|
|
|
} else {
|
|
|
|
out = out + '<li data-page="' + Math.floor(i / showNum) + '">' + item + '</li>';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// 加上最后一个more, more占的是下一页第一个brand的位置，这里已经循环不到brand，所以加在末尾
|
|
|
|
return out + '<li class="brand-more" data-page="' + Math.floor(i / (showNum + 1)) + '">' +
|
|
|
|
'<a href="javascript:;" target="_blank">MORE ></a></li></ul>';
|
|
|
|
|
|
|
|
});
|
|
|
|
},
|
|
|
|
_sendRequest: function() {
|
|
|
|
var that = this;
|
|
|
|
|
|
|
|
$.ajax({
|
|
|
|
type: 'GET',
|
|
|
|
url: that.options.url,
|
|
|
|
dataType: 'json',
|
|
|
|
success: function(data) {
|
|
|
|
var brandTpl,
|
|
|
|
brandHtml;
|
|
|
|
|
|
|
|
if (!data || data.length === 0) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
that._createHelper();
|
|
|
|
brandHtml = '\{{#brandList logoBrand}}' +
|
|
|
|
'<a href="\{{href}}" target="_blank"><img class="lazy" data-original="\{{img}}" alt=""></a>' +
|
|
|
|
'\{{/brandList}}';
|
|
|
|
brandTpl = Handlebars.compile(brandHtml);
|
|
|
|
that.$element.html(brandTpl(data));
|
|
|
|
that.$element.find('.brand-more a').attr('href', data.moreBrand);
|
|
|
|
lazyLoad(that.$element.find('img.lazy'));
|
|
|
|
that._bindEvent();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
_brandShow: function(hidePage, showPage) {
|
|
|
|
var that = this;
|
|
|
|
|
|
|
|
lazyLoad($('li[data-page=' + showPage + ']').find('img.lazy').trigger('appear'));
|
|
|
|
that.$element.find('li[data-page=' + hidePage + ']').find('img').fadeOut('normal', function() {
|
|
|
|
that.$element.find('li').hide();
|
|
|
|
that.$element.find('li[data-page=' + showPage + ']').show().find('img').fadeIn();
|
|
|
|
});
|
|
|
|
},
|
|
|
|
_bindEvent: function() {
|
|
|
|
var that = this;
|
|
|
|
|
|
|
|
that.$element.on('click', '.next', function() {
|
|
|
|
var page = $(this).parent().data('page'),
|
|
|
|
nextPage = 0,
|
|
|
|
totalPage = Math.ceil(that.$element.find('li').size() / (that.options.showNum + 2)) - 1;
|
|
|
|
|
|
|
|
if (page === totalPage) {
|
|
|
|
nextPage = 0;
|
|
|
|
} else {
|
|
|
|
nextPage = page + 1;
|
|
|
|
}
|
|
|
|
that._brandShow(page, nextPage);
|
|
|
|
});
|
|
|
|
|
|
|
|
that.$element.on('click', '.prev', function() {
|
|
|
|
var page = $(this).parent().data('page'),
|
|
|
|
prevPage = 0,
|
|
|
|
totalPage = Math.ceil(that.$element.find('li').size() / (that.options.showNum + 2)) - 1;
|
|
|
|
|
|
|
|
if (page === 0) {
|
|
|
|
prevPage = totalPage;
|
|
|
|
} else {
|
|
|
|
prevPage = page - 1;
|
|
|
|
}
|
|
|
|
that._brandShow(page, prevPage);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
};
|
|
|
|
$.fn.logoBrand = function(option) {
|
|
|
|
return this.each(function() {
|
|
|
|
var $this = $(this),
|
|
|
|
data = $this.data('LogoBrand'),
|
|
|
|
options = typeof option === 'object' && option;
|
|
|
|
|
|
|
|
if (!data) {
|
|
|
|
$this.data('LogoBrand', (data = new LogoBrand(this, options)));
|
|
|
|
}
|
|
|
|
if (typeof option === 'string') {
|
|
|
|
data[option]();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
};
|
|
|
|
$.fn.logoBrand.Constructor = LogoBrand;
|
|
|
|
$.fn.logoBrand.defaults = {
|
|
|
|
showNum: 16,
|
|
|
|
url: '/boys/getBrand'
|
|
|
|
};
|
|
|
|
}()); |
...
|
...
|
|
