【24】淘宝sdk——入门实战之左右悬浮模块

这里的悬浮模块我们写在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;}

 效果图如下: