您的位置:首页 > 其它

淘宝SDK2.0:适应不同布局的写法

2013-04-23 17:32 288 查看
<?php
/**
内容规则:
1.PHP页面内容只能包含一个根元素(允许任意标签元素,推荐"div"元素)
2.根元素类定义包含:class="tb-module tshop-um tshop-um-pubu"(class属性可以添加您需要的类选择器定义)
3.元素class属性值禁止以"tb-"和"J_T"字符开头,除[tb-module, J_TWidget, J_CartPluginTrigger, J_TokenSign]以外
4.禁止使用<style>标签(元素)
5.禁止使用<script>标签(元素)
6.禁止使用<link>标签(元素)
7.禁止使用标签(元素)的id属性
8.允许使用元素内联style属性

*/
?>

<?php //设置模块的宽度,以适应950和750不同的布局
if($regionWidth == 950||$regionWidth ==null){//展示950布局下的||单个模块调试时预览效果
$width_hd = "width:948px;"; //950布局下的标题和展示区域的宽度 样式style属性
$width_bd = "width:950px;";
$lie = "4"; //950布局下4列展示
}elseif($regionWidth == 750){ //750布局下的标题和展示区域的宽度 样式style属性
$width_hd = "width:748px;";
$width_bd = "width:750px;";
$lie = "3"; //750布局下3列展示
}
// $regionWidth 是系统全局变量
?>
<div class="tb-module tshop-um tshop-um-pubu">
<div class="pubu">
<!--是否显示标题-->
<div class="hd" style="display:<? echo $_MODULE[pubu_1]?>;<? echo $width_hd ?>"> <!--根据用户选择的参数,是否显示标题-->
<div class="left"><? echo $_MODULE[pubu_2]?></div>
<div class="right"><? echo $_MODULE[pubu_3]?></div>
</div>

<div class="bd" style="width:<? echo $width_bd ?>"> <!--适应950和750两种不同的布局-->
<?php //$i变量 表示第i列
for($i=0;$i<$lie;$i++){ //为输出准备数据
$ids = $_MODULE['pubu_'.$i.'_1']; //获取商品ID
$imgSize = "310"; //默认商品图片尺寸
$sortType = $_MODULE['pubu_'.$i.'_2']; //获取商品排序参数
$idsData = $_MODULE['pubu_5']; //店铺商品数据参数
$num = $_MODULE['pubu_4']; //商品数量参数
?>
<!--pb表示瀑布--> <!--3列或者4列布局的不同处理--> <!--如果是4列,最后一个为0,前三个为10;如果为三列,最后一个为0,前三个为30;-->
<div class="pb" style="margin-right:<?php echo ''.($lie==4 ? ($i%4==3 ? 0 : 10) : ($i%3==2 ? 0 : 30)).'';?>px;">
<?php
$m=0; //计数器
$items = getItems($ids, $imgSize, $sortType, $num, $idsData); //此处用的是common.php里的共享函数
foreach($items as $item ) { //遍历获取到的宝贝数据
if($m<$num){ //如果计数器的计数小于要获取的数
?>
<div class="inpb"> <!--瀑布布局中,一列数据的内部-->
<div class="img_box <?php
if($i%2==0){ //求余,如果是双数列,则类为img_box0,高度为250px;
echo ''.($m%2==0 ? img_box0 : img_box1).''; //三元运算符求余判断,实现瀑布流效果
}else{
echo ''.($m%2==1 ? img_box0 : img_box1).''; //第单数个宝贝的情况则返回的class字符串为:img_box0
}
?>">
<div class="img_box_img">
<a class="img_box_img" style="background:url(<? echo $item['pic'] ?>) no-repeat center center;" href="<? echo $item['url'] ?>" target="<? echo $_MODULE['pubu_0'] ?>"></a>
</div>

<div class="img_box_btn">
<a href="<? echo $item['url'] ?>" target="<? echo $_MODULE['pubu_0'] ?>">
<img class="J_TWidget" src="assets/images/qzz.png" data-widget-type="Compatible" data-widget-config="{
'png':true,
'png_tag':true
}"/><!--IE6下面的PNG透明组件-->
</a>
</div>

<div class="img_box_txt">
售出 <strong><? echo $item['soldCount'] ?></strong> 笔 ¥ <strong><? echo $item['price'] ?></strong> 元
</div>
</div>
<div class="txt_box"><a href="<? echo $item['url'] ?>" target="<? echo $_MODULE['pubu_0'] ?>"><? echo $item['title'] ?></a></div>
<div class="ico_box">
<table width="210" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="100">
<div class="sns-widget sns-sharebtn fenxiang" data-sharebtn="{
'type':'item',
'key':'<? echo $item['id'] ?>',
'title':'<? echo $item['title'] ?>',
'client_id':'68',
'pic':'<? echo $item['pic'] ?>',
'isShowFriend':'false',
'comment':'这个很赞哦...'
}">
</div><!--淘宝分享,type:webpage 时,key填一个活动的url链接;type:shop 时,key填shopid;type:item 时,key填itemid-->
</td>
<td width="100">
<div class="sns-widget" data-like="{
'type':2,
'key':'<? echo $item['id'] ?>'
}">
</div><!--淘宝喜欢,type:2时,key应该填宝贝的ID;type:3时,key应该填写一个url;type:4时,key应该填写店铺的ID-->
</td>
</tr>
</table>
</div>
</div>
<?php
$m++; //计数器
}
}
?>

</div>
<?php
}
?>
<div class="clear"></div>
</div>

</div>
</div>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: