温馨提示:这边只是列举案例实现,具体逻辑代码实现需要在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名称

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

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

python 心跳 检测超时 jquery侧边栏伸缩菜单_功能实现

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

python 心跳 检测超时 jquery侧边栏伸缩菜单_navmenu_02

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

python 心跳 检测超时 jquery侧边栏伸缩菜单_功能实现_03

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

python 心跳 检测超时 jquery侧边栏伸缩菜单_功能实现_04

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