lsm/layui
1
0
Fork 0
mirror of https://gitee.com/layui/layui.git synced 2025-04-05 17:38:02 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

优化 carousel 代码书写规范

Browse Source
This commit is contained in:
贤心 2023-08-17 15:52:00 +08:00
parent 8239401823
commit dda323caa0
1 changed files with 108 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

202
src/modules/carousel.js
View File

@ -12,50 +12,61 @@ layui.define(['jquery', 'lay'], function(exports){
var hint = layui.hint(); var hint = layui.hint();
var device = layui.device(); var device = layui.device();
//外部接口 // 外部接口
var carousel = { var carousel = {
config: {} //全局配置项 config: {}, // 全局配置项
//设置全局项 // 设置全局项
,set: function(options){ set: function(options){
var that = this; var that = this;
that.config = $.extend({}, that.config, options); that.config = $.extend({}, that.config, options);
return that; return that;
} },
//事件 // 事件
,on: function(events, callback){ on: function(events, callback){
return layui.onevent.call(this, MOD_NAME, events, callback); return layui.onevent.call(this, MOD_NAME, events, callback);
} }
} };
//字符常量 // 字符常量
,MOD_NAME = 'carousel', ELEM = '.layui-carousel', THIS = 'layui-this', SHOW = 'layui-show', HIDE = 'layui-hide', DISABLED = 'layui-disabled' var MOD_NAME = 'carousel';
var ELEM = '.layui-carousel';
var THIS = 'layui-this';
var SHOW = 'layui-show';
var HIDE = 'layui-hide';
var DISABLED = 'layui-disabled'
,ELEM_ITEM = '>*[carousel-item]>*', ELEM_LEFT = 'layui-carousel-left', ELEM_RIGHT = 'layui-carousel-right', ELEM_PREV = 'layui-carousel-prev', ELEM_NEXT = 'layui-carousel-next', ELEM_ARROW = 'layui-carousel-arrow', ELEM_IND = 'layui-carousel-ind' var ELEM_ITEM = '>*[carousel-item]>*';
var ELEM_LEFT = 'layui-carousel-left';
var ELEM_RIGHT = 'layui-carousel-right';
var ELEM_PREV = 'layui-carousel-prev';
var ELEM_NEXT = 'layui-carousel-next';
var ELEM_ARROW = 'layui-carousel-arrow';
var ELEM_IND = 'layui-carousel-ind';
//构造器 // 构造器
,Class = function(options){ var Class = function(options){
var that = this; var that = this;
that.config = $.extend({}, that.config, carousel.config, options); that.config = $.extend({}, that.config, carousel.config, options);
that.render(); that.render();
}; };
//默认配置 // 默认配置
Class.prototype.config = { Class.prototype.config = {
width: '600px' width: '600px',
,height: '280px' height: '280px',
,full: false //是否全屏 full: false, // 是否全屏
,arrow: 'hover' //切换箭头默认显示状态：hover/always/none arrow: 'hover', // 切换箭头默认显示状态：hover/always/none
,indicator: 'inside' //指示器位置：inside/outside/none indicator: 'inside', // 指示器位置：inside/outside/none
,autoplay: true //是否自动切换 autoplay: true, // 是否自动切换
,interval: 3000 //自动切换的时间间隔，不能低于800ms interval: 3000, // 自动切换的时间间隔，不能低于800ms
,anim: '' //动画类型：default/updown/fade anim: '', // 动画类型：default/updown/fade
,trigger: 'click' //指示器的触发方式：click/hover trigger: 'click', // 指示器的触发方式：click/hover
,index: 0 //初始开始的索引 index: 0 // 初始开始的索引
}; };
//轮播渲染 // 轮播渲染
Class.prototype.render = function(){ Class.prototype.render = function(){
var that = this; var that = this;
var options = that.config; var options = that.config;
@ -82,35 +93,36 @@ layui.define(['jquery', 'lay'], function(exports){
if(options.index >= that.elemItem.length) options.index = that.elemItem.length - 1; if(options.index >= that.elemItem.length) options.index = that.elemItem.length - 1;
if(options.interval < 800) options.interval = 800; if(options.interval < 800) options.interval = 800;
//是否全屏模式 // 是否全屏模式
if(options.full){ if(options.full){
options.elem.css({ options.elem.css({
position: 'fixed' position: 'fixed',
,width: '100%' width: '100%',
,height: '100%' height: '100%',
,zIndex: 9999 zIndex: 9999
}); });
} else { } else {
options.elem.css({ options.elem.css({
width: options.width width: options.width,
,height: options.height height: options.height
}); });
} }
options.elem.attr('lay-anim', options.anim); options.elem.attr('lay-anim', options.anim);
//初始焦点状态 // 初始焦点状态
that.elemItem.eq(options.index).addClass(THIS); that.elemItem.eq(options.index).addClass(THIS);
//指示器等动作 // 指示器等动作
if(that.elemItem.length <= 1) return; if(that.elemItem.length <= 1) return;
that.indicator(); that.indicator();
that.arrow(); that.arrow();
that.autoplay(); that.autoplay();
that.events(); that.events();
}; };
//重置轮播 // 重置轮播
Class.prototype.reload = function(options){ Class.prototype.reload = function(options){
var that = this; var that = this;
clearInterval(that.timer); clearInterval(that.timer);
@ -118,62 +130,64 @@ layui.define(['jquery', 'lay'], function(exports){
that.render(); that.render();
}; };
//获取上一个等待条目的索引 // 获取上一个等待条目的索引
Class.prototype.prevIndex = function(){ Class.prototype.prevIndex = function(){
var that = this var that = this;
,options = that.config; var options = that.config;
var prevIndex = options.index - 1; var prevIndex = options.index - 1;
if(prevIndex < 0){ if(prevIndex < 0){
prevIndex = that.elemItem.length - 1; prevIndex = that.elemItem.length - 1;
} }
return prevIndex; return prevIndex;
}; };
//获取下一个等待条目的索引 // 获取下一个等待条目的索引
Class.prototype.nextIndex = function(){ Class.prototype.nextIndex = function(){
var that = this var that = this;
,options = that.config; var options = that.config;
var nextIndex = options.index + 1; var nextIndex = options.index + 1;
if(nextIndex >= that.elemItem.length){ if(nextIndex >= that.elemItem.length){
nextIndex = 0; nextIndex = 0;
} }
return nextIndex; return nextIndex;
}; };
//索引递增 // 索引递增
Class.prototype.addIndex = function(num){ Class.prototype.addIndex = function(num){
var that = this var that = this;
,options = that.config; var options = that.config;
num = num || 1; num = num || 1;
options.index = options.index + num; options.index = options.index + num;
//index不能超过轮播总数量 // index 不能超过轮播总数量
if(options.index >= that.elemItem.length){ if(options.index >= that.elemItem.length){
options.index = 0; options.index = 0;
} }
}; };
//索引递减 // 索引递减
Class.prototype.subIndex = function(num){ Class.prototype.subIndex = function(num){
var that = this var that = this;
,options = that.config; var options = that.config;
num = num || 1; num = num || 1;
options.index = options.index - num; options.index = options.index - num;
//index不能超过轮播总数量 // index 不能超过轮播总数量
if(options.index < 0){ if(options.index < 0){
options.index = that.elemItem.length - 1; options.index = that.elemItem.length - 1;
} }
}; };
//自动轮播 // 自动轮播
Class.prototype.autoplay = function(){ Class.prototype.autoplay = function(){
var that = this var that = this;
,options = that.config; var options = that.config;
if(!options.autoplay) return; if(!options.autoplay) return;
clearInterval(that.timer); clearInterval(that.timer);
@ -183,30 +197,30 @@ layui.define(['jquery', 'lay'], function(exports){
}, options.interval); }, options.interval);
}; };
//箭头 // 箭头
Class.prototype.arrow = function(){ Class.prototype.arrow = function(){
var that = this var that = this;
,options = that.config; var options = that.config;
//模板 // 模板
var tplArrow = $([ var tplArrow = $([
'<button class="layui-icon '+ ELEM_ARROW +'" lay-type="sub">'+ (options.anim === 'updown' ? '&#xe619;' : '&#xe603;') +'</button>' '<button class="layui-icon '+ ELEM_ARROW +'" lay-type="sub">'+ (options.anim === 'updown' ? '&#xe619;' : '&#xe603;') +'</button>',
,'<button class="layui-icon '+ ELEM_ARROW +'" lay-type="add">'+ (options.anim === 'updown' ? '&#xe61a;' : '&#xe602;') +'</button>' '<button class="layui-icon '+ ELEM_ARROW +'" lay-type="add">'+ (options.anim === 'updown' ? '&#xe61a;' : '&#xe602;') +'</button>'
].join('')); ].join(''));
//预设基础属性 // 预设基础属性
options.elem.attr('lay-arrow', options.arrow); options.elem.attr('lay-arrow', options.arrow);
//避免重复插入 // 避免重复插入
if(options.elem.find('.'+ELEM_ARROW)[0]){ if(options.elem.find('.'+ELEM_ARROW)[0]){
options.elem.find('.'+ELEM_ARROW).remove(); options.elem.find('.'+ELEM_ARROW).remove();
} }
options.elem.append(tplArrow); options.elem.append(tplArrow);
//事件 // 事件
tplArrow.on('click', function(){ tplArrow.on('click', function(){
var othis = $(this) var othis = $(this);
,type = othis.attr('lay-type') var type = othis.attr('lay-type')
that.slide(type); that.slide(type);
}); });
}; };
@ -223,26 +237,26 @@ layui.define(['jquery', 'lay'], function(exports){
} }
} }
//指示器 // 指示器
Class.prototype.indicator = function(){ Class.prototype.indicator = function(){
var that = this var that = this;
,options = that.config; var options = that.config;
//模板 // 模板
var tplInd = that.elemInd = $(['<div class="'+ ELEM_IND +'"><ul>' var tplInd = that.elemInd = $(['<div class="'+ ELEM_IND +'"><ul>',
,function(){ function(){
var li = []; var li = [];
layui.each(that.elemItem, function(index){ layui.each(that.elemItem, function(index){
li.push('<li'+ (options.index === index ? ' class="layui-this"' : '') +'></li>'); li.push('<li'+ (options.index === index ? ' class="layui-this"' : '') +'></li>');
}); });
return li.join(''); return li.join('');
}() }(),
,'</ul></div>'].join('')); '</ul></div>'].join(''));
//预设基础属性 // 预设基础属性
options.elem.attr('lay-indicator', options.indicator); options.elem.attr('lay-indicator', options.indicator);
//避免重复插入 // 避免重复插入
if(options.elem.find('.'+ELEM_IND)[0]){ if(options.elem.find('.'+ELEM_IND)[0]){
options.elem.find('.'+ELEM_IND).remove(); options.elem.find('.'+ELEM_IND).remove();
} }
@ -258,17 +272,17 @@ layui.define(['jquery', 'lay'], function(exports){
}); });
}; };
//滑动切换 // 滑动切换
Class.prototype.slide = function(type, num){ Class.prototype.slide = function(type, num){
var that = this var that = this;
,elemItem = that.elemItem var elemItem = that.elemItem;
,options = that.config var options = that.config;
,thisIndex = options.index var thisIndex = options.index;
,filter = options.elem.attr('lay-filter'); var filter = options.elem.attr('lay-filter');
if(that.haveSlide) return; if(that.haveSlide) return;
//滑动方向 // 滑动方向
if(type === 'sub'){ if(type === 'sub'){
that.subIndex(num); that.subIndex(num);
elemItem.eq(options.index).addClass(ELEM_PREV); elemItem.eq(options.index).addClass(ELEM_PREV);
@ -276,7 +290,7 @@ layui.define(['jquery', 'lay'], function(exports){
elemItem.eq(thisIndex).addClass(ELEM_RIGHT); elemItem.eq(thisIndex).addClass(ELEM_RIGHT);
elemItem.eq(options.index).addClass(ELEM_RIGHT); elemItem.eq(options.index).addClass(ELEM_RIGHT);
}, 50); }, 50);
} else { //默认递增滑 } else { // 默认递增滑
that.addIndex(num); that.addIndex(num);
elemItem.eq(options.index).addClass(ELEM_NEXT); elemItem.eq(options.index).addClass(ELEM_NEXT);
setTimeout(function(){ setTimeout(function(){
@ -285,14 +299,14 @@ layui.define(['jquery', 'lay'], function(exports){
}, 50); }, 50);
} }
//移除过度类 // 移除过度类
setTimeout(function(){ setTimeout(function(){
elemItem.removeClass(THIS + ' ' + ELEM_PREV + ' ' + ELEM_NEXT + ' ' + ELEM_LEFT + ' ' + ELEM_RIGHT); elemItem.removeClass(THIS + ' ' + ELEM_PREV + ' ' + ELEM_NEXT + ' ' + ELEM_LEFT + ' ' + ELEM_RIGHT);
elemItem.eq(options.index).addClass(THIS); elemItem.eq(options.index).addClass(THIS);
that.haveSlide = false; //解锁 that.haveSlide = false; // 解锁
}, 300); }, 300);
//指示器焦点 // 指示器焦点
that.elemInd.find('li').eq(options.index).addClass(THIS) that.elemInd.find('li').eq(options.index).addClass(THIS)
.siblings().removeClass(THIS); .siblings().removeClass(THIS);
@ -300,23 +314,23 @@ layui.define(['jquery', 'lay'], function(exports){
// 回调返回的参数 // 回调返回的参数
var params = { var params = {
index: options.index index: options.index,
,prevIndex: thisIndex prevIndex: thisIndex,
,item: elemItem.eq(options.index) item: elemItem.eq(options.index)
}; };
typeof options.change === 'function' && options.change(params); typeof options.change === 'function' && options.change(params);
layui.event.call(this, MOD_NAME, 'change('+ filter +')', params); layui.event.call(this, MOD_NAME, 'change('+ filter +')', params);
}; };
//事件处理 // 事件处理
Class.prototype.events = function(){ Class.prototype.events = function(){
var that = this var that = this;
,options = that.config; var options = that.config;
if(options.elem.data('haveEvents')) return; if(options.elem.data('haveEvents')) return;
//移入移出容器 // 移入移出容器
options.elem.on('mouseenter', function(){ options.elem.on('mouseenter', function(){
if (that.config.autoplay === 'always') return; if (that.config.autoplay === 'always') return;
clearInterval(that.timer); clearInterval(that.timer);
@ -328,7 +342,7 @@ layui.define(['jquery', 'lay'], function(exports){
options.elem.data('haveEvents', true); options.elem.data('haveEvents', true);
}; };
//核心入口 // 核心入口
carousel.render = function(options){ carousel.render = function(options){
return new Class(options); return new Class(options);
}; };