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

下面跟大家讲解一下,最复杂的运用, 同时使用了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. 喜讯:“行走的文档” 当选 Apache DolphinScheduler Committer啦

    点击上方蓝字关注 Apache DolphinScheduler Apache DolphinScheduler(incubating),简称"DS", 中文名 "海豚调 ...

  2. 关于 CDH 环境中部署 Dolphinscheduler 出现 hive-jdbc 包冲突的解决办法

    目前社区小伙伴经常反映在 cdh 环境中部署 Dolphinscheduler 出现 hive 包冲突的问题,报错日志信息如下: [WARN] 2020-04-29 09:55:30.815 org. ...

  3. 八个解决你80%需求的CSS动画库

    八个解决你80%需求的CSS动画库 点击打开视频讲解 在学习和工作的过程中,我们总免不了要写各种各样的css动画,给某个部分添加动画效果,如果觉得自己写的动画效果单一乏味,不妨试试这8个CSS动画库, ...

  4. Linux 05 口令字文件

    参考源 https://www.bilibili.com/video/BV187411y7hF?spm_id_from=333.999.0.0 版本 本文章基于 CentOS 7.6 概述 由于 /e ...

  5. 面试突击78:@Autowired 和 @Resource 有什么区别?

    @Autowired 和 @Resource 都是 Spring/Spring Boot 项目中,用来进行依赖注入的注解.它们都提供了将依赖对象注入到当前对象的功能,但二者却有众多不同,并且这也是常见 ...

  6. 第二十二篇:有关插槽solt的使用

    1.什么是插槽? 插槽就是子组件中的提供给父组件使用的一个占位符,用<slot></slot> 表示, 父组件可以在这个占位符中填充任何模板代码,如 HTML.组件等,填充的内 ...

  7. KingbaseES R6 集群在线删除standby节点

      案例环境: 操作系统:   [root@node1 ~]# cat /etc/centos-releaseCentOS Linux release 7.2.1511 (Core) ​数据库:tes ...

  8. Zookeeper+dubbo+Springboot集成总结

    1. 尽量用XML 集成,这也的Dubbo官方推荐的集成方式 自己在使用注解集成过程中发现有坑:Springmvc包扫描和dubbo包扫描冲突,导致消费端一直拿不到代理对象(null),非常蛋疼,所以 ...

  9. 后端程序员实现一个IP归属地的小程序

    在日常开发中,后端主要提供数据以及处理业务逻辑,前端主要提供页面布局以及数据展示.后端程序员对于页面布局接触比较少,但是小程序有完善的文档说明.页面布局也相对简单,实现起来相对简单一些.而且小程序相对 ...

  10. Windows DNS服务器策略

    Windows 2016开始微软在Windows服务器中引入了针对DNS服务器的策略.可以方便灵活的控制DNS服务器响应客户端的请求.这里举个例子,阻止某个网段的DNS查询.思路是这样的,定义一个网段 ...