·设为首页收藏本站📧邮箱修改🎁免费下载专区📒收藏夹🎖️众筹悬赏👽聊天室
🔄最新发布📃文档资料库🆔加群看共享切换到窄版
立即注册
DZ插件网»🏠首页 › Discuz!交流与探讨 › Discuz!运营教程 › Theme Box › 实现亮剑在线聊天插件穿透Theme Box素材发布资源下载插 ...
返回列表 发布新帖

实现亮剑在线聊天插件穿透Theme Box素材发布资源下载插件里面使用在线客服加载的实现方法

255 5
发表于 2023-7-28 22:20:32 | 查看全部 阅读模式 | Chrome| Windows 10

马上注册，免费下载更多dz插件网资源。

您需要 登录 才可以下载或查看，没有账号？立即注册

×
实现亮剑在线聊天插件穿透Theme Box素材发布资源下载插件里面使用在线客服加载的实现方法：

最终效果：http://market.dz-x.net
实现亮剑在线聊天插件穿透Theme Box素材发布资源下载插件里面使用在线客服加载的实现方法 实现,亮剑,在线,在线聊天,聊天

Theme Box的素材发布资源下载插件比较封闭，要实现让亮剑在线聊天插件穿透在这个插件里面实现客服效果：


编辑：
/source/plugin/one_market/template/default/common/footer.php

也就是在 </body> 之前，
其上行添加：
  1. <script src="source/plugin/aljhtx/static/js/jquery-2.2.3.min.js" type="text/javascript" type="text/javascript" charset="utf-8"></script>
  2. <script>var jQuery=jQuery.noConflict();</script>


  5. <script src="source/plugin/aljhtx/static/js/layer/layer.js?20181220" type="text/javascript" type="text/javascript" charset="utf-8"></script>
  6. <style>
  7.     body .layui-layim-min {
  8.         border: 1px solid #D9D9D9;
  9.     }


  12.     .aljol-layui-layer-shade {
  13.         position: fixed;
  14.         _position: absolute;
  15.         pointer-events: auto;
  16.         -webkit-overflow-scrolling: touch;
  17.         margin: 0;
  18.         padding: 0;
  19.         top:auto;
  20.         left:auto;
  21.         bottom:0;
  22.         right:0;
  23.         background-color: #fff;
  24.         -webkit-background-clip: content;
  25.         border-radius: 2px;
  26.         box-shadow: 1px 1px 50px rgba(0,0,0,.3);
  27.         z-index: 5;
  28.     }
  29.     .layui-box, .layui-box * {
  30.         box-sizing: content-box;
  31.     }
  32.     .layui-layer-page .layui-layer-content {
  33.         position: relative;
  34.         overflow: auto;
  35.     }
  36.     .layui-layim-min .layui-layer-content {
  37.         margin: 0 5px;
  38.         padding: 5px 10px;
  39.         white-space: nowrap;
  40.     }
  41.     .layim-chat-list li, .layui-layim-min .layui-layer-content {
  42.         position: relative;
  43.         margin: 5px;
  44.         padding: 5px 30px 5px 5px;
  45.         line-height: 40px;
  46.         cursor: pointer;
  47.         border-radius: 3px;
  48.     }
  49.     .layim-chat-list li img, .layui-layim-min .layui-layer-content img {
  50.         width: 40px;
  51.         height: 40px;
  52.         border-radius: 100%;
  53.     }
  54.     .layim-chat-list li *, .layui-layim-min .layui-layer-content * {
  55.         display: inline-block;
  56.         *display: inline;
  57.         *zoom: 1;
  58.         vertical-align: top;
  59.         font-size: 14px;
  60.     }
  61.     .layui-layim-close .layui-layer-content span {
  62.         width: auto;
  63.         max-width: 120px;
  64.     }
  65.     .layim-chat-list li span, .layui-layim-min .layui-layer-content span {
  66.         width: 100px;
  67.         padding-left: 10px;
  68.         font-size: 16px;
  69.         white-space: nowrap;
  70.         overflow: hidden;
  71.         text-overflow: ellipsis;
  72.     }
  73.     .layui-layer-setwin {
  74.         position: absolute;
  75.         right: 15px;
  76.         *right: 0;
  77.         top: 15px;
  78.         font-size: 0;
  79.         line-height: initial;
  80.     }
  81.     .ajlol-order-numbers {
  82.         display: inline-block;
  83.         text-align: center;
  84.         position: absolute;
  85.         bottom: 17px;
  86.         background-color: #f23030;
  87.         height: 17px;
  88.         padding-left: 5px;
  89.         padding-right: 5px;
  90.         line-height: 17px;
  91.         font-style: normal;
  92.         border-radius: 15px;
  93.         right: 7px;
  94.         font-size: 9px;
  95.         color: #fff;
  96.         font-family: PingFangSC-Regular,Helvetica,"Droid Sans",Arial,sans-serif;
  97.         border:1px solid #fff
  98.     }
  99. </style>




  104. <div class="aljol-layui-layer-shade layui-layer-page layui-box layui-layim-min layui-layim-close" id="layui-layer5" type="page" times="5" showtime="0" contype="string">
  105.     <div id="layui-layim-close" class="layui-layer-content">
  106.         <img src="https://uc.dz-x.net/avatar.php?uid=1&size=small" />
  107.         <span>在线聊天</span>
  108.         <div class="aljol-newscount">
  109.             
  110.         </div>
  111.     </div>
  112.     <span class="layui-layer-setwin">


  115.     </span>
  116. </div>
  117. <script>
  118.     function open_aljol() {
  119.         layer.open({
  120.             type: 2
  121.             ,offset: 'rb'
  122.             ,title: '在线聊天'
  123.             ,area: ['414px', '80%']
  124.             ,content: 'plugin.php?id=aljol' //iframe的url
  125.             ,shade: 0 //不显示遮罩
  126.         });
  127.     }


  130.     OL = {
  131.         voice_aljol: function() {
  132.             var audio = document.createElement("audio");
  133.             audio.src = 'source/plugin/aljol/static/img/aljol.mp3';
  134.             audio.play();
  135.         },
  136.         newsMes_aljol:function () {
  137.             var url='plugin.php?id=aljol&act=newsnum&ajax=1';
  138.             jQuery.post(url,function(res){
  139.                 if(res!=null && res!='') {
  140.                     if(res.newscount>0){
  141.                         jQuery('.aljol-newscount').html('<i class="ajlol-order-numbers">'+res.newscount+'</i>');
  142.                     }else{
  143.                         jQuery('.aljol-newscount').html('');
  144.                     }
  145.                     
  146.                     if(res.newscnum>0){
  147.                         OL.voice_aljol();
  148.                     }
  149.                     
  150.                 }
  151.             },'json');
  152.         },
  153.         init:function () {
  154.             setInterval(function(){
  155.                 OL.newsMes_aljol();
  156.             },5000)
  157.         }
  158.     };
  159.     OL.init();
  160. </script>
复制代码



手机端添加：
编辑：/source/plugin/one_market/template/touch/default/common/footer.php
也就是在 </body> 之前，
其上行
游客，如果您要查看本帖隐藏内容请回复

然后保存后，再次刷新插件页面，即可正常加载亮剑在线聊天客服插件了~

最终效果演示：http://market.dz-x.net


由此衍生：任何插件的页面都可以加载亮剑这个在线聊天客服插件，如需实现，联系右侧QQ客服协助~


该教程所涉及的插件：
[Theme Box]素材发布资源下载 OSS存储+用户组打折+下载限速 (one_market)[更新支持DZ X3.5]
https://www.dz-x.net/t/5197/1/1.html
(出处: DZ插件网)

【亮剑】在线聊天 (aljol)
https://www.dz-x.net/t/1930/1/1.html
(出处: DZ插件网)


同类教程的更多扩展功能的应用案例：
在Theme Box的素材发布资源下载插件导航里面加上多国语言切换导航按钮并实现多种展现效果的方式
https://www.dz-x.net/t/60430/1/1.html
(出处: DZ插件网)

实现, 亮剑, 在线, 在线聊天, 聊天
收起回复
wendao 2024-2-5 11:03 IP：中国
回复
看错了，这个不是。我们操作的权限范围，没有在个人网站这一块。说的themebox的页面！
我要说一句
赞赏
一花一世界，一叶一追寻。一曲一场叹，一生为一人。
回复

使用道具 举报

相关帖子

评论5

manmanLv.1 发表于 2023-8-25 00:44:40 | 查看全部 | Edg | Windows 10
哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈
我要说一句 收起回复
回复 支持 反对

使用道具 举报

陈奈亚亚亚Lv.1 发表于 2023-8-25 20:17:31 | 查看全部 | Google Chrome | Windows 10
感谢分享
我要说一句 收起回复
回复

使用道具 举报

哈哈哈哈哈Lv.2 发表于 2024-1-3 11:45:22 | 查看全部 | Edg | Windows 10
亮剑在线聊天插件穿透Theme Box素材发布资源下
我要说一句 收起回复
回复 支持 反对

使用道具 举报

wendaoLv.2 发表于 2024-2-5 10:56:46 | 查看全部 | Firefox | Windows 10
太感谢了，有这样好的老师指导，我也是一下看看好不好用！
我要说一句 收起回复
传承国学文化
回复 支持 反对

使用道具 举报

返回列表 发布新帖

回复
 懒得打字嘛，点击右侧快捷回复【查看最新发布】   【应用商城享更多资源】
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们

关于我们 免责声明 应用市场 下载中心

服务支持

有问必答 优秀站点 常见问题 建站必看
投诉/建议联系

discuzaddons@vip.qq.com

未经授权禁止转载，复制和建立镜像，
如有违反，按照公告处理!!!
  • 联系QQ客服
  • 添加微信客服

联系DZ插件网微信客服|最近更新|Archiver|手机版|小黑屋|DZ插件网! ( 鄂ICP备20010621号-1 )|网站地图

您的IP:3.21.93.245,183.61.177.57,GMT+8, 2024-5-26 07:26 , Processed in 0.312088 second(s), 96 queries , Gzip On, Redis On.

Based on Discuz! W1.0 Licensed

© 2001-2024 Discuz! Team.

关灯 在本版发帖
扫一扫添加微信客服
 QQ客服返回顶部
快速回复 返回顶部 返回列表