温馨提示:这边只是列举案例实现,具体逻辑代码实现需要在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]
案例三:含有"向右"图标功能实现,第一栏为样例显示效果,第二栏为效果显示
案例四:含有选择框功能实现,以下列举的是会员卡选择功能实现。当前的案例是可以根据项目需求进变更,逻辑代码过长无法贴出,请在测试项目案例查看
样例相关代码下载地址:点我下载