淘宝widget—popup组件的用法【sdk2.0】

新版的SDK中Popup组件的写法基本上还是与原来保持一致，不过还需要两个方面：

第1方面：DOM结构中的变换【在data-widget-config中需要添加一个'triggerType':'mouse'配置】

 1 <div class="tb-module tshop-um tshop-um-testting">
 2     <div class="wrap">
 3         <ul class="triggers">
 4             <li class="one">One</li>
 5             <li class="one">Two</li>
 6             <li class="one">Three</li>
 7             <li class="one">Four</li>
 8             <li class="one">Five</li>
 9         </ul>
10         
11         <div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{'trigger':'.one','triggerType':'mouse','align':{'node':'.one','offset':[0,0],'points':['tr','tl']}}">
12             <div class="my-pop">
13                 Hello,我是第1名
14             </div>
15         </div>
16     </div>
17 </div>

 

第二方面：对于CSS方面的变换【系统不再默认添加hidden样式类，所以这个类我们要自己编写】

1 .tshop-um-testting .hidden {
2     visibility:hidden;  //此处不能用display:none
3     position:absolute; //这一句必须加上去，否则弹出层会占位
4 }

转载于:https://www.cnblogs.com/kuli/archive/2012/08/12/2634222.html