移动端级联组件mCascader 移动端html5mui

移动端开发中可能会涉及到树状数据的选择，由于mui中没有比较好的组件可以使用，所以我基于mui和jq开发了一款可以在移动端操作级联的气泡组件。
源码地址：https://github.com/booms21/mC...
mCascader 【移动端级联组件mCascader】mCascader 是一款mui风格的移动端h5气泡级联框，支持可选择任意层级、默认值、分隔符

文章图片

使用方法：首先引入mui和jq库，mCascader.css（cascader的样式）

直接调用mCascader方法，并传入配置项：

mCascader({ input:'#demo', //对应input的id data:data, //mCascader 的数据 value:[''],//mCascader的默认值,默认值节点的id字符串 separator:'/', //input中的分隔符 onClick:function(node){ //当选择完成时的回调函数，node为当前点击的点击的节点 console.log(node) } });

input：对应文本框的选择器，字符串类型
data： mCascader的数据。Array类型，树结构，data中的节点必须要有以下属性：

data = https://www.it610.com/article/[{ id:'',// 必须,唯一的id值，String类型 name:'', //必须,对应mCascader节点的显示文本，String类型 children:[...] //子节点，Array类型 },...]

获取mCascader当前的id值(2种)： 1.mCascader.currtId
2.$('#demo').data('id')或$(mCascader.options.input).data('id')
返回上一层级： mCascader.back()
清空mCascader数据及重置界面： mCascader.clear()
例子： mcascader的DOM不写死到js中，保留了原本组件的结构，方便你自定义组件的样式