这里的悬浮模块我们写在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 ''; ?>
要实现的功能,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;}
效果图如下: