码迷,mamicode.com
首页 > 其他好文 > 详细

ABP ModuleZero后台框架materialize禁止模拟select和checkbox

时间:2018-07-22 17:11:47      阅读:283      评论:0      收藏:0      [点我收藏+]

标签:自己的   分析   city   自带   abs   选中   fun   checkbox   checked   

使用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: 0;
}

使用方法:

技术分享图片

如果要使用模拟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这个样式表, 框架就不会自动模拟了。

ABP ModuleZero后台框架materialize禁止模拟select和checkbox

标签:自己的   分析   city   自带   abs   选中   fun   checkbox   checked   

原文地址:https://www.cnblogs.com/hpnet/p/9350250.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!