齐博标签非常强大,可以让不懂程序的你,轻松就能实现所见即所得. 下面跟大家讲解一下,最复杂的运用, 同时使用了union 动态变量参数 与 分页处理标签 比如下面这张图,不仅仅想调用圈子,还想同时调用每个圈子里边的贴子, 当然,你还可以更变态的,同时调用圈子的图片或其它更多的东西都是完全可以的. 更变态的做法,你还可以调用跟贴子相关联的其它数据,也是可以的. 按照传统写PHP代码的处理方法,同时获取,那数据量一大,肯定会卡死. 而在这里,这切,都是通过异步获取数据,所以你完全不用担心效率的问题. 每一块都是单独的加载数据,也不影响用户体验.  实现效果图如下,点击可以查看大图 [](https://box.kancloud.cn/6ba16c6a091098e56ffadff2fa123b41_1470x853.png) 代码如下: ~~~ <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); } }); } ~~~ ### 注意,以上是对圈子的讲解.同样的道理,你可以用在其它地方相关联的数据调用.比较调取用户数据.