您现在的位置是:首页 > cms教程 > PbootCMS教程PbootCMS教程

将pbootcms后台模型颜色的多选改成色块输出的方法

之瑶2024-08-29PbootCMS教程已有人查阅

导读用户有个需求,后台产品的模型有一个颜色多选,但是是文字,所以想输出色卡,后端和前端体现颜色。由于pb原本后台不带有这个功能,所以需要小小的二开。

用户有个需求,后台产品的模型有一个颜色多选,但是是文字,所以想输出色卡,后端和前端体现颜色。
由于pb原本后台不带有这个功能,所以需要小小的二开。
以下为操作步骤:
第一步,依次打开目录/APPs/admin/view/default/layui/layui.all.js
第二步打开layui.all.js文件
第三步,搜索下面代码找到
<span>"+n.tITle+"</span>
第四步:修改为下面的代码,然后保存
<span style=background:#"+n.title+">"+n.title+"</span>
第五步:去网站后台,全局配置,模型字段,颜色,修改,输入你要的色卡值,保存。
第六步:清理浏览器缓存,刷新页面查看效果,出现下图代表成功了一半。
第七步、前台输出(由于后台用了色卡代码,所以前端需要写颜色筛选样式),以官方默认的代码为例,原始效果如下。
修改代码如下:其实就是加了一个样式,录入了后台数值
{pboot:select field=ext_color}
<a href= "[select:link]" class="mb-3 btn {pboot:if('[select:value]'=='[select:current]')}btn-info{else}btn-light{/pboot:if}" style="background-color:#[select:value]">&nbsp;</a>
{/pboot:select}
也不算大型的二开,只是利用了JS调用数据库值然后输出的笨方法。原本色卡值的#字符是没有放在JS里的,是后台数值输出了#   例如#000,但是浏览器无法识别#所以转义了一串特殊字符,经过优化后,干脆#字符输出在了JS里,和前端HTML样式里,这样不管网址还是筛选值,都比较直观一点。

本文标签:

很赞哦! ()

相关源码

  • (自适应)居家生活日用品纸盘纸盒纸杯卫生纸巾生产厂家pbootcms模板为纸品生产企业打造的现代化展示平台,自动适应各种设备屏幕,确保浏览体验一致,完善的SEO功能,提升网站曝光度,基于PbootCMS构建,源码开放可定制。查看源码
  • (自适应响应式)瓷砖大理石装修建材类网站pbootcms模板html5模板本模板基于PbootCMS开发,针对瓷砖、大理石等建材行业特点进行优化设计。采用响应式布局技术,确保产品展示效果在不同设备上都能合理呈现。模板特别强化了石材纹理的视觉表现力,帮助建材企业更好地展示产品质感。查看源码
  • (响应式)轴承机械五金零件产品pbootcms落地推广单页源码下载为轴承、机械零件等工业产品打造的响应式单页模板,基于PbootCMS内核开发,助力企业快速构建专业级产品展示页面。模板采用工业风设计语言,突出产品参数与性能优势,适用于设备制造商、零部件供应商等B2B场景推广。查看源码
  • (自适应响应式)黑色LED显示屏户外广告屏网站源码下载这是一款基于PbootCMS内核开发的响应式网站模板,专门为LED显示屏及户外广告行业打造。模板适配各类显示设备,帮助企业快速搭建专业官网,展示产品与服务优势,有效提升品牌形象。查看源码
  • (自适应)电梯扶梯升降梯行业pbootcms企业网站模板(自适应手机版)响应式电梯扶梯类pbootcms模板 电梯生产企业绿色企业网站源码下载PbootCMS内核开发的网站模板,该模板适用于电梯、扶梯类等企业,查看源码
  • (自适应)大气办公用品耗材供应打印机产品维修网站模板下载基于PbootCMS系统开发的响应式网站模板,为营销技术博主、数字产品评测者设计。采用前沿的响应式技术,确保内容在手机端和桌面端都能获得较佳阅读体验,帮助用户高效展示技术文章和产品分析。查看源码
分享笔记 (共有 篇笔记)
验证码: