上一节，我们把淘宝客网站的页面根据屏幕大小来展示相应的产品数，如果对之前的文章不是很了解的话，可以关注我的头条号：一点热，进行阅读之前的文章，我们这个淘宝客系统是基于PHP+mysql+MUI环境开发，如果对环境安装不是很了解的话，可以自行了解一下，也可以给我留言
那么我们今天要讨论的是在我们首页添加我们的客服以及微信公众号，方便用户可以快速加入到我们的群组中去，我们把这个功能放在首页右上角去，有的朋友可能会问，之前这里不是分类菜单？嗯嗯，是的，由于考虑到这里的分类和下方的分类重复了，所以决定这里放置一个客服和群组的信息。整体效果如下
这里涉及的代码不是很多，不过由于菜单这里我们上一节是固定写好的，不是很方便我们调节，那么我今天把他放到数据库里面去，数据库的SQL语句如下
SET NAMES utf8;
SET FOREIGN_KEY_CHECKS = 0;
-- ----------------------------
-- Table structure for `yeehot_tbk_group`
-- ----------------------------
DROP TABLE IF EXISTS `yeehot_tbk_group`;
CREATE TABLE `yeehot_tbk_group` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`title` varchar(255) NOT NULL,
`img` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;
-- ----------------------------
-- Records of `yeehot_tbk_group`
-- ----------------------------
BEGIN;
INSERT INTO `yeehot_tbk_group` VALUES ('1', '官方客服:414993367', 'img;), ('2', '官方网站:一点热', 'img;), ('3', '微信公众号:科技', 'img;), ('4', '淘宝客1群:XXXXX', ''), ('5', '淘宝客2群:xxxx', '');
COMMIT;
SET FOREIGN_KEY_CHECKS = 1;
认真阅读的可能会发现里面有一个图片的属性，没错，这个是我测试的时候觉得可能有人认为用二维码呈现会会更好，这个就看个人喜好了，由于文章不能发表带二维码的，所以就不在这里展示了。不过还真的是占有太多的屏幕了，这里实现的代码我就不写出来了。
有了数据库数据后，我们就可以添加我们的弹出按钮了。
我们配置弹出按钮的css
<style type="text/css">
#topPopover{
position:fixed;
top:15px;
right:6px;
}
#{
left:auto;
right:6px;
}
.mui-popover{
height:250px;
}</style>
然后，在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">
<?php
$res1 = mysql_query("select * from yeehot_tbk_group order by id limit 10");
while ($row1 = mysql_fetch_array($res1)) {
echo" <li class='mui-table-view-cell' >";
echo $row1['title'];
echo" </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-personadd mui-pull-right" href="#topPopover"></a>
</header>
这样，我们就实现了我们的客服展示的功能了，我也把最新的功能放上网站供大家测试了，测试地址
那么今天讲到这里，欢迎继续关注我的头条号：一点热,如果有什么问题，欢迎留言咨询，我看到之后会第一时间回复大家的。也欢迎收藏与转发，如果需要转载到其他网站，请与我联系，yee，如果有什么意见或者想法欢迎在下方留言