95 lines
2.8 KiB
JavaScript
95 lines
2.8 KiB
JavaScript
/**
|
||
|
||
@Name：layui.dropdown 下拉按钮
|
||
@Author：First
|
||
@License：MIT
|
||
|
||
*/
|
||
layui.define('jquery', function (exports) {
|
||
var $ = layui.$,
|
||
device = layui.device(),
|
||
MOD_NAME = 'dropdown',
|
||
CLASS_NAME = '.layui-dropdown-menu',
|
||
//事件类型，默认为'mouseover'（移动端则为'click'）
|
||
event = (device.android || device.ios) ? 'click' : 'mouseover',
|
||
//当前Dropdown对象
|
||
that;
|
||
|
||
Dropdown = function () {
|
||
//当前实例
|
||
this.inst = null;
|
||
this.currReElem = null;
|
||
};
|
||
|
||
//隐藏
|
||
var __hideDropdown = function (e) {
|
||
if (isClosable(e.target)
|
||
&& isClosable(e.target.parentElement)
|
||
&& isClosable(e.target.parentElement.parentElement)) {
|
||
that.hide();
|
||
}
|
||
};
|
||
|
||
//判断dropdown是否可以隐藏
|
||
var isClosable = function (elem) {
|
||
return elem
|
||
&& elem.className.indexOf('layui-btn-dropdown') == -1
|
||
&& elem.className.indexOf('layui-dropdown-menu') == -1;
|
||
};
|
||
|
||
//修正显示位置
|
||
Dropdown.prototype.hide = function () {
|
||
if (that && that.inst && that.inst.is(':visible')) {
|
||
that.inst.css('display', 'none');
|
||
$('body').off(event, __hideDropdown);
|
||
}
|
||
};
|
||
|
||
//渲染
|
||
Dropdown.prototype.render = function () {
|
||
that = this;
|
||
$('.layui-btn-dropdown').each(function (index, elem) {
|
||
var reElem = $(elem);
|
||
reElem.data('id', 'dropdown-' + index);
|
||
event = (device.android || device.ios) ? 'click' : 'mouseover';
|
||
|
||
reElem[event](function () {
|
||
if (!that.inst//第一次显示
|
||
|| that.currReElem.data('id') != reElem.data('id')//切换到其他dropdown
|
||
|| (that.currReElem.data('id') == reElem.data('id') && !that.inst.is(':visible'))) {//重新移动到当前dropdown
|
||
//隐藏
|
||
that.hide();
|
||
//这里暂时采用fixed定位
|
||
var dropElem = reElem.find(CLASS_NAME),
|
||
left = reElem.offset().left - $(window).scrollLeft(),
|
||
top = reElem.offset().top + reElem.height() - $(window).scrollTop() - 2,
|
||
containerWidth = reElem.width(),
|
||
dropWidth = dropElem.width(),
|
||
offsetRight = left + containerWidth,
|
||
overflow = (left + dropWidth) > $(window).width(),
|
||
css = {'display': 'block', 'position': 'fixed', 'top': top + 'px', 'left': left + 'px'};
|
||
|
||
overflow && $.extend(true, css, {'left': (offsetRight - dropWidth) + 'px'});
|
||
//显示
|
||
dropElem.css(css).on('click', 'li', function () {
|
||
dropElem.css('display', 'none');
|
||
});
|
||
|
||
that.inst = dropElem;
|
||
that.currReElem = reElem;
|
||
$('body').on(event, __hideDropdown);
|
||
}
|
||
});
|
||
});
|
||
};
|
||
|
||
//自动完成渲染
|
||
var dropdown = new Dropdown();
|
||
dropdown.render();
|
||
|
||
$(window).scroll(function () {
|
||
dropdown.hide();
|
||
});
|
||
|
||
exports(MOD_NAME, dropdown);
|
||
}) |