博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【24】淘宝sdk——入门实战之左右悬浮模块
阅读量:4677 次
发布时间:2019-06-09

本文共 8988 字,大约阅读时间需要 29 分钟。

这里的悬浮模块我们写在footer中,当然在写进去前,我们还要去控制台创建这2个模块

'fudong01', domId => "fudong_01"), // 左侧浮动导航 array('id' => 'fudong02', domId => "fudong_02"), // 右侧浮动客服 array('id' => 'footer', domId => "footer_01"), // 950页面底部模块,这里也可以做个通栏效果,在上篇中讲了 ); echo include_modules('foot_modules', $foot_modules);//引号里是坑名,后面是变量名 ?>

 fudong01.php文件:

>
分类导航
'; $shopCategory = $shopCategoryManager->queryById($jsonObject[$n]->{rid});// 根据json对象获取rid属性的属性值即得到一级类 $big_url = $uriManager->shopCategoryURI($shopCategory); //临时记录大分类URL,无子分类时用 $big_name = $shopCategory->name; //临时记录大分类名,无子分类的时候显示 if($shopCategory){ echo '
'.$big_name.''; }else{ echo '
请选择大分类'.$n.''; } echo '
'; ?>
'; ?>
'; }else{ echo '
'; } ?>

 要实现的功能,module.xml文件

fudong01
左侧浮动导航
fudong01.php
assets/images/index.png
左侧浮动导航
true
assets/images/kefu/sc.gif

fudong02.php:

>
  • +
    点击此处展开
  • 关闭悬浮⊙
客服中心
售前咨询
'.$uriManager->supportTag($wwid[$i],"点击这里给我发消息",$_MODULE['qzz36_1_2'],$_MODULE['qzz36_1_3']).'
'; }else{ echo '
'.$name[$i].''.$uriManager->supportTag($wwid[$i],"点击这里给我发消息",$_MODULE['qzz36_1_2'],$_MODULE['qzz36_1_3']).'
'; } } ?>
售后服务
'.$uriManager->supportTag($wwid[$i],"点击这里给我发消息",$_MODULE['qzz36_2_2'],$_MODULE['qzz36_2_3']).'
'; }else{ echo '
'.$name[$i].''.$uriManager->supportTag($wwid[$i],"点击这里给我发消息",$_MODULE['qzz36_2_2'],$_MODULE['qzz36_2_3']).'
'; } } ?>
工作时间

 要实现的功能,module.xml文件

fudong02
右侧浮动客服
fudong02.php
assets/images/index.png
右侧浮动客服
true
ww1|ww2|ww3|ww4|ww5|ww6
客服0|客服1|客服2|客服3|客服4|客服6
ww1|ww2|ww3|ww4
昵称0|昵称1|昵称2|昵称3
9:00AM—24:00PM
请咨询亮灯旺旺

css样式:

/*[左悬浮]分类导购*/.fudong01{width:122px;height:auto;font-size:12px;position:fixed;_position:absolute;z-index:9999;top:120px;left:2px;}.infudong01 .nav .ks-switchable-nav li{width:24px;text-align:center;color:#fff;background:#ff8808;cursor:pointer;margin-right:98px;}.infudong01 .nav .ks-switchable-nav li span{font-size:16px;}.infudong01 .nav .ks-switchable-nav li.ks-none{width:115px;height:22px;line-height:22px;background:#EFEFEF;color:#4E4E4E;text-align:left;cursor:pointer;padding-left:5px;background:#fff;border:#999 solid 1px;border-bottom:0;margin-right:0;}.infudong01 .nav .ks-switchable-nav li.ks-active{display:none;}.infudong01 .ks-switchable-content{width:120px;background:#fff;border:#999 solid 1px;border-bottom:0;border-top:0;overflow:hidden;}.infudong01 .ks-switchable-content .block{display:block;border-bottom:#4E4E4E solid 2px;}.infudong01 .ks-switchable-content .block .tt{width:120px;height:32px;line-height:32px;text-align:center;background:#ff8808;font-weight:bold;font-size:14px;color:#EFEFEF;}.infudong01 .ks-switchable-content .block .dh{width:110px;margin:0 5px;overflow:hidden;}.infudong01 .ks-switchable-content .block .dh .bd{padding:5px 0;}.infudong01 .ks-switchable-content .block .dh .bd .inhd{width:110px;height:28px;line-height:28px;border-bottom:#e6e6e6 solid 1px;text-align:center;}.infudong01 .ks-switchable-content .block .dh .bd .inhd a{text-decoration:none;}.infudong01 .ks-switchable-content .block .dh .bd span .inbd{width:122px;background:#EFEFEF;border:#999 solid 1px;border-left:0;display:block;padding:10px;}.infudong01 .ks-switchable-content .block .dh .bd span .inbd ul{margin:0;display:block;}.infudong01 .ks-switchable-content .block .dh .bd span .inbd ul li a{width:120px;line-height:26px;border-bottom:#fff solid 1px;display:block;text-align:center;}.infudong01 .ks-switchable-content .block .dh .bd span .inbd ul li a:hover{width:120px;color:#ff8808;border-bottom:#fff solid 1px;display:block;}.infudong01 .share{width:120px;clear:both;padding:5px 3px;height:74px;}.infudong01 .share .sf{margin-top:7px;}.infudong01 .pic{margin:0;padding:0;}.infudong01 .ks-switchable-content .block .dh .tp{width:40px;text-align:center;margin:8px 0 0 36px;background-color:#e6e6e6;}.infudong01 .ks-switchable-content .block .dh .tp a{color:#4E4E4E;display:block;text-decoration:none;}.infudong01 .ks-switchable-content .none{display:none;}/*[右悬浮]客户服务*/.fudong02{width:122px;height:auto;font-size:12px;position:fixed;_position:absolute;z-index:9999;top:120px;right:2px;}.infudong02 .ks-switchable-nav li{width:24px;text-align:center;color:#fff;background:#ff8808;cursor:pointer;margin-left:98px;}.infudong02 .ks-switchable-nav li span{font-size:16px;}.infudong02 .ks-switchable-nav li.ks-none{width:115px;height:22px;line-height:22px;background:#EFEFEF;color:#4E4E4E;text-align:right;cursor:pointer;padding-right:5px;background:#fff;border:#999 solid 1px;border-bottom:0;margin-left:0;}.infudong02 .ks-switchable-nav li.ks-active{display:none;}.infudong02 .ks-switchable-content{width:120px;background:#fff;border:#999 solid 1px;border-bottom:0;border-top:0;overflow:hidden;}.infudong02 .ks-switchable-content .block{display:block;border-bottom:#4E4E4E solid 2px;}.infudong02 .ks-switchable-content .block .tt{width:120px;height:32px;line-height:32px;text-align:center;background:#ff8808;font-weight:bold;font-size:14px;color:#EFEFEF;}.infudong02 .ks-switchable-content .block .ww{width:108px;margin:0 4px;}.infudong02 .ks-switchable-content .block .ww .hd{font-weight:bold;color:#4E4E4E;clear:both;margin-top:8px;border-bottom:#999 dashed 1px;}.infudong02 .ks-switchable-content .block .ww .bd{padding:5px 0;}.infudong02 .ks-switchable-content .block .ww .bd p{clear:both;}.infudong02 .ks-switchable-content .block .ww .bd .wwid0{clear:both;margin:3px 0 0 20px;}.infudong02 .ks-switchable-content .block .ww .bd .wwid{float:left;width:52px;height:29px;*height:22px;}.infudong02 .ks-switchable-content .block .ww .tp{width:40px;text-align:center;margin:8px 0 0 40px;background-color:#e6e6e6;}.infudong02 .ks-switchable-content .block .ww .tp a{color:#4E4E4E;display:block;text-decoration:none;}.infudong02 .ks-switchable-content .none{display:none;}

 效果图如下:

转载于:https://www.cnblogs.com/huige728/archive/2012/07/08/2581631.html

你可能感兴趣的文章
Microsoft Visual SourceSafe使用经验
查看>>
威尔逊定理及证明
查看>>
[LeetCode] Peeking Iterator
查看>>
Understanding Unix/Linux Programming-用户程序play_again4.c
查看>>
算法总结
查看>>
指数平滑法
查看>>
CodeForces 735E(树形DP)
查看>>
lesson - 13 Linux系统日常管理2
查看>>
yarn-site.xml
查看>>
感觉到了最关键的时候了
查看>>
二叉树非递归遍历方法小结
查看>>
WPF中使用USERCONTROL
查看>>
altium designer 高亮显示某条线怎么设置
查看>>
|Vijos|贪心|P1662 最大配对
查看>>
【干货】Kafka 事务特性分析
查看>>
.Net程序员学用Oracle系列(8):触发器、作业、序列、连接
查看>>
计算机网络启蒙篇
查看>>
lucene搜索过程
查看>>
关于Composer——好久不动手了。。。
查看>>
workerman相关
查看>>