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

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

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

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

新建模块、片区这样的我就不说了，我们先来写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>

看了这个，我们就知道我们要建立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>

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>

这个是一个比较简单一个的输出，官方文档中有这里信用评价，新品上架等链接的说明，参考说明即可

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

上面我们说了店招，下面我们来看看一个淘宝公告的制作，这里我们用到了效果，这个是一个比较简单的文字翻滚的效果（Slide卡盘-效果三），这里就不说明了，直接拿官方的改的

我们来看看gonggao01.php文件的静态html

<div class="box J_TBox" <?php echo $_MODULE_TOOLBAR ?>>

<div class="gonggao">

<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>

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 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>

看到上面的代码了吧，这个就是我们用到的第一个简单的效果，卡盘效果3，呵呵，参数讲的每一多大意思，主要还是要自己去看去联系，当然里面还有很多想帮助中心，收藏本店这里的代码，我们要去看官方的文档，这里也就不说了，注意我们这里的收藏本店的<a>标签中叫了一个class="J_TokenSign"的样式（作用是:这个用户点击收藏，直接就可以收藏，否则会弹出一个页面，让用户选择 {确定收藏}还是{取消}，多了这么一个class是你、你会选哪个？）。

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

ps.这里的导航还是很简单的，当然下面一节，我们将会说到一个弹出下拉导航，同时也是用了官方的效果的，呵呵，这里我就先不错了，等下节在说。

对了还忘了上传效果图：

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

所用到的素材

店招部分：

公告素材：

转载于:https://www.cnblogs.com/freeliver54/archive/2012/12/28/2837956.html

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

【13】淘宝sdk——入门实战之header.php制作（一）
在写这课前,我会写的比较详细,到后面就不会说的这么详细了,都是一笔带过,不浪费口水,后面没有看懂的,可以回来这里在看看,或是在下面留言说明下,呵呵... 这节课,我们讲的是最简单的header介绍,等 ...
【25】淘宝sdk——入门实战之宝贝详情页
宝贝详情页,我们用系统模块,注意我们一般情况下只要在detail_left.php和detail_right.php中写就可以了,不用在detail.php中写. detail_left.php页: ...
【20】淘宝sdk——入门实战之分类导航和店铺公告
有过了很久没有写了,现在淘宝sdk2.0都出来了,但是现在还是测试版,离正式版也进了,后面的我就简单点写,其实都是差不多的知识,注意看我的注释,嗨,本来是想慢慢的写,现在看来注定要烂尾了... 好了, ...
【24】淘宝sdk——入门实战之左右悬浮模块
这里的悬浮模块我们写在footer中,当然在写进去前,我们还要去控制台创建这2个模块 <div class="layout grid-m"><div class= ...
淘宝sdk学习笔记【淘宝装修】------索引
教程适用于v1.1.7版以下 [1]淘宝sdk装修入门引言 [2]认识淘宝sdk模板 [3]淘宝sdk的下载和安装 [4]熟悉淘宝sdk开发平台 [5]淘宝sdk本地安装后的目录结构介绍 [6]网店模 ...
【1】淘宝sdk装修入门引言
淘宝sdk开发者要具备的一些要求: [1]photoshop图像处理能力 [2]html常用标签的基础知识 [3]html+css布局的基础知识 [4]简单的php输出语句 [5]对淘宝装修的一些基本 ...
【9】了解淘宝sdk引入布局模块
上一节我们说了下淘宝提供给我们可布局的地方: 这一节我们说下淘宝sdk布局模块. 在我们开发网店的时候一般一个网店组成是:页面>框架>模块(>的意思的包含):这样我们就知道我们一般开 ...
PHP实现调用淘宝SDK开放接口返回天猫或淘宝商品详情
在淘宝开发平台申请到app key及app secret并在开放平台上的app tools在线测试成功以后,就可以在自己的项目中使用淘宝SDK来调用淘宝或天猫的商品详情了,包括标题.图片.价格等等所有 ...
淘宝新手入门视频教程哪里有？
虽然开淘宝店创业是很常见的方式,但是对于一些不了解互联网行业甚至不知道怎样操作电脑人来说,在网络上创业没有一个领路人是很难入门的,俗话说:师傅领进门,修行靠个人,我们淘宝创业也是需要先入门在扩展的,那 ...

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

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

最新文章

热门文章