又打了n久的魚了......悲劇，
這次我們做的是彈出菜單，只要修改下dz01模塊下的文件就好了，其他的不動
添加功能說明：
【1】【全部分類▼】的彈出層效果
【2】寶貝大類目彈出小類目效果
【3】自定義鏈接效果（這個很簡單）
【4】通欄效果
以上就是我們要做的效果了，呵呵
=======================================================
【1】我們先了解下html代碼結構，這里我上傳一張圖說明下，就不直接寫出全部的代碼
結構已經看到了，我們先不要去管上面的我做的標記，等下面我會講到的。
首先，我們先講講【全部分類▼】的彈出層格局，仔細看看是和<ul>標簽齊平的，沒有包裹在<ul>標簽中，了解好了，我們也要去了解下彈出層這個效果，不懂的去看看官方文檔中的Popup效果（彈出層），對了，這里我還要簡單的說下彈出層的對齊方式：
1、選定觸點（不懂看上圖），對要實現彈出層的進行觸點設置。
2、對齊屬性：【offset、points】的了解，這里也是要選定基點的，看看下圖中的紅點，這個就是我們【全部分類▼】采用的對齊方式
說明在圖上很清楚，這個是：【points】對齊，然后我們進行微調，微調我們就要用到：【offset】，這里我就覺得有點奇怪，我這里調試的時候發現屬性值設置1，好像是2px，不是1px，這樣也能說微調？？？
還有就是彈出層會有一個微小的抖動（鼠標又滑動回到導航上的觸點，再有滑動回來，大家看看是不是這樣），當然我是在ff下試試的，不知道是不是兼容的問題，呵呵。
然后，我們看看寶貝分類的的那個菜單彈出層，也是就是m0和m1的那個，原理是一樣的，對齊是按【bc、tc】來對齊。
說了這么多，我們上模塊中的dz01.php中的代碼，代碼中加了注釋，請大家仔細看
<div class="box J_TBox" <?php echo $_MODULE_TOOLBAR?>>
<div class="nav_layout">
<div class="dz">
<?php
if($_MODULE[dz_01]){
echo '<img src="'.$_MODULE[dz_01].'">';
}else{
echo '<img src="assets/images/dz/dz_01.png">';
}
?>
</div>
<div class="nav">
<!--style type="text/css">
<? echo '.tb-shop #hd {position: static;}' ?>/*寶貝詳情頁擋住了全部分類的彈出層解決辦法。注：后台[調試]中會報錯，?debug不報錯*/
</style-->
<ul>
<li class="first-trigger"><a href="<?php echo 'http://shop'. $_shop->id .'.taobao.com/?search=y'; ?>">全部分類▼</a></li><!--設置觸點class，與下面的彈出層的trigger的屬性要保持一致-->
<li><a href="<?php $pageLinks =$shopManager->getShopPageLinks();
foreach($pageLinks as $pageLink){
$url[]=$pageLink->href;
}
echo $url[0];
?>">首頁</a></li>
<li><a href="<?php echo $uriManager->rateURI(); ?>" target="<? echo $_MODULE[dz_02]?>">信用評價</a></li>
<li><a href="<?php echo $uriManager->searchURI(); ?>&orderType=_newOn" target="<? echo $_MODULE[dz_02]?>">新品上架</a></li>
<li><a href="<?php echo $uriManager->searchURI(); ?>&orderType=_hotsell" target="<? echo $_MODULE[dz_02]?>">銷量榜</a></li>
<li><a href="<? echo $uriManager->favoriteLink();?>" target="<? echo $_MODULE[dz_02]?>">收藏小店</a></li>
<!--寶貝分類菜單--><!--導航寶貝分類菜單 star-->
<?php
$json = $_MODULE['dz_04'];
/*通過PHP函數解析json數據生成JSON數組*/
$jsonObject = json_decode($json);
for($n = 0; $n <$_MODULE['dz_03']; $n++){
//現在這里傳遞的是XML里的參數，掌櫃可以自由編輯。全部顯示類目選擇器里的參數可這樣判斷 $n <count($jsonObject)
echo '<li class="m'.$n.'">'; //這里是設置觸點
$shopCategory = $shopCategoryManager->queryById($jsonObject[$n]->{rid});
//根據json對象獲取rid屬性的屬性值即得到一級類
$big_url = $uriManager->shopCategoryURI($shopCategory); //臨時記錄大分類URL,無子分類時用
$big_name = $shopCategory->name; //臨時記錄大分類名,無子分類的時候顯示
if(!empty($shopCategory)){
echo '<a href="'.$big_url.'" target="'.$_MODULE[dz_02].'">'.$big_name.'</a>';
}else{
echo '<a href="#" target="'.$_MODULE[dz_02].'">寶貝大分類'.$n.'</a>';
}
echo '</li>';
echo "<div class=\"J_TWidget hidden \" data-widget-type=\"Popup\" data-widget-config=\"{
'trigger':'.m".$n."',
'align':{
'node':'.m".$n."',
'offset':[0,0],
'points':['bc','tc']
}
}\">";//注意看這里的觸點哦
echo'<div class="small">';
/*二級類目是通過','分隔的字符串（一定注意是半角逗號字符）*/
$array = explode(",",$jsonObject[$n]->{childIds});
foreach($array as $id){
$subShopCategory = $shopCategoryManager->queryById($id);
$url = $uriManager->shopCategoryURI($shopCategory);//子分類鏈接
$name = $subShopCategory->name;//子分類名稱
if($subShopCategory){
echo '<p><a href="'.$url.'" target="'.$_MODULE[dz_02].'">'.$name.'</a></p>';
}else{
for($c = 0; $c <6; $c++){
echo '<p><a href="#" target="'.$_MODULE[dz_02].'">輸入小分類'.$c.'</a></p>';
}
}
}
echo'</div>';
echo'</div>';
}
?>
<!--導航寶貝分類菜單 end-->
<!--自定義鏈接地址-->
<li><a href="<? echo $_MODULE[dz_06]?>" target="<? echo $_MODULE[dz_02]?>"><? echo $_MODULE[dz_05]?></a></li>
</ul>
<!--全部分類【彈出層】 star-->
<!--注意觸點元素trigger的屬性值，要和上面的保持一致哦-->
<div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{
'trigger':'.first-trigger',
'align':{
'node':'.first-trigger',
'offset':[1,0],
'points':['bl','tl']
}
}">
<div class="fenlei">
<h3><a href="<?php echo $uriManager->searchURI(); ?>" target="<? echo $_MODULE[dz_02]?>">查看全部分類</a></h3>
<p><a href="<?php echo $uriManager->searchURI(); ?>&orderType=_hotsell" target="<? echo $_MODULE[dz_02]?>">按銷量</a> |
<a href="<?php echo $uriManager->searchURI(); ?>&orderType=_newOn" target="<? echo $_MODULE[dz_02]?>">按新品</a> |
<a href="<?php echo $uriManager->searchURI(); ?>&orderType=price" target="<? echo $_MODULE[dz_02]?>">按價格</a> |
<a href="<?php echo $uriManager->searchURI(); ?>&orderType=_hotkeep" target="<? echo $_MODULE[dz_02]?>">按收藏</a>
</p>
<p> </p><!--增加行距，嘿嘿-->
<?php
//得到大分類
$allShopCategory = $shopCategoryManager->queryAll();
foreach($allShopCategory as $shopCategory){ //foreach循環下面的代碼
echo '<div class="infenleis">';
echo '<h4>';
$big_url = $uriManager->shopCategoryURI($shopCategory); //臨時記錄大分類URL,無子分類時用
$big_name = $shopCategory->name; //臨時記錄大分類名,無子分類的時候顯示
echo '<a href="'.$big_url.'" target="'.$_MODULE[dz_02].'">'.$shopCategory->name.'</a>';
echo '</h4>';
//得到子類
$subCategories = $shopCategoryManager-> querySubCategories ($shopCategory->id);
if ($subCategories){
foreach($subCategories as $shopCategory){
$url = $uriManager->shopCategoryURI($shopCategory);
//echo $url;
echo '<span><a href="'.$url.'" target="'.$_MODULE[dz_02].'">'.$shopCategory->name.'</a> | </span>';
}
}else{
echo '<h4><a href="'.$big_url.'" target="'.$_MODULE[dz_02].'">'.$big_name.'</a></h4>';
}
echo '</div>';
} ?>
<div style="clear:both"></div>
</div>
</div>
<!--全部分類彈出層 end-->
</div>
</div>
</div>
上面的代碼難點在於獲取欄目，但是我們不懂不要緊，會用會給就好了。
當然我這里也找了一個說明，大家有興趣就看看，其實都是差不多的：
1. 數據格式：類目選擇組件返回的是如下json類型的數據：
[{ rid:1; childIds:"2,3,4"; }, { rid:4; childIds:"5,6,7"; }]
其中rid表示的是一級類目，childIds表示二級類目。
2. php文件中使用方式：
<?php
$json = $_MODULE['category'];
/*通過PHP函數解析json數據生成JSON數組*/
$jsonArray = json_decode($json);
foreach($jsonArray as $jsonObject){
/* 根據json對象獲取rid屬性的屬性值即得到一級類目 */
echo '父id:'.$jsonObject->{rid}.'<br>';
$shopCategory = $shopCategoryManager->queryById($jsonObject->{rid});
echo "父店鋪類目名稱是: ".$shopCategory->name."<br>";
/*二級類目是通過','分隔的字符串（一定注意是半角逗號字符）*/
$array = explode(",",$jsonObject->{childIds});
foreach($array as $id){ $subShopCategory = $shopCategoryManager->queryById($id);
echo "子店鋪類目名稱是: ".$subShopCategory->name."<br>";
}
?>
看了之后是不是差不多啊。
========================================================================================================
module.xml文件代碼，加了2個功能，仔細看看哦
<?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>dz01</id> <name>店招</name> <file>dz01.php</file> <thumbnail>assets/images/index.png</thumbnail> <description>店招</description> <requiredCache>true</requiredCache> <parameters> <param name='dz_01' label='店招圖片鏈接' formType='text' description='店招圖片鏈接' ptype='text'> assets/images/dz/dz_01.png </param> <param label="導航顯示大分類個數┏" formType="text" readonly="false" description="選擇幾個大類目輸入幾，如：5" ptype="text" name="dz_03"> 2 </param> <param label="導航顯示的大分類┗" formType="categoryForm" readonly="false" description="點擊此處添加分類" ptype="category" name="dz_04"></param> <param label="自定義鏈接名稱┏" formType="text" readonly="false" description="┓導航上顯示的文字" ptype="text" name="dz_05"> 自定義鏈接 </param> <param label="自定義鏈接地址┗" formType="text" readonly="false" description="┛鏈接地址" ptype="text" name="dz_06"> http://www.taobao.com </param> <param name="dz_02" label="請選擇鏈接打開方式" formType="select" readonly="false" description="默認為新窗口打開" ptype="text" > <option value="_blank">_blank</option> <option value="_parent">_parent</option> <option value="_self">_self</option> <option value="_top">_top</option> </param> </parameters> </module>
在module.xml中值得我們主要的是【類目選擇】他的屬性：<param name="category" label="描述1" description="描述1"ptype="category" formType="categoryForm"/>
是不是和其他的不一樣啊，當然等我們學到后面還有【寶貝選擇組件】這個要說，這個的屬性在開發文檔是貌似沒有看到，我只能說官方的文檔，更新不給力啊...
下面我們看看module.xml的效果圖吧：
這些都弄好了，當然不能缺少樣式了，現在我補上樣式：
.nav_layout .nav .small{background-color:#000;width:130px;font-size:12px;text-align:center;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=92);opacity:.92;} .nav_layout .nav .small p{border-bottom:#e6e6e6 solid 1px;width:130px;height:35px;line-height:35px;} .nav_layout .nav .small p a{display:block;color:#fff;} .nav_layout .nav .small p a:hover{background-color:#e6e6e6;color:#000;} .nav_layout .nav .fenlei{ width:700px; height:auto; background-color:#FFF; border:#000 solid 2px; border-top:none; padding:20px 0 0 25px;} .nav_layout .nav .fenlei h3{ font-size:14px;color:#ff8808;margin-bottom:3px; clear:both;} .nav_layout .nav.fenlei h3 a{color:#ff8808;} .nav_layout .nav .fenlei p a{ color:#4E4E4E;} .nav_layout .nav .fenlei .infenleis{ width:320px; height:95px;margin-right:25px; line-height:1.8; padding-left:3px; float:left;} .nav_layout .nav .fenlei .infenleis h4{ font-size:13px;border-bottom:#CCCCCC dashed 1px; display:block;margin-bottom:8px; clear:both;} .nav_layout .nav .fenlei .infenleis h4 a{color:#4e4e4e;} .nav_layout .nav .fenlei .infenleis span a{ color:#4E4E4E;}
好了，這樣我們也算大功告成了，但是我們還要說下【通欄】的效果是怎么做的，呵呵，原理很簡單，就是在最外層的坑上加個一個切換即可，下面我只是單獨拿出來說，和上面的不放在一起
模塊的php：
<div class="dz99 <? echo $_MODULE[dz_99]?>">
<div class="indz99 ></div>
</div>
module.xml:
<parameters> <param label="是否通欄顯示" formType="select" readonly="false" description="默認為通欄顯示" ptype="text" name="dz_99"> <option selected="selected" value="dz_tl">是</option> <option value="dz_950">否</option> </param> </parameters>
ok,以上就是通欄效果的思路了，還是很簡單的，呵呵
======================================================================================
ps.錄制了一個gif效果，但是壓縮的太過了，圖片不清楚，但是還是能看到效果的，將就的看看吧
