所需DOM结构
本组件作为一个弹出层的效果,通过预先设置一个隐藏的弹出层,并且设置该弹出层的触点,通过鼠标滑入和移出触点来展示和隐藏弹出层效果

<div class="first-trigger">我只是个触点而已,把鼠标滑到我身上</div>
<div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{
          'trigger':'.first-trigger',
          'align':{
                  'node':'.first-trigger',
                  'offset':[0,0],
                  'points':['cr','cc']
                  }
            }">
    <div style="background-color: yellow; height: 100px; width: 100px;">
       我是一个弹出层
    </div>
</div>

组件调用方法

<div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{
          'trigger':'.first-trigger',
          'align':{
                  'node':'.first-trigger',
                  'offset':[0,0],
                  'points':['cr','cc']
                  }
            }">
    <!--  code  -- >
   </div>

配置参数列表



配置参数 参数可选值 作用说明
trigger 自定义

 

触点元素,就是鼠标滑过哪个元素的时候弹出当前的popup,支持class和id选择器的写法
align node,points,offset 三个配置 node: ‘自定义’, // 参考元素。 popup与参考元素进行定位。和触点写法一样,
支持classid选择器的写法

points: [tr,tl], // [‘tl’, ‘tr’]表示popup的tl 与参考节点的 tr 对齐 ,

                 具体tl,tr表示的意义和值看下面截图, 

                 t(top),c(center), b(bottom),l(left),r(right)

offset: [0,0] // 有效值为 [n, m] , points对齐后,offset值,

                  一般可用于微调, n和m分别表示对齐两个点

                  在x,y坐标之间的偏移量

配置项align中的points的说明
触点与弹出层的对齐方式(align中的points配置) 元素及参考元素上各自的九个不同位置点(‘tl’, ‘tc’, ‘tr’, ‘cl’, ‘cc’, ‘cr’, ‘bl’, ‘bc’, ‘br’) 如下图所示:


注意: 触点目前只允许包含在#content内。不允许影响页头页尾:

例子

<div class="first-trigger">我只是个触点而已,把鼠标滑到我身上
<div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{
      'trigger':'.first-trigger',
      'align':{
              'node':'.first-trigger',
              'offset':[0,0],
              'points':['cc','cc']
              }
        }">
    <div style="background-color: blue; height: 100px; width: 100px;">
       我是一个弹出层
    </div>
</div>
</div>
.hidden{
    display:none;
}

.first-trigger,.first-trigger1{
    width:200px;
    height:200px;
    border:solid 1px red;
    margin:10px;
}
最后编辑: admin  文档更新时间: 2020-05-20 16:28   作者:admin