使用abp modulezero自带那个后台框架发现一个操蛋的问题,所有的select和checkbox都被改成div模拟的,虽然比原生美观,但有时候真的很难用。

比如说要用select做一个联动菜单,或者用js调整select的选中值、checkbox的选中状态,模拟的那个不能跟随改变,十分操蛋。

还有一个问题,这套框架默认把所有的checkbox移到一个看不见的地方,然后原地模拟出一个checkbox来,结果这个功能导致其他插件上的checkbox也消失了,比如UEditor:

上面的是正常效果,下面的是在abp modulezero中使用ueditor的效果,checkbox不见了。

解决方案:

Checkbox

查看后台框架的样式表:materialize.css

发现一段

Remove default checkbox的代码,他把所有的checkbox都移位了,注释掉这段代码,然后加了一个form-simulation的样式表,用来表示是模拟的,以后凡是需要影藏原生的显示模拟的就在原生checkbox上加上class="form-simulation"。
/* Remove default checkbox */
/*[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
left: -9999px;
opacity: 0;
}*/
.form-simulation {
position: absolute;
left: -9999px;
opacity:;
}

使用方法:

如果要使用模拟checkbox, 每个checkbox都要有一个label, label的id要和checkbox的id一一对应, 如果class上没有加 form-simulation 就会显示一个模拟的和一个原生的,加了就影藏掉原生的只保留模拟的。

select

分析发现/js/admin.js里面有这一段代码:

$.AdminBSB.select = {
activate: function () {
if ($.fn.selectpicker) { $('select:not(.ms)').selectpicker(); }
}
}

它的意思是没有包含ms样式表的select就进行模拟。

select根据自己的需求,如果要使用模拟的,默认所有select都是模拟的,如果想用原生的,就在select的class加上ms这个样式表, 框架就不会自动模拟了。

这个问题也是困扰了我很久,当时一个网站的后台功能都快做完了发现这个问题,又苦于找不到解决方案,最后只能把整个后台框架给换成了AdminLTE,换完了之后过了几天突然灵关一闪,默认框架肯定是遍历了所有的原生组件进行了隐藏,所以找到代码应该就能解决,于是仔细分析了代码果然找到了解决方案,现在贴出来希望能帮助有缘人吧,毕竟现在使用abp框架的人也不算多。

ABP ModuleZero后台框架materialize禁止模拟select和checkbox的更多相关文章

  1. EasyUI+MVC-搭建后台框架

    一.EasyUI简介: jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面. 官方网站:h ...

  2. 联合县城市,采用ajax,而使用ul模拟select下拉

    接待处代码 js //采用jquery展示鼠标放到省ul下拉显示 $("#province").hover(function(){                          ...

  3. ABP module-zero +AdminLTE+Bootstrap Table+jQuery权限管理系统第十二节--小结,Bootstrap Table之角色管理

    返回总目录:ABP+AdminLTE+Bootstrap Table权限管理系统一期 很多人说ABP不适合高并发大型,有一定的道理,但是我觉得还是可以的,就看架构师的能力了,哈哈,我之前公司就是ABP ...

  4. Spring Boot(5)一个极简且完整的后台框架

    https://blog.csdn.net/daleiwang/article/details/75007588 Spring Boot(5)一个极简且完整的后台框架 2017年07月12日 11:3 ...

  5. 第三百三十三节,web爬虫讲解2—Scrapy框架爬虫—Scrapy模拟浏览器登录—获取Scrapy框架Cookies

    第三百三十三节,web爬虫讲解2—Scrapy框架爬虫—Scrapy模拟浏览器登录 模拟浏览器登录 start_requests()方法,可以返回一个请求给爬虫的起始网站,这个返回的请求相当于star ...

  6. 基于ASP.Net Core开发的一套通用后台框架

    基于ASP.Net Core开发一套通用后台框架 写在前面 这是本人在学习的过程中搭建学习的框架,如果对你有所帮助那再好不过.如果您有发现错误,请告知我,我会第一时间修改. 知其然,知其所以然,并非重 ...

  7. div模拟select/option解决兼容性问题及增加可拓展性

    个人博客: http://mcchen.club 想到做这个模拟的原因是之前使用select>option标签的时候发现没有办法操控option的很多样式,比如line-height等,还会由此 ...

  8. 基于vite2+electron12后台管理模板|Electron后台框架系统

    前一溜时间有给大家分享一个 electron+vite跨端短视频 项目.这次分享的是vite2.x和electron实现跨平台后台框架,支持国际化多语言配置.导航菜单+树形菜单两种路由菜单模式.展开/ ...

  9. struts2中从后台读取数据到<s:select>

    看到网上好多有struts2中从后台读取数据到<s:select>的,但都 不太详细,可能是我自己理解不了吧!所以我自己做了 一个,其中可能 有很多不好的地方,望广大网友指出 结果如图 p ...

随机推荐

  1. docker 设置映射端口 目录挂载

    docker run -p 3092:9092 -p 3093:9093 -p 3094:9094 -p 3181:2181 --name="kafka_map_port_3092_4_31 ...

  2. LaTeX源代码显示宏包listings应用备忘之新语言定义

      我目前了解的LaTeX中有关源代码显示的宏包有两个,这里介绍其中的listings宏包.listings宏包中已经定义了部分计算机语言的显示样式,但还是有些语言没有定义,我们一起看一下如何定义新的 ...

  3. Bash shell 常用快捷键

    1,ctrl+c  :强制终止当前命令 2,ctrl+l   :清屏 3,ctrl+a  :光标移动到行首 4,ctrl+e   :光标移动到行尾 5,ctrl+u   :从光标所在位置删除到行首 6 ...

  4. AGC 015 E - Mr.Aoki Incubator

    E - Mr.Aoki Incubator 链接 题意: 数轴上有N个黑点,每个点都有一个方向向右的正速度v.当两个点在同一个位置上重合时,若其中一个是红色,另一个也变成红色.保证没有相同速度或初始坐 ...

  5. 1997: [Hnoi2010]Planar

    1997: [Hnoi2010]Planar 链接 分析: 首先在给定的那个环上考虑进行操作,如果环内有有两条边相交,那么可以把其中的一条放到环的外面去.所以转换为2-sat问题. 像这样,由于1-4 ...

  6. noip2017 PJ AK记

    嗨小朋友们大家好,还记得我是谁吗?我就是为RE代言的蒟蒻--xzz day1 蛤?四楼只有一个考场???在逗我 然后解压 蛤?空军68年????我怎么不知道???huaji 蛤?T1这么sb?切掉 蛤 ...

  7. docker部署jenkins环境

    首先获取jenkins的镜像: docker pull jenkins 设置jenkins_home映射: sudo mkidr -p /jenkins_home /jenkins_home 启动容器 ...

  8. elk6.3 centos集群搭建 head插件安装

    版本elk均为6.3+centos7.0 准备工作 官网下载elk6.3的linux环境的压缩包,sftp上传 下载对应的head插件sftp上传到指定目录 tar.gz文件解压 tar -zxvf ...

  9. Python中的注释

    1.1 注释的目的 通过用自己熟悉的语言,在程序中对某些代码进行标注说明,这就是注释的作用,能够大大增强程序的可读性. 1.2 注释的分类 1.2.1 单行注释 以#开头,#右边的所有东西当做说明,而 ...

  10. 初学者下载使用Python遇到的问题看它就行了

    首先在python管网(www.python.org)中找到对应的版本与系统,以(window7系统64位python3.7.3为例) 打开电脑--打开浏览器--输入www.python.org--d ...