ABP ModuleZero后台框架materialize禁止模拟select和checkbox
使用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的更多相关文章
- EasyUI+MVC-搭建后台框架
一.EasyUI简介: jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面. 官方网站:h ...
- 联合县城市,采用ajax,而使用ul模拟select下拉
接待处代码 js //采用jquery展示鼠标放到省ul下拉显示 $("#province").hover(function(){ ...
- ABP module-zero +AdminLTE+Bootstrap Table+jQuery权限管理系统第十二节--小结,Bootstrap Table之角色管理
返回总目录:ABP+AdminLTE+Bootstrap Table权限管理系统一期 很多人说ABP不适合高并发大型,有一定的道理,但是我觉得还是可以的,就看架构师的能力了,哈哈,我之前公司就是ABP ...
- Spring Boot(5)一个极简且完整的后台框架
https://blog.csdn.net/daleiwang/article/details/75007588 Spring Boot(5)一个极简且完整的后台框架 2017年07月12日 11:3 ...
- 第三百三十三节,web爬虫讲解2—Scrapy框架爬虫—Scrapy模拟浏览器登录—获取Scrapy框架Cookies
第三百三十三节,web爬虫讲解2—Scrapy框架爬虫—Scrapy模拟浏览器登录 模拟浏览器登录 start_requests()方法,可以返回一个请求给爬虫的起始网站,这个返回的请求相当于star ...
- 基于ASP.Net Core开发的一套通用后台框架
基于ASP.Net Core开发一套通用后台框架 写在前面 这是本人在学习的过程中搭建学习的框架,如果对你有所帮助那再好不过.如果您有发现错误,请告知我,我会第一时间修改. 知其然,知其所以然,并非重 ...
- div模拟select/option解决兼容性问题及增加可拓展性
个人博客: http://mcchen.club 想到做这个模拟的原因是之前使用select>option标签的时候发现没有办法操控option的很多样式,比如line-height等,还会由此 ...
- 基于vite2+electron12后台管理模板|Electron后台框架系统
前一溜时间有给大家分享一个 electron+vite跨端短视频 项目.这次分享的是vite2.x和electron实现跨平台后台框架,支持国际化多语言配置.导航菜单+树形菜单两种路由菜单模式.展开/ ...
- struts2中从后台读取数据到<s:select>
看到网上好多有struts2中从后台读取数据到<s:select>的,但都 不太详细,可能是我自己理解不了吧!所以我自己做了 一个,其中可能 有很多不好的地方,望广大网友指出 结果如图 p ...
随机推荐
- 时间序列深度学习:状态 LSTM 模型预测太阳黑子
目录 时间序列深度学习:状态 LSTM 模型预测太阳黑子 教程概览 商业应用 长短期记忆(LSTM)模型 太阳黑子数据集 构建 LSTM 模型预测太阳黑子 1 若干相关包 2 数据 3 探索性数据分析 ...
- angularjs-ui-router-animation
html <!DOCTYPE html> <html ng-app="APP"> <head> <title></title& ...
- 2017-2018-2 《网络对抗技术》 20155322 Exp3 免杀原理与实践
#2017-2018-2 <网络对抗技术> 20155322 Exp3 免杀原理与实践 [-= 博客目录 =-] 1-实践目标 1.1-实践介绍 1.2-实践内容 1.3-实践要求 2-实 ...
- 20155327 2017-2018-2 《Java程序设计》第9周学习总结
20155327 2017-2018-2 <Java程序设计>第9周学习总结 URL类 URL类是java.net包中的一个重要的类,URL的实例封装着一个统一资源定位符,使用URL创建对 ...
- RTTI(运行时类型识别)
C++为了能够在运行时正确判断一个对象确切的类型,加入了RTTI和type_info. type_info 为每一个类型增加一个type_info对象. 为了能够在运行时获得对象的类型信息type_i ...
- AGC 007 D - Shik and Game
D - Shik and Game 链接 题意: 数轴上有一个人,从0出发到E,速度为1.数轴上还有n只熊,每只熊会在经过后的T时刻后产生一个金币.给定E,T以及n个熊的坐标pi,求收集完所有金币并到 ...
- 巧用 Python 找工作(资料在文末)
前言 近年来 Python 之火大家都有感而知,那亲们知道北京的 Python 开发岗位.运维开发岗位招聘地域都是如何分布的吗?薪水如何?是否有前景等等,这些数据呢直接通过招聘信息来了解到企业用人是最 ...
- Windows Forms Application Creation and Initialization
Windows Forms Application Creation and Initialization This topic details the steps performed after a ...
- Linux之linux入门
学习linux之前先了解一下操作系统: 操作系统的定义: 操作系统(英语:operating system,缩写作 OS)是管理计算机硬件与软件资源的计算机程序,同时也是计算机系统的内 ...
- 新手入门之——Ubuntu上的编辑器之神Vi / Vim
Ubuntu上的编辑器有gedit.vi.sublime等.gedit一般在没有其他编辑器时临时使用,大部分情况下,vi和sublime使用的比较多,Linux系统内置了vi和sublime,其中,s ...