mui折叠面板点击事件跳转

小编最近用到了mui这个框架,倒是挺方便的,不过官方文档对于渲染数据的感觉写的不是很完整,我的点击事件能够成功还是依靠查询博客和站在巨人的肩膀上才可以成功!

折叠面板展示的效果是这样的
在这里插入图片描述

如果想绑定数据在li中,需要将折叠面板所在的div赋予id

<div class="mui-slider-group" id="workflow">
				<div id="item1" class="mui-slider-item mui-control-content mui-active">
					<div id="scroll1" class="mui-scroll-wrapper">
						<ul id="flowdetail" class="mui-table-view ">	
						</ul>
					</div>
				</div>
			
			</div>

之后的点击事件如下:

                //添加列表项的点击事件
				mui('#workflow').on('tap', 'li', function(e) {
					var id = this.getAttribute('id');
					var key = this.getAttribute('key');
		
					localStorage.setItem("id", id);
					localStorage.setItem("key", key);
					//打开所有流程种类页面
					mui.openWindow({
						url: 'addnewflow.html',
						id: 'addnewflow',
				
						extras: { //自定义传参
							id: id //这就是要传至noticedetail页面的值
						},
						createNew: false, //是否重复创建同样id的webview,默认为false:不重复创建,直接显示
						show: {
							autoShow: true, //页面loaded事件发生后自动显示,默认为true
							aniShow: 'slide-in-right', //页面显示动画,默认为”slide-in-right“;
							duration: 'animationTime' //页面动画持续时间,Android平台默认100毫秒,iOS平台默认200毫秒;
						},
						waiting: {
							autoShow: true, //自动显示等待框,默认为true
							title: '正在加载...', //等待对话框上显示的提示内容
							options: {
								width: 'waiting-dialog-widht', //等待框背景区域宽度,默认根据内容自动计算合适宽度
								height: 'waiting-dialog-height', //等待框背景区域高度,默认根据内容自动计算合适高度
							}
						}
					});
				});

这样当点击任何一个折叠面板的时候,则会出发事件,跳转到相应的菜单中。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

草莓味少女vv

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值