齐博x1标签实例:标签的嵌套用法,调用聚合数据
齐博标签非常强大,可以让不懂程序的你,轻松就能实现所见即所得.
下面跟大家讲解一下,最复杂的运用, 同时使用了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标签实例:标签的嵌套用法,调用聚合数据的更多相关文章
- 齐博x1文本代码标签的使用
文本标签虽然简单,但是使用的地方确实非常多的. {qb:tag name="XXXX" type="text"}推荐新闻{/qb:tag} 类似这种使用的频率是 ...
- 齐博x1内容评论标签的风格制作
评论的标签如下: {qb:comment name="xxxxx" rows='5'} HTML代码片段 {/qb:comment} 评论涉及到的元素有{posturl} 这个是代 ...
- 齐博x1动态改变标签调用不同频道的数据
标签默认需要设置标签参数 type 指定调用哪个频道的数据,比如下面的代码,需要默认指定商城的数据, {qb:tag name="qun_pcshow_shop001" type= ...
- 齐博x1当前URL标签
当前URL标签 {:get_url('location')} 当前URL的二维码标签 {:urls('index/qrcode/index')}?url={:urlencode(get_url('lo ...
- 齐博x1.3通用栏目名称及参数调用接口
对于全站的频道可以使用下面的方法取出相应的栏目名称及参数http://qb.net/index.php/cms/wxapp.sorts.html注意,只需要把qb.net换成你的域名,cms 换成其它 ...
- 齐博x1到底是怎么的存在?
齐博X1是齐博软件基于thinkphp5开发的内容管理系统,拓展性非常强,后台一键升级,后台提供丰富的频道模块云市插件市场.风格市场.钩子市场,所有都是一键在线安装. 系统已经对接好QQ.微信登录,同 ...
- 齐博X1到底是个什么鬼?
什么是齐博/齐博CMS之X1? 齐博X1是齐博软件基于thinkphp5开发的内容管理系统,拓展性非常强,后台一键升级,后台提供丰富的频道模块云市插件市场.风格市场.钩子市场,所有都是一键在线安装. ...
- 最近无聊搭建一个齐博X1的下载页面
https://layui.wanxiangsucai.com/ 用layui官方镜像站的模版 改了个齐博X1的下载页面 https://x1.wanxiangsucai.com/ 哈哈哈!!! 还有 ...
- 齐博x1齐博首创钩子的使用方法
齐博X1有两套钩子体系,第一套是基于TP思路设计的.跟外面的大同小异.现在重点讲一下第二套我们首创的使用方法. 首先说一下如何埋钩子,这个跟TP思路的钩子类似,就是在页面的任何地方加入如下代码即可如下 ...
随机推荐
- python包合集-cffi
一.cffi cffi是连接Python与c的桥梁,可实现在Python中调用c文件.cffi为c语言的外部接口,在Python中使用该接口可以实现在Python中使用外部c文件的数据结构及函数. 二 ...
- Python图像处理丨基于OpenCV和像素处理的图像灰度化处理
摘要:本篇文章讲解图像灰度化处理的知识,结合OpenCV调用cv2.cvtColor()函数实现图像灰度操作,使用像素处理方法对图像进行灰度化处理. 本文分享自华为云社区<[Python图像处理 ...
- 熔断器-Hystrix。。。之降级方法
与Feign的Fallback降级方法不同,这个hystrix降级方法是写在被调用方的 需要依赖: <dependency> <groupId>org.springframew ...
- 无情摆烂我竟是cv怪物第四周周末总结
无情摆烂我竟是cv怪物第四周周末总结 函数重要参数补充 1.*args 星号代表接收未被位置形参接收的额外的位置实参,无论有多少位置实参*args都可以将它全部接受 def func(*args): ...
- 未来的可再生能源电网!FREEDM 论文阅读
全文主旨[省时间快读] 背景: 论文标题:The Future Renewable Electric Energy Delivery and Management (FREEDM) System: T ...
- JavaScript 设计模式及代码实现——代理模式
代理模式 1 定义 为其他对象提供一种代理以控制对这个对象的访问 在某些情况下,一个对象不适合或者不能直接引用另一个对象,而代理对象可以在客户端和目标对象之间起到中介的作用. 2 应用举例 2.1 缓 ...
- Linux之firewalld防火墙规则
一, 什么是防火墙规则? 允许哪些服务端口被放行,怎么放行,及哪些服务端口被阻拦,如何阻拦的一组网络安全规则.支持ipv4和ipv6,且分为直接规则和富规则两种. 二, 如何管理firewalld 1 ...
- K8S name_namespace
Name 由于K8S内部,使用"资源"来定义每一种逻辑概念(功能),故没种"资源",都应该有自己的"名称" "资源"有 ...
- torch.meshgrid
1:https://blog.csdn.net/weixin_39504171/article/details/106356977 2: https://pytorch.org/docs/stable ...
- Windows DNS服务器的子网掩码排序
对于跨多个站点部署的应用服务,会在各个站点都有服务器,并且对应不同的IP地址.我们希望每个客户端访问就近的资源.这个时候可以启用Windows DNS服务器中的子网掩码排序(子网优先)netmask ...