publiccms实现多层级选项卡效果

简介: publiccms实现多层级选项卡效果


前言

距离上次更新已经好久了~最近心有余而力不足。。

最近在学习freammarker标签,算是比较老的技术了,白天写,晚上做梦都在写,不吐槽了,反正就是真难用啊,语法还复杂。。

刚刚实现了个多级选项卡的效果,框架使用的是publiccms,不得不说,这个publiccms刚开始用的时候,让你有一万种放弃他的理由,为什么?因为太灵活了,灵活的有点乱了都。不过当你用熟练了之后,发现这个玩意还是挺好用的,既方便又省事,唯一一点不足的就是,内部标签使用的是freammarker……

效果吐下:

实现思路

本来我想用页面片段的方式来实现,后来想了想,页面片段实现的话不灵活,不方便后期维护,但是暂时页面片段是用的最熟练的,换别的方式势必会费脑子不说,还有可能耽误后面的进度,得现学现研究,思虑再三,决定还是!!!

想要进步,就不能驻足不前,永远都停留在现在的阶段上。

最后决定用分类来实现,将核心企业、股东单位、参股企业以及协作企业都写成可维护的分类,下面的华为、京东等写成内容,这样遍历分类和该分类下的内容即可,后期维护也比较省事。

创建分类

在每个分类下新建该分类的内容,如下所示:

实现代码

最后修改前台代码:(注释只有自己明白……)

<@_categoryList parentId=3>
                             <#assign counts=0> 
                                 <#list page.list as cate>
                <!-- 遍历分类下的内容 -->
  <div class="content" id="home${counts}" style="margin-top: 50px;">
                                <div class="xiangmu" style="width: 100%;margin-bottom: 50px;max-height: 900px;">
                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 mt-tabpage" js-tab="3"
                                        style="padding: 0;">
                                        <!-- 最上面的三个图片(京东、京东方、华为) -->
                                        <div class="mt-tabpage-title">
                                            <@_contentList categoryId=cate.id   pageSize=3>
                                    <#list page.list as b>
                                            <span
                                                class="col-lg-3 col-md-3 col-sm-3 col-xs-3 mt-tabpage-item mt-tabpage-item-cur tabSpan"
                                                style="height: 94px;border: 1px solid #F5F5F5;">
                                                <img src="${b.cover!}">
                                            </span>
                                            </#list>
                                    </@_contentList>
                                            <span class="mt-tabpage-item" style="display: none;"></span>
                                        </div>
                                        <div class="mt-tabpage-count">
                                            <ul class="mt-tabpage-cont__wrap">
                                                <!-- 京东的介绍 -->
                                                 <@_contentList categoryId=cate.id   pageSize=3>
                                    <#list page.list as b>
                                                <li class="mt-tabpage-item">
                                                    <div class="col-lg-12 col-md-7 col-sm-6 col-xs-5 gtr"
                                                        style="padding:0px 50px 0px 20px;">
                                                        ${(getContentAttribute(b.id).text?no_esc)!}
                                                    <div class="col-lg-0 col-md-0 col-sm-0 col-xs-3"
                                                        style="padding: 0;opacity: 0;">0</div>
                                                </li>
                                                </#list>
                                    </@_contentList>
                                                <li class="mt-tabpage-item"></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
         
<span></span>
 <#assign counts=counts+1> 
                                </#list>
                            </@_categoryList>
                           
                        </@_categoryList>

好了,麻烦的地方就是fremmarker语法,其他的都还行。

相关文章
|
监控 Linux API
实时监控文件系统:探索Python Watchdog库的神奇之处!
实时监控文件系统:探索Python Watchdog库的神奇之处!
514 3
|
Java 开发工具 Android开发
[√]windows java 版本管理
[√]windows java 版本管理
657 0
|
存储 Kubernetes 网络协议
【分布式技术专题】「OSS中间件系列」从0到1的介绍一下开源对象存储MinIO技术架构
【分布式技术专题】「OSS中间件系列」从0到1的介绍一下开源对象存储MinIO技术架构
2162 102
【分布式技术专题】「OSS中间件系列」从0到1的介绍一下开源对象存储MinIO技术架构
|
存储 监控 数据可视化
性能监控之JMeter分布式压测轻量日志解决方案
【8月更文挑战第11天】性能监控之JMeter分布式压测轻量日志解决方案
536 0
性能监控之JMeter分布式压测轻量日志解决方案
|
缓存 UED 网络架构
网站404该怎么解决
网站404错误通常表示用户尝试访问的网页不存在或无法找到
2650 0
|
存储 关系型数据库 MySQL
【MySQL技术内幕】5.5-Cardinality值
【MySQL技术内幕】5.5-Cardinality值
526 1
|
数据采集 JSON 数据可视化
【数据采集与可视化案例】基于python的国家级非物质文化遗产数据采集与可视化分析
本文介绍了一个基于Python的数据采集与可视化分析项目,该项目通过爬虫技术从国家级非物质文化遗产代表性项目名录网站获取数据,并运用数据清洗、转换、集成和规约等方法处理数据,最终利用pyecharts库进行多种数据可视化展示,包括分布地、类别、时间趋势等,以直观呈现非物质文化遗产的相关信息。
1731 0
|
存储 关系型数据库 数据库
OceanBase数据库常见问题之修改日志盘的数据存储路径后控件不生效如何解决
OceanBase 是一款由阿里巴巴集团研发的企业级分布式关系型数据库,它具有高可用、高性能、可水平扩展等特点。以下是OceanBase 数据库使用过程中可能遇到的一些常见问题及其解答的汇总,以帮助用户更好地理解和使用这款数据库产品。
|
存储 监控 数据可视化
linux日志分析工具与命令
在Linux中,日志分析常用命令行工具如`tail`(实时追踪日志)、`head`(显示日志开头)、`grep`(搜索关键词)、`awk`(复杂文本处理)、`sed`(文本替换)、`less`(分页查看)和`cat`(输出内容)。此外,还有日志分析工具如Logwatch(自动分析邮件摘要)、rsyslog/syslog-ng(日志收集)、Graylog(集中式管理)、ELK Stack(日志收集、解析、存储和可视化)和Splunk(企业级日志管理)。这些工具帮助管理员监控系统、排查问题、进行安全审计并获取业务洞察。
1422 1
|
数据可视化 vr&ar Python
时间序列分析技巧(二):ARIMA模型建模步骤总结
时间序列分析技巧(二):ARIMA模型建模步骤总结