上一节,我们说到,如何修改了淘宝客网站首页的排版,使得页面更加清晰,如果对上一节不是很了解的话,请移步到上一章节中,如果有什么问题或者想交流的,欢迎在下方进行讨论,我有时间会立刻回复大家的。
我们这个webapp系统是基于PHP+mysql+MUI环境开发,如果不清楚如何搭建,欢迎留意咨询或者观看之前的文章,那么我今天要为大家讲解的是如何在首页添加分类按钮,并弹出我们的产品分类,实现效果如下:
这里,我使用MUI的Popover控件来实现这个功能,首先,我们需要添加css文件,控制popover的高度和位置等,具体CSS代码如下:
<style type=”text/css”>
#topPopover{
position:fixed;
top:16px;
right:6px;
}
#topPopover.mui-popover-arrow{
left:auto;
right:6px;
}
.mui-popover{
height:600px;
}
</style>
接着,我们需要放置popover的代码,这里,我们需要把这段代码放置到</body>上方就好
<div id=”topPopover” class=”mui-popover”>
<div class=”mui-popover-arrow”></div>
<div class=”mui-scroll-wrapper”>
<div class=”mui-scroll”>
<ul class=”mui-table-view”>
<li class=”mui-table-view-cell”>
<a href=”#”>
女装尖货
</a>
</li>
<li class=”mui-table-view-cell”>
<a href=”#”>
母婴热推
</a>
</li>
<li class=”mui-table-view-cell”>
<a href=”#”>
高佣活动
</a>
</li>
<li class=”mui-table-view-cell”>
<a href=”#”>
ifashion
</a>
</li>
<li class=”mui-table-view-cell”>
<a href=”#”>
亲宝贝
</a>
</li>
<li class=”mui-table-view-cell”>
<a href=”#”>
淘宝汇吃
</a>
</li>
<li class=”mui-table-view-cell”>
<a href=”#”>
潮电街
</a>
</li>
<li class=”mui-table-view-cell”>
<a href=”#”>
极有家
</a>
</li>
<li class=”mui-table-view-cell”>
<a href=”#”>
酷动城
</a>
</li>
<li class=”mui-table-view-cell”>
<a href=”#”>
淘宝DIY
</a>
</li>
<li class=”mui-table-view-cell”>
<a href=”#”>
超值9块9
</a>
</li>
<li class=”mui-table-view-cell”>
<a href=”#”>
20元封顶
</a>
</li>
<li class=”mui-table-view-cell”>
<a href=”#”>
特价好货
</a>
</li>
</ul>
</div>
</div>
</div>
添加代码之后,我们需要一个响应的按钮,我们把它放在首页右上角那里,其中下方的黑体字就是我们的点击事件,然后弹出分类
<header class=”mui-bar mui-bar-nav”>
<label class=”mui-btn mui-btn-royal mui-btn-link mui-btn-info”>一点热</label>
<div class=”mui-title”>
<input type=”search” class=”mui-input-clear” placeholder=”查询商品”>
</div>
<a id=”menu” class=”mui-action-menu mui-icon mui-icon-bars mui-pull-right” href=”#topPopover”></a>
</header>
那么这里,我们就实现了我们的功能了,效果如下:
这里,我们已经把分类的按钮做好了,但是由于我们的产品分类没有做好,所以暂时还没有做这个按钮的点击事件,欢迎继续关注我的头条号:一点热,如果有什么问题,欢迎留言咨询,我看到之后会第一时间回复大家的。也欢迎收藏与转发,如果需要转载到其他网站,请与我联系,yeehot.com,如果有什么意见或者想法欢迎在下方留言
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至827202335@qq.com 举报,一经查实,本站将立刻删除。文章链接:https://www.eztwang.com/dongtai/152536.html