github
/
layui
mirror of https://github.com/layui/layui
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(form-select): 新增 `lay-append-to-body` 属性

Browse Source
sight 6 months ago
parent 9daeebf245
commit c804b634ed
3 changed files with 67 additions and 28 deletions
Show Stats Download Patch File Download Diff File

2
src/css/layui.css
Unescape View File

@ -860,6 +860,8 @@ hr.layui-border-black{border-width: 0 0 1px;}
:root .layui-form-selected .layui-edge{margin-top: -9px\0/IE9;}
.layui-form-selectup dl{top: auto; bottom: 42px;}
.layui-select-none{margin: 5px 0; text-align: center; color: #999;}
.layui-select-panel {position: absolute;z-index: 99999999;}
.layui-select-panel dl {position: static;display: block;}
.layui-select-disabled .layui-disabled{border-color: #eee !important;}
.layui-select-disabled .layui-edge{border-top-color: #d2d2d2}

86
src/modules/form.js
Unescape View File

@ -389,10 +389,16 @@ layui.define(['lay', 'layer', 'util'], function(exports){
// 隐藏 select
var hide = function(e, clear){
if(!$(e.target).parent().hasClass(TITLE) || clear){
var elem = $('.' + CLASS);
var elem = $('.' + CLASS).not('.layui-select-panel');
elem.removeClass(CLASS+'ed ' + CLASS+'up');
if(elem.hasClass('layui-select-creatable')){
elem.children('dl').children('.' + CREATE_OPTION).remove();
var isCreateable = elem.hasClass('layui-select-creatable');
var isAppendToBody = elem.hasClass('layui-select-append-to-body');
if(isAppendToBody){
var panelEl = $('.layui-select-panel')
panelEl.hide()
isCreateable && panelEl.find('.' + CREATE_OPTION).remove();
}else{
isCreateable && elem.find('.' + CREATE_OPTION).remove();
}
thatInput && initValue && thatInput.val(initValue);
}
@ -400,9 +406,9 @@ layui.define(['lay', 'layer', 'util'], function(exports){
};
// 各种事件
var events = function(reElem, disabled, isSearch, isCreatable){
var events = function(reElem, titleElem, disabled, isSearch, isCreatable, isAppendToBody){
var select = $(this);
var title = reElem.find('.' + TITLE);
var title = titleElem;
var input = title.find('input');
var dl = reElem.find('dl');
var dds = dl.children('dd');
@ -422,12 +428,22 @@ layui.define(['lay', 'layer', 'util'], function(exports){
// 展开下拉
var showDown = function(){
if(isAppendToBody){
reElem.appendTo('body')
.show()
.css({width: title.width() + 'px'});
lay.position(title[0], reElem[0],{
allowBottomOut: true,
offset: [0, 5]
});
}
var top = reElem.offset().top + reElem.outerHeight() + 5 - $win.scrollTop();
var dlHeight = dl.outerHeight();
var dds = dl.children('dd');
index = select[0].selectedIndex; // 获取最新的 selectedIndex
reElem.addClass(CLASS+'ed');
title.parent().addClass(CLASS+'ed');
dds.removeClass(HIDE);
dts.removeClass(HIDE);
nearElem = null;
@ -455,10 +471,11 @@ layui.define(['lay', 'layer', 'util'], function(exports){
// 隐藏下拉
var hideDown = function(choose){
reElem.removeClass(CLASS+'ed ' + CLASS+'up');
title.parent().removeClass(CLASS+'ed ' + CLASS+'up');
input.blur();
nearElem = null;
isCreatable && dl.children('.' + CREATE_OPTION).remove();
isAppendToBody && reElem.hide();
if(choose) return;
@ -503,7 +520,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
// 点击标题区域
title.on('click', function(e){
reElem.hasClass(CLASS+'ed') ? (
title.parent().hasClass(CLASS+'ed') ? (
hideDown()
) : (
hide(e, true),
@ -748,34 +765,40 @@ layui.define(['lay', 'layer', 'util'], function(exports){
// 初始渲染 select 组件选项
selects.each(function(index, select){
var othis = $(this)
,hasRender = othis.next('.'+CLASS)
,disabled = this.disabled
,value = select.value
,selected = $(select.options[select.selectedIndex]) // 获取当前选中项
,optionsFirst = select.options[0];
var othis = $(this);
var hasRender = othis.next('.'+CLASS);
var disabled = this.disabled;
var value = select.value;
var selected = $(select.options[select.selectedIndex]); // 获取当前选中项
var optionsFirst = select.options[0];
if(typeof othis.attr('lay-ignore') === 'string') return othis.show();
var isSearch = typeof othis.attr('lay-search') === 'string'
,isCreatable = typeof othis.attr('lay-creatable') === 'string' && isSearch
,placeholder = optionsFirst ? (
optionsFirst.value ? TIPS : (optionsFirst.innerHTML || TIPS)
) : TIPS;
var isCreatable = typeof othis.attr('lay-creatable') === 'string' && isSearch
var isAppendToBody = typeof othis.attr('lay-append-to-body') === 'string'
var placeholder = optionsFirst
? (optionsFirst.value ? TIPS : (optionsFirst.innerHTML || TIPS))
: TIPS;
// 替代元素
var reElem = $(['<div class="'+ (isSearch ? '' : 'layui-unselect ') + CLASS
,(disabled ? ' layui-select-disabled' : '')
,(isCreatable ? ' layui-select-creatable' : '') + '">'
,'<div class="'+ TITLE +'">'
,(isCreatable ? ' layui-select-creatable' : '')
,(isAppendToBody ? ' layui-select-append-to-body' : '') + '"></div>'].join(''));
var triggerElem = $([
'<div class="'+ TITLE +'">'
,('<input type="text" placeholder="'+ util.escape($.trim(placeholder)) +'" '
+('value="'+ util.escape($.trim(value ? selected.html() : '')) +'"') // 默认值
+((!disabled && isSearch) ? '' : ' readonly') // 是否开启搜索
+' class="layui-input'
+(isSearch ? '' : ' layui-unselect')
+ (disabled ? (' ' + DISABLED) : '') +'">') // 禁用状态
,'<i class="layui-edge"></i></div>'
,'<dl class="layui-anim layui-anim-upbit'+ (othis.find('optgroup')[0] ? ' layui-select-group' : '') +'">'
,'<i class="layui-edge"></i>'
,'</div>'].join(''));
var contentElem = $(['<dl class="layui-anim layui-anim-upbit'+ (othis.find('optgroup')[0] ? ' layui-select-group' : '') +'">'
,function(options){
var arr = [];
layui.each(options, function(index, item){
@ -792,11 +815,22 @@ layui.define(['lay', 'layer', 'util'], function(exports){
arr.length === 0 && arr.push('<dd lay-value="" class="'+ DISABLED +'">没有选项</dd>');
return arr.join('');
}(othis.find('*')) +'</dl>'
,'</div>'].join(''));
].join(''));
hasRender[0] && hasRender.remove(); // 如果已经渲染，则Rerender
othis.after(reElem);
events.call(this, reElem, disabled, isSearch, isCreatable);
if(hasRender[0]){
hasRender.remove(); // 如果已经渲染，则Rerender
isAppendToBody && $('.layui-select-panel').remove();
}
if(isAppendToBody){
reElem.append(triggerElem);
othis.after(reElem);
var contentWrapElem = $('<div class="layui-form-select layui-select-panel"></div>').append(contentElem)
events.call(this, contentWrapElem, triggerElem, disabled, isSearch, isCreatable, isAppendToBody);
}else{
reElem.append(triggerElem).append(contentElem);
othis.after(reElem);
events.call(this, reElem, triggerElem, disabled, isSearch, isCreatable, isAppendToBody);
}
});
}

7
src/modules/lay.js
Unescape View File

@ -270,6 +270,7 @@
* @param {string | number} [opts.margin=5] - 边距
* @param {Event} [opts.e] - 事件对象，仅右键生效
* @param {boolean} [opts.SYSTEM_RELOAD] - 是否重载，用于出现滚动条时重新计算位置
* @param {[offsetX:number, offsetY:number]} [opts.offset] - 相对于触发元素的额外偏移量[x,y]
* @example
* ```js
* <button id="targetEl">dropdown</button>
@ -370,10 +371,12 @@
// 定位类型
var position = opts.position;
if(position) elem.style.position = position;
var offsetX = opts.offset ? opts.offset[0] : 0;
var offsetY = opts.offset ? opts.offset[1] : 0;
// 设置坐标
elem.style.left = left + (position === 'fixed' ? 0 : scrollArea(1)) + 'px';
elem.style.top = top + (position === 'fixed' ? 0 : scrollArea()) + 'px';
elem.style.left = left + (position === 'fixed' ? 0 : scrollArea(1)) + offsetX + 'px';
elem.style.top = top + (position === 'fixed' ? 0 : scrollArea()) + offsetY + 'px';
// 防止页面无滚动条时，又因为弹出面板而出现滚动条导致的坐标计算偏差
if(!lay.hasScrollbar()){

Write Preview
Loading…
Cancel
Save