jquery实现多功能侧边栏

温馨提示：这边只是列举案例实现，具体逻辑代码实现需要在jquery.navbar.js查看

今天我们将对jquery.navbar的使用进行详细的解释并列举相关的案例，jquery.navbar.js是一个含有多选框和小菜单操作的功能函数，一句话描述为：创建无图片格式左侧菜单栏，展开/收缩的图标放在左边，小菜单图标放在右侧

jquery.navbar.js要求传递的数据格式为json数据，且对象数据为{ID:'节点ID，需要具有唯一性',ParentId:'用于区分上下级，根节点ID默认为"-1"',NavName:'节点文本'}

jquery.navbar.js配置文件参数及相关说明如下：

参数	相关说明
containerClass	承载jquery.navbar.js生产元素对应的容器对象，可传递的格式为：#id或.class [注：如果传递的是class，请确保您当前class名称在页面中是唯一的]
menuClass	点击"..."图标显示的菜单栏对象 传递的格式为：#id或.class，如果isNeedBtn为false，该值是不可用的。
arr	创建侧边栏数据源，默认值为null
btnType	按钮类型 0代表"..."图标 1代表"向右"图标 当为1时menuClass 参数不可传递，该值配合isNeedBtn使用
isNeedBtn	是否需要"..."或"向右"的图标，默认值为false
noAllowArray	不允许任何操作的数据元素集合 ，如果不允许操作 鼠标滑过及点击都不会出现"..."或向右图标，默认值为空数组
normalFontColor	正常的字体颜色，默认值颜色为：'#323232'
fontColor	active/hover对应的字体颜色，默认值颜色为：'#3C3C3C'
backgroundColor	active/hover对应的背景颜色，默认值颜色为：'#EBEDF0'
isShowCheckbox	是否显示CheckBox[创建多选框],如果是选择显示的话，正常字体和背景色不需要设置
limitCreateData	限制创建CheckBox输入框数据，正常具有下拉选择的节点都是不可创建checkbox的，如果想选择当前节点下的所有节点数据，可以在当前节点的第一个节点创建一个"选择全部"
SpanClass	当前是特殊值，故为大写表示，指定功能实现使用。存储的是"..."图标对应class
特别说明：noAllowArray存储的是字符数组即ID值，limitCreateData存储的数组为对象数组
callback回调函数	回调的参数名为：id，type，isSelected，isIncludeCheckBox。id为当前点击的元素ID，也是当前的class名称；type为是否点击小菜单图标，默认值为-1，点击"..."回调值为-1；isSelected和isIncludeCheckBox值只针对isShowCheckbox为true有效，isSelected元素选择状态[bool类型]/isShowCheckbox当前点击的元素是否含有多选框。
returnClass回调函数	回调创建的class名称，返回的是主体菜单栏class名称

以下将利用四个案例来列举应用场景，分别是正常的侧边栏、含有"..."图标功能实现、含有"向右"图标功能实现、含有选择框功能实现

案例一：正常的侧边栏，第一栏为样例显示效果，第二栏为代码实现区域

案例二：含有"..."图标功能实现，第一栏为样例显示效果，第二栏为代码实现区域，第三栏是实现联动效果侧边栏数据[完整实现代码看JS]

案例三：含有"向右"图标功能实现，第一栏为样例显示效果，第二栏为效果显示

案例四：含有选择框功能实现，以下列举的是会员卡选择功能实现。当前的案例是可以根据项目需求进变更，逻辑代码过长无法贴出，请在测试项目案例查看

样例相关代码下载地址：点我下载