標簽的嵌套用法,調用聚合數據 · 齊博CMS之X1：完全自學手冊

齊博標簽非常強大,可以讓不懂程序的你,輕松就能實現所見即所得. 下面跟大家講解一下,最復雜的運用, 同時使用了union 動態變量參數與分頁處理標簽比如下面這張圖,不僅僅想調用圈子,還想同時調用每個圈子里邊的貼子, 當然,你還可以更變態的,同時調用圈子的圖片或其它更多的東西都是完全可以的. 更變態的做法,你還可以調用跟貼子相關聯的其它數據,也是可以的. 按照傳統寫PHP代碼的處理方法,同時獲取,那數據量一大,肯定會卡死. 而在這里,這切,都是通過異步獲取數據,所以你完全不用擔心效率的問題. 每一塊都是單獨的加載數據,也不影響用戶體驗. ![](https://box.kancloud.cn/099b0226605c1f334252a7df6e0de0ae_575x532.png) 實現效果圖如下,點擊可以查看大圖 [![](https://box.kancloud.cn/6ba16c6a091098e56ffadff2fa123b41_1470x853.png)](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); } }); } ~~~ ### 注意,以上是對圈子的講解.同樣的道理,你可以用在其它地方相關聯的數據調用.比較調取用戶數據.