当前位置: 主页 > 学习教程 > 网页设计教程 >
周浦电脑培训
南汇电脑培训-淘宝sdk弹出层文档说明

所需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与参考元素进行定位。和触点写法一样,
                      支持class和id选择器的写法
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的说明

分享到: