• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号
登陆 注册
描述文字

[转]淘宝sdk——入门实战之header.php制作（二）

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文转自：http://www.cnblogs.com/huige728/archive/2012/05/15/2501532.html

在上一节中我们知道了怎么写一个简单的导航（自定义店招+系统店招）的这样的组合，今天我们来个全自定义的导航，呵呵

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

新建模块、片区这样的我就不说了，我们先来写header.php，从这个php文件中知道我们要建立那里模块

?
1
2
3
4
5
6
7
8
9
10
11
<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，代码如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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代码如下：

?
1
2
3
4
5
6
7
8
9
.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静态文件进行混编了，呵呵，代码如下

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<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样式代码如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
/*头部公告*/
.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 
                       
                    
                    
 
                      





鲜花




握手




雷人




路过




鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
php去除数组中的空值发布时间：2022-07-10
下一篇：
Debian/Ubuntu源码编译安装PHP--支持FastCGI发布时间：2022-07-10
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap