使用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. leetcode-53-Maximum Subarray(动态规划详解)

    题目描述: Given an integer array nums, find the contiguous subarray (containing at least one number) whi ...

  2. 简单的firebird插入速度测试

    Firebird3.0 插入1万条Guid,不带事务:5500ms 插入1万条Guid,带事务:2300ms mssql2008 插入1万条Guid,不带事务:1400ms 插入1万条Guid,带事务 ...

  3. 20155236范晨歌 Exp7 网络欺诈技术防范

    20155236范晨歌 Exp7 网络欺诈技术防范 虚拟机经常崩= =,所以基本上做一个实验换一个... 遇到了一个简单的小问题老师帮忙解决了:虚拟机没联网... 一.基础问题回答 通常在什么场景下容 ...

  4. vue动态修改title

    1.项目中,cmd下 ,运行:cnpm install vue-wechat-title --save 2.在 main.js 中,设置: import VueWechatTitle from 'vu ...

  5. P4774 [NOI2018]屠龙勇士

    P4774 [NOI2018]屠龙勇士 先平衡树跑出打每条龙的atk t[] 然后每条龙有\(xt \equiv a[i](\text{mod }p[i])\) 就是\(xt+kp[i]=a[i]\) ...

  6. Python中re模块详细介绍

    正则的介绍及应用实例详解 """ 1.什么是正则 正则就是用一系列具有特殊含义的字符组成一套规则,该规则用来描述具有某一特征的字符串, 正则就是用来去一个大的字符串中匹配 ...

  7. Java动态代理:一个面包店的动态代理帝国

    文章首发于[博客园-陈树义],点击跳转到原文大白话说Java动态代理:一个面包店的动态代理帝国 代理模式是设计模式中非常重要的一种类型,而设计模式又是编程中非常重要的知识点,特别是在业务系统的重构中, ...

  8. jquery inArray()函数详解

    jquery inarray()函数详解 jquery.inarray(value,array)确定第一个参数在数组中的位置(如果没有找到则返回 -1 ). determine the index o ...

  9. H5拖拽 构造拖拽及缩放 pdf文件转换为html预览

    前言: 协助项目需要实现一个签名的功能. 功能说明:1.有文本签名和头像签名.2.头像签名需要实现可拖拽功能.3.需要展示的是pdf的文件并需要获取签名位于pdf文件的相对位置. 功能一:实现拖拽 思 ...

  10. 通过python将xml文件转换成html文件

    #数据类型的转换 def main():    maxwidth = 100  #用于规范字段的长度    print_start()    count=0    while True:        ...