齐博标签非常强大,可以让不懂程序的你,轻松就能实现所见即所得.

下面跟大家讲解一下,最复杂的运用, 同时使用了union 动态变量参数 与 分页处理标签

比如下面这张图,不仅仅想调用圈子,还想同时调用每个圈子里边的贴子, 当然,你还可以更变态的,同时调用圈子的图片或其它更多的东西都是完全可以的.

更变态的做法,你还可以调用跟贴子相关联的其它数据,也是可以的.

按照传统写PHP代码的处理方法,同时获取,那数据量一大,肯定会卡死.

而在这里,这切,都是通过异步获取数据,所以你完全不用担心效率的问题. 每一块都是单独的加载数据,也不影响用户体验.

实现效果图如下,点击可以查看大图

代码如下:

<div class="pc_qun">
{qb:tag name="pc_index_showquntest1" type="qun" rows="6" order="view" by="desc"}
<h2>圈子名称: <a href="{$rs.url}" target="_blank">{$rs.title}</a></h2> <div class="listbbs" data-id="{$rs.id}" style="boder:1px solid #ccc;margin:10px;"></div> {/qb:tag}
</div> <div class="list_label_bbs" style="display:none;">
{qb:tag name="label_listbbs" type="bbs" union="ext_id" rows="6"order="id" by="desc"}
<a href="{$rs.url}" target="_blank">{$rs.title}</a><br>
{/qb:tag}
</div> <script type="text/javascript">
$(document).ready(function () {
$(".pc_qun .listbbs").each(function(){
show_qun_bbs($(this));
});
}); function show_qun_bbs(that){
var page = 1;
var id = that.data("id");
$.get("{qb:url name='label_listbbs' /}" + page + "&ext_id="+id , function(res){
if(res.code==0){
that.html(res.data);
}
});
}
</script>

第一段代码,就是页面布局代码

<div class="pc_qun">
{qb:tag name="pc_index_showquntest1" type="qun" rows="6" order="view" by="desc"}
<h2>圈子名称: <a href="{$rs.url}" target="_blank">{$rs.title}</a></h2> <div class="listbbs" data-id="{$rs.id}" style="boder:1px solid #ccc;margin:10px;"></div> {/qb:tag}
</div>

其中

<div class="listbbs" data-id="{$rs.id}" style="boder:1px solid #ccc;margin:10px;"></div>

这个就是关键之处, 这里就是显示更多贴子的. 你可以更变态的做法, 还可以在他下面一行添加类似的数据,显示相关联的图片 或者是其它更多的相关联数据.

抛开这一行,其它都是之前讲的标签没什么区别.


这里有两个关键的class类,大家不要忽略 class="pc_qun" 与 class="listbbs" 后面的JQ查找元素要用到

另一个关键点就是data-id="{$rs.id}" 这个就是后面的JQ要用到,去取哪个圈子ID的贴子数据.

所以上面这三个关键点,就是他跟普通标签不一样的地方.这里特别要使用到的.


接着再讲解另一段代码,
截图中多了 class="list_label_bbs" 这个类,其实没用到,下面的代码,就省去讲解这个类了

<div style="display:none;">
{qb:tag name="label_listbbs" type="bbs" union="ext_id" rows="6"order="id" by="desc"}
<a href="{$rs.url}" target="_blank">{$rs.title}</a><br>
{/qb:tag}
</div>

这个跟普通标签有一点小区别,主要体现:
其中要包含一个隐藏DIV元素style="display:none;" (题外话:这个是方便你不用写JS模板,同时也方便SEO, 当然更关键的是为了后面的标签数据对应)
也就是说这里的标签必须是隐藏的.因为这里并不是真实用到的数据.只是用这个模子而已.

这里用到的标签名 name="label_listbbs" 跟下面的标签分页 变量名是对应的.必须一样 {qb:url name='label_listbbs' /}

这一段代码,你可以理解为就跟之前说的获取显示更多分页数据,没太大区别.

这里的关键之处,就是使用了动态变量参数 union="ext_id" 这个就是关键中的关键

其它地方,对照JS就不难理解了


这段话的意思,就是查找 圈子容器里pc_qun 里边的 listbbs元素 ,然后执行一个函数 show_qun_bbs 显示贴子. 这些都是前端JS相关的东西.

$(document).ready(function () {
$(".pc_qun .listbbs").each(function(){
show_qun_bbs($(this));
});
});

下面这段,其实跟之前讲解的标签加载更多分页内容没什么区别的. 关键就是有一个动态参数ext_id= 获取到的是动态变量, 另外分页就总是取第一页, 你可以改一下JS,就可以显示更多页的数据.

function show_qun_bbs(that){
var page = 1;
var id = that.data("id");
$.get("{qb:url name='label_listbbs' /}" + page + "&ext_id="+id , function(res){
if(res.code==0){
that.html(res.data);
}
});
}

复制

注意,以上是对圈子的讲解.同样的道理,你可以用在其它地方相关联的数据调用.比较调取用户数据.

齐博x1标签实例:标签的嵌套用法,调用聚合数据的更多相关文章

  1. 齐博x1文本代码标签的使用

    文本标签虽然简单,但是使用的地方确实非常多的. {qb:tag name="XXXX" type="text"}推荐新闻{/qb:tag} 类似这种使用的频率是 ...

  2. 齐博x1内容评论标签的风格制作

    评论的标签如下: {qb:comment name="xxxxx" rows='5'} HTML代码片段 {/qb:comment} 评论涉及到的元素有{posturl} 这个是代 ...

  3. 齐博x1动态改变标签调用不同频道的数据

    标签默认需要设置标签参数 type 指定调用哪个频道的数据,比如下面的代码,需要默认指定商城的数据, {qb:tag name="qun_pcshow_shop001" type= ...

  4. 齐博x1当前URL标签

    当前URL标签 {:get_url('location')} 当前URL的二维码标签 {:urls('index/qrcode/index')}?url={:urlencode(get_url('lo ...

  5. 齐博x1.3通用栏目名称及参数调用接口

    对于全站的频道可以使用下面的方法取出相应的栏目名称及参数http://qb.net/index.php/cms/wxapp.sorts.html注意,只需要把qb.net换成你的域名,cms 换成其它 ...

  6. 齐博x1到底是怎么的存在?

    齐博X1是齐博软件基于thinkphp5开发的内容管理系统,拓展性非常强,后台一键升级,后台提供丰富的频道模块云市插件市场.风格市场.钩子市场,所有都是一键在线安装. 系统已经对接好QQ.微信登录,同 ...

  7. 齐博X1到底是个什么鬼?

    什么是齐博/齐博CMS之X1? 齐博X1是齐博软件基于thinkphp5开发的内容管理系统,拓展性非常强,后台一键升级,后台提供丰富的频道模块云市插件市场.风格市场.钩子市场,所有都是一键在线安装. ...

  8. 最近无聊搭建一个齐博X1的下载页面

    https://layui.wanxiangsucai.com/ 用layui官方镜像站的模版 改了个齐博X1的下载页面 https://x1.wanxiangsucai.com/ 哈哈哈!!! 还有 ...

  9. 齐博x1齐博首创钩子的使用方法

    齐博X1有两套钩子体系,第一套是基于TP思路设计的.跟外面的大同小异.现在重点讲一下第二套我们首创的使用方法. 首先说一下如何埋钩子,这个跟TP思路的钩子类似,就是在页面的任何地方加入如下代码即可如下 ...

随机推荐

  1. python包合集-cffi

    一.cffi cffi是连接Python与c的桥梁,可实现在Python中调用c文件.cffi为c语言的外部接口,在Python中使用该接口可以实现在Python中使用外部c文件的数据结构及函数. 二 ...

  2. Python图像处理丨基于OpenCV和像素处理的图像灰度化处理

    摘要:本篇文章讲解图像灰度化处理的知识,结合OpenCV调用cv2.cvtColor()函数实现图像灰度操作,使用像素处理方法对图像进行灰度化处理. 本文分享自华为云社区<[Python图像处理 ...

  3. 熔断器-Hystrix。。。之降级方法

    与Feign的Fallback降级方法不同,这个hystrix降级方法是写在被调用方的 需要依赖: <dependency> <groupId>org.springframew ...

  4. 无情摆烂我竟是cv怪物第四周周末总结

    无情摆烂我竟是cv怪物第四周周末总结 函数重要参数补充 1.*args 星号代表接收未被位置形参接收的额外的位置实参,无论有多少位置实参*args都可以将它全部接受 def func(*args): ...

  5. 未来的可再生能源电网!FREEDM 论文阅读

    全文主旨[省时间快读] 背景: 论文标题:The Future Renewable Electric Energy Delivery and Management (FREEDM) System: T ...

  6. JavaScript 设计模式及代码实现——代理模式

    代理模式 1 定义 为其他对象提供一种代理以控制对这个对象的访问 在某些情况下,一个对象不适合或者不能直接引用另一个对象,而代理对象可以在客户端和目标对象之间起到中介的作用. 2 应用举例 2.1 缓 ...

  7. Linux之firewalld防火墙规则

    一, 什么是防火墙规则? 允许哪些服务端口被放行,怎么放行,及哪些服务端口被阻拦,如何阻拦的一组网络安全规则.支持ipv4和ipv6,且分为直接规则和富规则两种. 二, 如何管理firewalld 1 ...

  8. K8S name_namespace

    Name 由于K8S内部,使用"资源"来定义每一种逻辑概念(功能),故没种"资源",都应该有自己的"名称" "资源"有 ...

  9. torch.meshgrid

    1:https://blog.csdn.net/weixin_39504171/article/details/106356977 2: https://pytorch.org/docs/stable ...

  10. Windows DNS服务器的子网掩码排序

    对于跨多个站点部署的应用服务,会在各个站点都有服务器,并且对应不同的IP地址.我们希望每个客户端访问就近的资源.这个时候可以启用Windows DNS服务器中的子网掩码排序(子网优先)netmask ...