【14】淘寶sdk——入門實戰之header.php制作（二）

在上一節中我們知道了怎么寫一個簡單的導航（自定義店招+系統店招）的這樣的組合，今天我們來個全自定義的導航，呵呵

=======================================================================

新建模塊、片區這樣的我就不說了，我們先來寫header.php，從這個php文件中知道我們要建立那里模塊

<div class="layout grid-m">
	<div class="HeaderModules J_TRegion">
		<?
		 $HeaderModules=array(
			array('id' => 'dz01', domId => "dz_01"),//自定義店招模塊（店招圖+菜單）
			array('id' => 'gonggao01', domId => "gonggao_01"),//自定義公告模塊
		 );
		 echo include_modules('HeaderModules', $HeaderModules);//引號里是坑名(也就是這個J_TRegion坑前面新建的div名)，后面是變量名（很明顯是這個數組）
		?>
	</div>
</div>

看了這個，我們就知道我們要建立2個模塊，也就是按照array數組中的id來建立模塊dz01和gonggao01，最后輸出。

我們先來說說店招模塊dz01 ，我們要在首頁輸出店招，就要先寫出它的靜態html的樣式，在進行交互操作（也就是html代碼和php進行混編，同時寫module.xml）。

好了我們在dz01.php中寫一個簡單一點的店招的html，代碼如下：

<div class="box J_TBox" <?php echo $_MODULE_TOOLBAR?>>
    <div class="nav_layout">
	   <div class="dz">
                <img src="assets/images/dz/dz_01.png">		 
	   </div>
	   <div class="nav">
			<ul>
			    <li><a href="#">全部分類▼</a></li>
			    <li><a href="#">首頁</a></li>
			    <li><a href="#">信用評價</a></li>
			    <li><a href="#">新品上架</a></li>
			    <li><a href="#">銷量榜</a></li>
			    <li><a href="#">收藏小店</a></li>
			</ul>
		</div>
	</div>
</div>

css代碼如下：

.nav_layout{width:950px;height:157px;}
.nav_layout .dz{width:950px;height:127px;}
.nav_layout .nav ul{width:950px;height:30px;background-color:#000;margin:0px;}
.nav_layout .nav ul li{float:left;width:101px;height:30px;line-height:30px;
	border-right: 1px solid #e6e6e6;
	text-align: center;color:#fff;display: block;
}
.nav_layout .nav ul li a{color:#fff;}
.nav_layout .nav ul li a:hover{background-color:#e6e6e6;display:block;color:#000;}

 這里我們要知道.nav_layout .dz給它一個高度是為了防止它和菜單中間產生一個間隙。

好了，寫到這里我們就開始我們的交互吧，我們要了解我們的交互要有那些功能，我們就寫什么功能，看看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>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 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>

在上面的代碼中我們可以看到2個功能，一個的替換店招圖片，還一個是選擇鏈接的打開方式，當然這里我們要知道<param>標簽中的屬性含義，這個我前面說過，不懂還是要去翻看淘寶官方sdk文檔
我們寫到這里就可以開始把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">
			<ul>
			    <li><a href="<?php echo 'http://shop'. $_shop->id .'.taobao.com/?search=y'; ?>">全部分類▼</a></li>
				<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>
			</ul>
		</div>
	</div>
</div>

 這個是一個比較簡單一個的輸出，官方文檔中有這里信用評價，新品上架等鏈接的說明，參考說明即可

==================================================================

上面我們說了店招，下面我們來看看一個淘寶公告的制作，這里我們用到了效果，這個是一個比較簡單的文字翻滾的效果（Slide卡盤-效果三），這里就不說明了，直接拿官方的改的

我們來看看gonggao01.php文件的靜態html

<div class="box J_TBox" <?php echo $_MODULE_TOOLBAR ?>>
	
	<div class="gonggao"><!--在外面嵌套一個div-->
		
        <!--公告、幫助-->
        <div class="gonggao01">
        
            <ul>
                <li class="left">
	                <div  class="J_TWidget">
                        <ul class="news-items">
                            <li><a href="#" target="">公告1：請在這里輸入您公告1的顯示文字！</a></li>
                            <li><a href="#" target="">公告2：請在這里輸入您公告2的顯示文字！</a></li>
                            <li><a href="#" target="">公告3：請在這里輸入您公告3的顯示文字！</a></li>
                        </ul>
                    </div>
                </li>
            			
                <li class="right">
                    <a href="#" target=""><img src="assets/images/gonggao/ico3.gif" />幫助中心</a>
                    <a class="J_TokenSign"  href="#" target="_blank"><img src="assets/images/gonggao/ico4.gif" />收藏本店</a>
                    <a href="#" target="_blank"><img src="assets/images/gonggao/ico2.gif" />關注本店</a>
                    <a href="#" target="_blank"><img src="assets/images/gonggao/ico5.gif" />手機收藏</a>
               </li>
            </ul>
        		
        </div>
        	
    </div>
    	
</div>

 css樣式代碼如下：

/*頭部公告*/
.gonggao{height:30px; margin:0 auto;background-color:#EFEFEF;overflow:hidden;}
.gonggao01{width:950px; height:30px;margin:0 auto;}
.gonggao01 ul li{line-height:30px;}
.gonggao01 ul li a{ color:#4e4e4e;}
.gonggao01 ul li a:hover{ color:#ff8808;}
.gonggao01 ul li.left{width:500px;background:url(../images/gonggao/ico1.gif) no-repeat 5px center; padding-left:20px; float:left;}
.gonggao01 ul li.left .scroll-news { height: 30px; overflow: hidden; }
.gonggao01 ul li.left .scroll-news a { color: #ff8808; }
.gonggao01 ul li.right{ width:420px; text-align:right;line-height:30px;float:left;_padding-top:6px;padding-right:10px;}
.gonggao01 ul li.right img{margin:0 4px 0 8px;vertical-align:middle;}
.gonggao01 ul li.right a:hover{text-decoration:none;}

 弄好這里，我們就看看在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>gonggao01</id>
    <name>頭部公告</name>
    <file>gonggao01.php</file>
    <thumbnail>assets/images/index.png</thumbnail>
    <description>集成滾動公告、關注本店、收藏本店、幫助中心 文字鏈接</description>
    <requiredCache>true</requiredCache>
    <parameters>
        <param label="公告1文字┏" formType="text" readonly="false" description="┓請輸入您'公告1'的顯示文字" ptype="text" name="gonggao_01">
            公告1：請在這里輸入您公告1的顯示文字！
        </param>
        <param label="公告1鏈接網址┗" formType="text" readonly="false" description="┛請輸入點擊'公告1'打開的網址" ptype="text" name="gonggao_02">
            http://www.taobao.com?1
        </param>
        <param label="公告2文字┏" formType="text" readonly="false" description="┓請輸入您'公告2'的顯示文字" ptype="text" name="gonggao_03">
            公告2：請在這里輸入您公告2的顯示文字！
        </param>
        <param label="公告2鏈接網址┗" formType="text" readonly="false" description="┛請輸入點擊'公告2'打開的網址" ptype="text" name="gonggao_04">
            http://www.taobao.com?2
        </param>
        <param label="公告3文字┏" formType="text" readonly="false" description="┓請輸入您'公告3'的顯示文字" ptype="text" name="gonggao_05">
            公告3：請在這里輸入您公告3的顯示文字！
        </param>
        <param label="公告3鏈接網址┗" formType="text" readonly="false" description="┛請輸入點擊'公告3'打開的網址" ptype="text" name="gonggao_06">
            http://www.taobao.com?3
        </param>
        <param label="幫助中心鏈接網址" formType="text" readonly="false" description="請輸入點擊'幫助中心'打開的網址" ptype="text" name="gonggao_07">
            http://service.taobao.com/support/help.htm
        </param>
        <param label="請選擇鏈接打開方式" formType="select" readonly="false" description="默認為新窗口打開" ptype="text" name="gonggao_08">
            <option value="_blank">_blank</option>
            <option value="_parent">_parent</option>
            <option value="_self">_self</option>
            <option value="_top">_top</option>
        </param>
    </parameters>
</module>

功能還不少，呵呵，這個大家最近自己對照的寫一下，這樣就知道，同樣的代碼，自己寫會出什么錯，這樣就比較深刻

好了也說了很多了，我們下面開始混編吧，代碼如下：

<div class="box J_TBox" <?php echo $_MODULE_TOOLBAR ?>>
	
	<div class="gonggao"><!--在外面嵌套一個div-->
		
        <!--公告、幫助-->
        <div class="gonggao01">
        
            <ul>
                <li class="left">
	                <div  class="J_TWidget scroll-news" data-widget-type="Slide" 
data-widget-config="{'contentCls':'news-items','hasTriggers':false,'effect':'scrolly','easing':'easeOutStrong','interval':3,'duration':0.2}">
                        <ul class="news-items">
                            <li><a href="<? echo $_MODULE[gonggao_02]?>" target="<? echo $_MODULE[gonggao_08]?>"><? echo $_MODULE[gonggao_01]?></a></li>
                            <li><a href="<? echo $_MODULE[gonggao_04]?>" target="<? echo $_MODULE[gonggao_08]?>"><? echo $_MODULE[gonggao_03]?></a></li>
                            <li><a href="<? echo $_MODULE[gonggao_06]?>" target="<? echo $_MODULE[gonggao_08]?>"><? echo $_MODULE[gonggao_05]?></a></li>
                        </ul>
                    </div>
                </li>
            			
                <li class="right">
                    <a href="<? echo $_MODULE[gonggao_07]?>" target="<? echo $_MODULE[gonggao_08]?>"><img src="assets/images/gonggao/ico3.gif" />幫助中心</a>
                    <a class="J_TokenSign"  href="<?php echo $uriManager->favoriteLink(); ?>" target="_blank"><img src="assets/images/gonggao/ico4.gif" />收藏本店</a>
                    <a href="<?php echo'http://shuo.taobao.com/microshop/front.htm?shopId='. $_shop->id .'&follow=true&tracelog=fromtb25' ?>" target="_blank"><img src="assets/images/gonggao/ico2.gif" />關注本店</a>
                    <a href="<?php echo'http://msp.taobao.com/popup/sendsms.htm?sprefer=sypj18&shopId='. $_shop->id .' ' ?>" target="_blank"><img src="assets/images/gonggao/ico5.gif" />手機收藏</a>
               </li>
            </ul>
        		
        </div>
        	
    </div>
    	
</div>

 看到上面的代碼了吧，這個就是我們用到的第一個簡單的效果，卡盤效果3，呵呵，參數講的每一多大意思，主要還是要自己去看去聯系，當然里面還有很多想幫助中心，收藏本店這里的代碼，我們要去看官方的文檔，這里也就不說了，注意我們這里的收藏本店的<a>標簽中叫了一個class="J_TokenSign"的樣式（作用是:這個用戶點擊收藏，直接就可以收藏，否則會彈出一個頁面，讓用戶選擇  {確定收藏}還是{取消}，多了這么一個class是你、你會選哪個？）。

============================================================================

ps.這里的導航還是很簡單的，當然下面一節，我們將會說到一個彈出下拉導航，同時也是用了官方的效果的，呵呵，這里我就先不錯了，等下節在說。

對了還忘了上傳效果圖：

=============================================================================================

所用到的素材

店招部分：

 

公告素材：