本文转自：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
$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
;}
.gonggao
01
{
width
:
950px
;
height
:
30px
;
margin
:
0
auto
;}
.gonggao
01
ul li{
line-height
:
30px
;}
.gonggao
01
ul li a{
color
:
#4e4e4e
;}
.gonggao
01
ul li a:hover{
color
:
#ff8808
;}
.gonggao
01
ul li.
left
{
width
:
500px
;
background
:
url
(../images/gonggao/ico
1
.gif)
no-repeat
5px
center
;
padding-left
:
20px
;
float
:
left
;}
.gonggao
01
ul li.
left
.scroll-news {
height
:
30px
;
overflow
:
hidden
; }
.gonggao
01
ul li.
left
.scroll-news a {
color
:
#ff8808
; }
.gonggao
01
ul li.
right
{
width
:
420px
;
text-align
:
right
;
line-height
:
30px
;
float
:
left
;
_padding-top
:
6px
;
padding-right
:
10px
;}
.gonggao
01
ul li.
right
img{
margin
:
0
4px
0
8px
;
vertical-align
:
middle
;}
.gonggao
01
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.这里的导航还是很简单的，当然下面一节，我们将会说到一个弹出下拉导航，同时也是用了官方的效果的，呵呵，这里我就先不错了，等下节在说。
对了还忘了上传效果图：
=============================================================================================
所用到的素材
店招部分：
公告素材：
70
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
