zoukankan      html  css  js  c++  java
  • [转]淘宝sdk——入门实战之header.php制作(二)

    本文转自: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="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>
    复制代码

    功能还不少,呵呵,这个大家最近自己对照的写一下,这样就知道,同样的代码,自己写会出什么错,这样就比较深刻

    好了也说了很多了,我们下面开始混编吧,代码如下:

    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
    32
    <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.这里的导航还是很简单的,当然下面一节,我们将会说到一个弹出下拉导航,同时也是用了官方的效果的,呵呵,这里我就先不错了,等下节在说。

    对了还忘了上传效果图:

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

    所用到的素材

    店招部分:

    公告素材:

  • 相关阅读:
    List<Object> 查询解析优化
    hibernate 中 query.list()的优化
    移动端屏幕宽度自适应原理及实现
    js获取用户当前地理位置(省、市、经纬度)
    mescroll.js简单的上拉加载、下拉刷新插件,带完整注释
    Web前端性能优化总结——如何提高网页加载速度
    浏览器渲染页面的原理及流程
    优酷1080p的kux格式文件怎么转换为MP4格式?
    js处理文章详情页点击量统计
    plupload上传视频插件jQuery+php
  • 原文地址:https://www.cnblogs.com/freeliver54/p/2837956.html
Copyright © 2011-2022 走看看