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

下面跟大家讲解一下,最复杂的运用, 同时使用了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. 故障案例 | 一次慢SQL优化分析全过程

    欢迎来到 GreatSQL社区分享的MySQL技术文章,如有疑问或想学习的内容,可以在下方评论区留言,看到后会进行解答 GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. 客 ...

  2. 如何在CDH5上部署Dolphin Scheduler 1.3.1

    点击蓝色字关注! 本篇文章大概8440字,阅读时间大约20分钟 本文记录了在CDH5.16.2集群上集成Dolphin Scheduler 1.3.1的详细流程,特别注意一下MySQL数据库的连接串! ...

  3. Apache DolphinScheduler 迎来 2 位 PPMC

    经过 Apache DolphinScheduler PPMC 们的推荐和投票,我们高兴的宣布:Apache DolphinScheduler 迎来了 2 位 PPMC .他们是(github id) ...

  4. 从C过渡到C++——换一个视角深入数组[真的存在高效吗?](2)

    从C过渡到C++--换一个视角深入数组[真的存在高效吗?](2) C风格高效的数组遍历 在过渡到C++之前我还是想谈一谈如何书写高效的C的代码,这里的高效指的是C代码的高效,也就是在不开启编译器优化下 ...

  5. java方法---递归

    java方法递归 1.什么是递归 就是自己调用自己: 2.递归结构的两个部分 递归头:什么时候不调用自身方法.如果仅有头,将陷入死循环.递归体:什么时候需要调用自身方法.

  6. 第三十二篇:vue的响应式原理

    好家伙 什么是响应式?比较官方的回答: Vue.js 的核心包括一套"响应式系统". "响应式",是指当数据改变后,Vue 会通知到使用该数据的代码. 例如,视 ...

  7. rh358 004 bind反向,转发,主从,各种资源记录 unbound ansible部署bind unbound

    通过bind实现正向,反向,转发,主从,各种资源记录 7> 部署反向解析 从ip解析到fqdn vim /etc/named.conf zone "250.25.172.in-addr ...

  8. 餐饮行业SRM案例:方正璞华"采云链"携手和府捞面

    ​ 方正璞华在与和府捞面的项目中,帮助整合采购系统,系统化管理供应商,优化采购流程和数据分析,建立储备知识库. 项目背景 企业介绍 ◇ 和府捞面成立于2012年,是国内中式面食头部品牌.自2013年首 ...

  9. Java 中HashMap 详解

    本篇重点: 1.HashMap的存储结构 2.HashMap的put和get操作过程 3.HashMap的扩容 4.关于transient关键字 HashMap的存储结构 1. HashMap 总体是 ...

  10. Python数据科学手册-Numpy入门

    通过Python有效导入.存储和操作内存数据的技巧 数据来源:文档.图像.声音.数值等等,将所有的数据简单的看做数字数组 非常有助于 理解和处理数据 不管数据是何种形式,第一步都是 将这些数据转换成 ...