关于淘宝兼容组件的编写思路
由于淘宝sdk已经开放支持png透明的组件为支持在ie6下显示,而ie6在不久的将来被淘汰势在必行,为了将来修改模版代码容易操作,编写思想为在每个模块的php页面上设置变量。
原wiki文:
兼容组件的第一个作用:ie 6的position:fixed;
<div class="J_TWidget" data-widget-type="Compatible" data-widget-config="{'fixed':true}"
style="position:fixed;top:50px;left:40px;">
这是解决ie6的悬浮组件
</div>
第二种兼容的第二个作用:png在ie6下的透明
<div class="J_TWidget"
style="height:40px;width:40px;background-image: url(http://img01.taobaocdn.com/tps/i1/T1g604XjdrXXXXXXXX-24-24.png);"
data-widget-type="Compatible" data-widget-config="{'png':true,'png_bg':true}">
背景透明
</div>
<!-- img标签透明 -->
<img class="J_TWidget" src="http://img01.taobaocdn.com/tps/i1/T1g604XjdrXXXXXXXX-24-24.png"
data-widget-type="Compatible" data-widget-config="{'png':true,'png_tag':true}"/>
配置参数列表
配置参数 | 参数可选值 | 作用说明 |
fixed | 可选值true / false,默认false | 需要用兼容组件解决的问题,是否是ie 6下面的position:fixed |
png | 可选值true / false,默认false | 需要用兼容组件解决的问题,是否是在ie 6下面的png透明 |
png_bg | 可选值true / false,默认false | 需要透明的png图片,是否是背景图 |
png_tag | 可选值true / false,默认false | 需要透明的png图片,是否是img标签元素 |
修改:
<?php
$tbjtw = 'J_TWidget';
$tbjtw-dwt-c = ' data-widget-type="Compatible"';
$tbjtw-dwc-tag = "data-widget-config="{'png':true,'png_tag':true}"";
$tbjtw-dwc-bg = ''data-widget-config="{'png':true,'png_bg':true}"";
?>
其实用notepad也是很容易可以找出这几个代码。由于每个模块是独立的,仍然需要打开所有页面,采用这样输出并不是最佳方法。