这里的悬浮模块我们写在footer中,当然在写进去前,我们还要去控制台创建这2个模块
<div class="layout grid-m"> <div class="foot_modules J_TRegion"> <?php $foot_modules = array( array('id' => 'fudong01', domId => "fudong_01"), // 左侧浮动导航 array('id' => 'fudong02', domId => "fudong_02"), // 右侧浮动客服 array('id' => 'footer', domId => "footer_01"), // 950页面底部模块,这里也可以做个通栏效果,在上篇中讲了 ); echo include_modules('foot_modules', $foot_modules);//引号里是坑名,后面是变量名 ?> </div> </div>
fudong01.php文件:
<div class="fudong01 J_TBox" <?php echo $_MODULE_TOOLBAR ?>> <div class="J_TWidget infudong01" data-widget-type="Tabs" data-widget-config="{ 'effect': 'none', 'autoplay': false, 'triggerType': 'click', 'circular': true}"> <div class="nav"> <ul class="ks-switchable-nav"> <li class="ks-active"><strong><span>+</span><br/>点击此处展开</strong></li> <li class="ks-none">⊙关闭悬浮</li> </ul> </div> <div class="ks-switchable-content"> <div class="block"> <div class="tt">分类导航</div> <div class="dh"> <div class="bd"> <?php $json = $_MODULE['fudong_3']; /*通过PHP函数解析json数据生成JSON数组*/ $jsonObject = json_decode($json); for($n = 0; $n <4; $n++){ echo '<div class="inhd classp'.$n.'">'; $shopCategory = $shopCategoryManager->queryById($jsonObject[$n]->{rid});// 根据json对象获取rid属性的属性值即得到一级类 $big_url = $uriManager->shopCategoryURI($shopCategory); //临时记录大分类URL,无子分类时用 $big_name = $shopCategory->name; //临时记录大分类名,无子分类的时候显示 if($shopCategory){ echo '<a href="'.$big_url.'" target="'.$_MODULE[fudong_2].'">'.$big_name.'</a>'; }else{ echo '<a href="#" target="'.$_MODULE[fudong_2].'">请选择大分类'.$n.'</a>'; } echo '</div>'; ?> <span class='J_TWidget hidden' data-widget-type='Popup' data-widget-config="{ 'trigger':'.classp<? echo $n;?>', 'align':{ 'node':'.classp<? echo $n;?>', 'offset':[5,0], 'points':['tr','tl'] } }"> <span class="inbd" style="display:block;"> <ul> <?php /*二级类目是通过','分隔的字符串(一定注意是半角逗号字符)*/ $array = explode(",",$jsonObject[$n]->{childIds}); foreach($array as $id){ $subShopCategory = $shopCategoryManager->queryById($id); $url = $uriManager->shopCategoryURI($shopCategory);//子分类链接 $name = $subShopCategory->name;//子分类名称 if($subShopCategory){ echo '<li><a href="' .$url. '" target="'.$_MODULE[fudong_2].'">'.$name.'</a></li>'; }else{ for($c = 0; $c <6; $c++){ echo '<li><a href="#" target="'.$_MODULE[fudong_2].'">请选择小分类'.$c.'</a></li>'; } } } ?> </ul> <div class="clear"></div></span></span> <?php } ?> </div> <div class="share"> <p>分享本店铺到</p> <?php echo '<div class="jiathis clear">'; echo '<dl>'; echo '<dd class="sf s1"><form action="http://www.jiathis.com/send/?webid=taobao&url=http://shop'. $_shop->id .'.taobao.com&title='.$_shop->title.'" method="post" target="_blank"><input type="submit" value="" title="淘江湖"></form></dd>'; echo '<dd class="sf s2"><form action="http://www.jiathis.com/send/?webid=tsina&url=http://shop'. $_shop->id .'.taobao.com&title='.$_shop->title.'" method="post" target="_blank"><input type="submit" value="" title="新浪微博"></form></dd>'; echo '<dd class="sf s3"><form action="http://www.jiathis.com/send/?webid=tqq&url=http://shop'. $_shop->id .'.taobao.com&title='.$_shop->title.'" method="post" target="_blank"><input type="submit" value="" title="腾讯微博"></form></dd>'; echo '<dd class="sf s4"><form action="http://www.jiathis.com/send/?webid=qzone&url=http://shop'. $_shop->id .'.taobao.com&title='.$_shop->title.'" method="post" target="_blank"><input type="submit" value="" title="QQ空间"></form></dd>'; echo '<dd class="sf s5"><form action="http://www.jiathis.com/send/?webid=renren&url=http://shop'. $_shop->id .'.taobao.com&title='.$_shop->title.'" method="post" target="_blank"><input type="submit" value="" title="人人网"></form></dd>'; echo '<dd class="sf s6"><form action="http://www.jiathis.com/send/?webid=kaixin001&url=http://shop'. $_shop->id .'.taobao.com&title='.$_shop->title.'" method="post" target="_blank"><input type="submit" value="" title="开心网"></form></dd>'; echo '<dd class="sf s7"><form action="http://www.jiathis.com/send/?webid=t163&url=http://shop'. $_shop->id .'.taobao.com&title='.$_shop->title.'" method="post" target="_blank"><input type="submit" value="" title="网易微博"></form></dd>'; echo '<dd class="sf s8"><form action="http://www.jiathis.com/send/?webid=tsohu&url=http://shop'. $_shop->id .'.taobao.com&title='.$_shop->title.'" method="post" target="_blank"><input type="submit" value="" title="搜狐微博"></form></dd>'; echo '<dd class="sf s10"><form action="http://www.jiathis.com/send/?webid=hi&url=http://shop'. $_shop->id .'.taobao.com&title='.$_shop->title.'" method="post" target="_blank"><input type="submit" value="" title="百度空间"></form></dd>'; echo '<dd class="sf s11"><form action="http://www.jiathis.com/send/?webid=jiathis&url=http://shop'. $_shop->id .'.taobao.com&title='.$_shop->title.'" method="post" target="_blank"><input type="submit" value="" title="点击分享到更多"></form></dd>'; echo '</dl>'; echo '</div>'; ?> </div> <div class="pic"> <?php if ( $_MODULE[fudong_0] ) { echo '<a href="'.$_MODULE[fudong_0].'" target="'.$_MODULE[fudong_2].'"><img src="'.$_MODULE[fudong_1].'"></a>'; }else{ echo '<a class="J_TokenSign" href="'.$uriManager->favoriteLink().'" target="'.$_MODULE[fudong_2].'"><img src="'.$_MODULE[fudong_1].'"></a>'; } ?> </div> <div class="tp"><a href="#">▲TOP</a></div> </div> </div> <div class="none"></div> </div> </div> </div>
要实现的功能,module.xml文件
<?xml version="1.0" encoding="GBK" standalone="yes"?> <module xsi:noNamespaceSchemaLocation="http://www.cnblogs.com/../module.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> <id>fudong01</id> <name>左侧浮动导航</name> <file>fudong01.php</file> <thumbnail>assets/images/index.png</thumbnail> <description>左侧浮动导航</description> <requiredCache>true</requiredCache> <parameters> <param label="图片地址┏" formType="text" readonly="false" description="请输入图片地址" ptype="text" name="fudong_1"> assets/images/kefu/sc.gif </param> <param label="点击图片打开链接┗" formType="text" readonly="false" description="不用填写,默认为收藏本店链接。" ptype="text" name="fudong_0"> </param> <param label="选择四个大分类" formType="categoryForm" readonly="false" description="点击此处添加分类" ptype="category" name="fudong_3"></param> <param label="请选择链接打开方式" formType="select" readonly="false" description="默认为新窗口打开" ptype="text" name="fudong_2"> <option selected="selected" value="_blank">_blank</option> <option value="_parent">_parent</option> <option value="_self">_self</option> <option value="_top">_top</option> </param> </parameters> </module>
fudong02.php:
<div class="fudong02 J_TBox" <?php echo $_MODULE_TOOLBAR ?>> <div class="J_TWidget infudong02" data-widget-type="Tabs" data-widget-config="{ 'effect': 'none', 'autoplay': false, 'triggerType': 'click', 'circular': true}"> <ul class="ks-switchable-nav"> <li class="ks-active"><strong><span>+</span><br/>点击此处展开</strong></li> <li class="ks-none">关闭悬浮⊙</li> </ul> <div class="ks-switchable-content"> <div class="block"> <div class="tt">客服中心</div> <div class="ww"> <div class="hd">售前咨询</div> <div class="bd"> <?php $wwid = explode("|",$_MODULE['qzz36_1_0']); $name = explode("|",$_MODULE['qzz36_1_1']); for ($i=0;$i<count($wwid);$i++) { if($_MODULE['qzz36_1_2']==1){ echo '<div class="wwid0">'.$uriManager->supportTag($wwid[$i],"点击这里给我发消息",$_MODULE['qzz36_1_2'],$_MODULE['qzz36_1_3']).'</div>'; }else{ echo '<div class="wwid">'.$name[$i].''.$uriManager->supportTag($wwid[$i],"点击这里给我发消息",$_MODULE['qzz36_1_2'],$_MODULE['qzz36_1_3']).'</div>'; } } ?> </div> <div class="hd">售后服务</div> <div class="bd"> <?php $wwid = explode("|",$_MODULE['qzz36_2_0']); $name = explode("|",$_MODULE['qzz36_2_1']); for ($i=0;$i<count($wwid);$i++) { if($_MODULE['qzz36_2_2']==1){ echo '<div class="wwid0">'.$uriManager->supportTag($wwid[$i],"点击这里给我发消息",$_MODULE['qzz36_2_2'],$_MODULE['qzz36_2_3']).'</div>'; }else{ echo '<div class="wwid">'.$name[$i].''.$uriManager->supportTag($wwid[$i],"点击这里给我发消息",$_MODULE['qzz36_2_2'],$_MODULE['qzz36_2_3']).'</div>'; } } ?> </div> <div class="hd">工作时间</div> <div class="bd"> <p><? echo $_MODULE[qzz36_0]?></p> <p><? echo $_MODULE[qzz36_1]?></p> </div> <div class="tp"><a href="#">▲TOP</a></div> </div> </div> <div class="none"></div> </div> </div> </div>
要实现的功能,module.xml文件
<?xml version="1.0" encoding="GBK" standalone="yes"?> <module xsi:noNamespaceSchemaLocation="http://www.cnblogs.com/../module.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> <id>fudong02</id> <name>右侧浮动客服</name> <file>fudong02.php</file> <thumbnail>assets/images/index.png</thumbnail> <description>右侧浮动客服</description> <requiredCache>true</requiredCache> <parameters> <param label="◆售前客服旺旺风格┏" formType="select" readonly="false" description="请选择" ptype="number" name="qzz36_1_2"> <option value="1">风格一</option> <option selected="selected" value="2">风格二</option> </param> <param label="阿里旺旺账号ID┠" formType="textarea" readonly="false" description="多个,用|分隔" ptype="text" name="qzz36_1_0"> ww1|ww2|ww3|ww4|ww5|ww6 </param> <param label="客服名字┠" formType="textarea" readonly="false" description="对应旺旺ID的昵称,用|分隔" ptype="text" name="qzz36_1_1"> 客服0|客服1|客服2|客服3|客服4|客服6 </param> <param label="是否需要E客服分流┗" formType="select" readonly="false" description="如果是E客服主号,请选择" ptype="text" name="qzz36_1_3"> <option selected="selected" value="false">不分流</option> <option value="true">分流</option> </param> <param label="★售后服务旺旺风格┏" formType="select" readonly="false" description="请选择" ptype="number" name="qzz36_2_2"> <option value="1">风格一</option> <option selected="selected" value="2">风格二</option> </param> <param label="阿里旺旺账号ID┠" formType="textarea" readonly="false" description="多个,用|分隔" ptype="text" name="qzz36_2_0"> ww1|ww2|ww3|ww4 </param> <param label="客服名字┠" formType="textarea" readonly="false" description="对应旺旺ID的昵称,用|分隔" ptype="text" name="qzz36_2_1"> 昵称0|昵称1|昵称2|昵称3 </param> <param label="是否需要E客服分流┗" formType="select" readonly="false" description="如果是E客服主号,请选择" ptype="text" name="qzz36_2_3"> <option selected="selected" value="false">不分流</option> <option value="true">分流</option> </param> <param label="请输入工作时间┏" formType="text" readonly="false" description="如:9:00AM—24:00PM" ptype="text" name="qzz36_0"> 9:00AM—24:00PM </param> <param label="请输入文字提示┗" formType="text" readonly="false" description="请输入" ptype="text" name="qzz36_1"> 请咨询亮灯旺旺 </param> </parameters> </module>
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;}
效果图如下: