修改mui accordion(折叠面板)默认展开收缩行为
mui的折叠面板 accordion 默认展开收缩逻辑是,展开其中一个的同时收缩起同级已经展开的元素。
实际需求:展开其中一个不必收缩同级元素。
分析mui.js源代码:
window.addEventListener('tap', function(event) {
// console.log("1"+cell);
if (!cell) {
return;
}
var isExpand = false;
var classList = cell.classList;
var ul = cell.parentNode;
if (ul && ul.classList.contains(CLASS_RADIO_VIEW)) {
if (classList.contains(CLASS_SELECTED)) {
return;
}
var selected = ul.querySelector('li' + SELECTOR_SELECTED);
if (selected) {
selected.classList.remove(CLASS_SELECTED);
}
classList.add(CLASS_SELECTED);
$.trigger(cell, 'selected', {
el: cell
});
return;
}
if (classList.contains('mui-collapse') && !cell.parentNode.classList.contains('mui-unfold')) {
if (!preventDefaultException.test(event.target.tagName)) {
event.detail.gesture.preventDefault();
} if (!classList.contains(CLASS_ACTIVE)) { //展开时,需要收缩其他同类
var collapse = cell.parentNode.querySelector('.mui-collapse.mui-active');
//方法一在源代码里面注释下面找个判断
if (collapse) {
collapse.classList.remove(CLASS_ACTIVE);
}
isExpand = true;
}
classList.toggle(CLASS_ACTIVE);
if (isExpand) {
//触发展开事件
$.trigger(cell, 'expand'); //scroll
//暂不滚动
// var offsetTop = $.offset(cell).top;
// var scrollTop = document.body.scrollTop;
// var height = window.innerHeight;
// var offsetHeight = cell.offsetHeight;
// var cellHeight = (offsetTop - scrollTop + offsetHeight);
// if (offsetHeight > height) {
// $.scrollTo(offsetTop, 300);
// } else if (cellHeight > height) {
// $.scrollTo(cellHeight - height + scrollTop, 300);
// }
}
} else {
radioOrCheckboxClick(event);
}
});
得出2种解决办法的结论。
方法一:注释如下代码
// if (collapse) {
// collapse.classList.remove(CLASS_ACTIVE);
// }
方法二:关键在 ruturn false; 这句可以取消mui.js库默认绑定的事件,这样就能达到重写。
//自定义展开后不需要讲同级元素折叠
mui('body').on('tap','.mui-collapse',function(e){ this.classList.toggle('mui-active');
return false;//可以取消继续执行默认绑定事件
})
方法三:阻止事件冒泡
//自定义展开后不需要讲同级元素折叠
mui('body').on('tap','.mui-collapse',function(e){
//阻止事件冒泡
e.stopPropagation(); this.classList.toggle('mui-active');
})
修改mui accordion(折叠面板)默认展开收缩行为的更多相关文章
- 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局
EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...
- Jquery Accordion 折叠面板
属性 类型 默认值 active Boolean/Number/jQuery/Selector/Element 第一个面板 设定默认显示的面板.设置为 false 时默认不显示面板,需 collaps ...
- amazeui折叠面板智能化展开
2016年12月12日 21:05:18 星期一 场景: 我拿这个组件用作管理后台的侧边栏 效果: 根据当前访问的url不同, 展开不同的面板 amazeui折叠面板 js代码: <script ...
- (八)easyUI之Accordion折叠面板:动态面板
二.动态面板 数据库设计 函数设计:该函数用于获取某个节点的所有子节点 CREATE FUNCTION fn_getAddress_ChildList_test(rootId INT) RETURNS ...
- (七)easyUI之Accordion折叠面板:普通的静态面板
一.普通的静态面板 前台 <%@ page language="java" contentType="text/html; charset=UTF-8" ...
- Vue 折叠面板Collapse在标题上添加组件后,阻止面板冒泡的用法
iView组件中,折叠面板Collapse点击面板标题部分,会出现面板收起或展开的效果.那么在面板标题后面再添加下拉框之类的组件时,会出现跟面板点击一样的效果,这时候就需要阻止冒泡的用法了.具体代码: ...
- accordion(折叠面板)的使用
一.前言: 折叠面板(accordion)允许使用多面板(panel),同时显示一个或多个面板(panel).每个面板(panel)都有展开和折叠的内建支持.点击面板(panel)头部可展开或折叠面板 ...
- jQuery EasyUI 折叠面板accordion的使用实例
1.对折叠面板区域 div 设置 class=”easyui-accordion” 2.在区域添加多个 div, 每个 div 就是一个面板 (每个面板一定要设置 title 属性). 3.设置面板属 ...
- mui折叠面板的使用
折叠面板从二级列表中演化而来,dom结构和二级列表类似,如下: <div class="mui-content"> <div class="mui-ca ...
随机推荐
- 一个Flex 对话框的坑
最近在项目中遇到一个问题,在Flex中使用Alert.show("this is content!", "title");发现对话框可以弹出来,但是文本始终不显 ...
- canvas环形进度条
<style> canvas { border: 1px solid red; margin: 100px; }</style> <canvas id="rin ...
- Python 数据库之间差异对比
参考资料: Python 集合(set) 此脚本用于两个数据库之间的表.列.栏位.索引的差异对比. cat oracle_diff.py #!/home/dba/.pyenv/versions/3 ...
- 动态链接库DLL_第1篇
动态链接库通常不能直接运行,也不能接收消息.它们是一些独立的文件,其中包含能被可执行程序或其他DLL调用来完成某项工作的函数.只有在其他模块调用动态链接库中的函数时,它才发挥作用.实际编程时,可把完成 ...
- Beand的高级特征
Spring程序中,Java Bean一般与Spring是非耦合的,不会依赖于Spring类库.这也是Spring的优点. 实现BeanNameAware接口获取本bean的id属性 BeanName ...
- <二叉树的基本操作>
#include<stdio.h> #include<stdlib.h> #include<string.h> #define num 100 #define OK ...
- json数组和json字符串转换成map解析
package demo; import java.util.List;import java.util.Map;import java.util.Map.Entry; import net.sf.j ...
- tensorflow训练打游戏ai
python3,所需模块请自行补齐 # coding=utf8 import pygame import random from pygame.locals import * import numpy ...
- [Algorithm] A nonrecursive algorithm for enumerating all permutations of the numbers {1,2,...,n}
def permutationN(n): a=[None]*n for i in range(n): a[i]=i+1 sum=1 for j in range(n): sum*=(j+1) i=0 ...
- 玩转ptrace (一)
转自http://www.cnblogs.com/catch/p/3476280.html [本文翻译自这里: http://www.linuxjournal.com/article/6100?pag ...