浮层 / Popup
优质
小牛编辑
135浏览
2023-12-01
Popup
是一个工具控件,用来完成浮出层的功能,经常作为其他控件的子控件组合使用,一般不直接使用。
Popup
的主要参数是 triggers
,用以指定触发 Popup
浮层。triggers
是一个 jQuery
可以接受的css selector
。
使用 target
属性来指定 Popup
的显示位置。
<input type="text" id="input-target">
require(['jquery', 'moye/Popup'], function ($, Popup) {
var input = document.getElementById('input-target');
new Popup({
target: input,
triggers: input,
content: 'this is popup content'
})
.render();
});
如果不指定 target
属性,那么 Popup
会挂靠到当前的触发元素上
<ul>
<li class="popup-target">
<span>aaaaaaaaaa</span>
</li>
<li class="popup-target">
<span>bbbbbbbbbb</span>
</li>
<li class="popup-target">
<span>cccccccccc</span>
</li>
<li class="popup-target">
<span>dddddddddd</span>
</li>
<li class="popup-target">
<span>eeeeeeeeee</span>
</li>
<li class="popup-target">
<span>ffffffffff</span>
</li>
<li class="popup-target">
<span>jjjjjjjjjj</span>
</li>
</ul>
require(['jquery', 'moye/Popup'], function ($, Popup) {
new Popup({
triggers: '.popup-target',
content: 'this is popup content',
dir: 'rc',
mode: 'over'
})
.render();
});
可以通过指定 dir
参数来调整 Popup
挂靠的方向,上例中 dir
设定为 rc
,表示 Popup
挂靠到目标元素的右侧中间位置。
<button id="add">添加一项</button>
<ul id="live-trigger-container">
<li class="popup-target">
<span>aaaaaaaaaa</span>
</li>
<li class="popup-target">
<span>bbbbbbbbbb</span>
</li>
<li class="popup-target">
<span>cccccccccc</span>
</li>
<li class="popup-target">
<span>dddddddddd</span>
</li>
<li class="popup-target">
<span>eeeeeeeeee</span>
</li>
<li class="popup-target">
<span>ffffffffff</span>
</li>
<li class="popup-target">
<span>jjjjjjjjjj</span>
</li>
</ul>
require(['jquery', 'moye/Popup'], function ($, Popup) {
new Popup({
triggers: '.popup-target',
liveTriggers: '#live-trigger-container',
content: 'this is popup content',
dir: 'rc',
mode: 'over'
})
.render();
$('#add').on('click', function () {
$('<li>').addClass('popup-target').html(Math.random()).appendTo('#live-trigger-container');
});
});
可以指定 liveTriggers
来限定一个容器, 在限容器内的所有 triggers
都可以触发 Popup
,即使它们是在初始化之后被创建的。