跳转到内容< / >< div类="i-wrapper">

ips.ui.sideMenu

描述

SideMenu小部件与标准的侧菜单标记一起工作,当用户在移动设备上访问时,使其具有交互性并改进其功能。

使用

在大多数情况下,侧菜单应该使用标准的CSS类来构建。然后将data属性添加到包装器元素中。

使侧边菜单响应

当小部件要在响应模式下使用时,应该在元素中提供一个附加的标题和类ipsSideMenu_mainTitle;标题中的链接应该具有该属性data-action = ' openSideMenu '

< div“ipsSideMenu”data-ipsSideMenu>< h3“ipsSideMenu_mainTitle ipsAreaBackground_light ipsType_medium”>href“# modcp_menu”“ipsPad_double”data-action“openSideMenu”>“fa fa-bars”>,菜单Title “fa fa-caret-down”>< / ><!——菜单内容属于这里——>< / div >

使用sidemenus作为可选择菜单

Sidemenus可以作为一种允许用户动态选择一个或多个选项的方法,既可以作为单选(即一次只选中一个),也可以作为复选框(即多次选中)。这是通过设置data-ipsSideMenu-type属性并指定data-ipsMenuValue列表项的属性:

< ul类= " ipsSideMenu_list ipsSideMenu_withRadios”data-ipsSideMenu data-ipsSideMenu-type =“广播”> <李> < a href = ' # '类=“ipsSideMenu_item ipsSideMenu_itemActive”data-ipsMenuValue = '一' > < input type =“广播”名称=“类型”价值=“1”检查> <标记>一个< /标签> < / > < /李> <李> < a href = ' # '类= ' ipsSideMenu_item data-ipsMenuValue = ' 2 ' > <输入type = "电台" name =“类型”value = "两个“> <标签>两个< /标签> < / > < /李> < / ul >

注意:如上面所示,可以将单选和复选框输入插入到菜单项中。它们将被CSS隐藏,并自动选择为用户选择菜单项。这使得边菜单可以将值作为表单的一部分提交。

选项

反应敏捷的
(布尔;可选的;默认正确)

指定侧菜单是否添加响应行为。它通过隐藏菜单,并显示一个按需手动打开的链接来实现这一点。

类型
(字符串;可选的;默认的“广播”)

确定菜单使用的可选择行为的类型。默认情况下,只能选择一个菜单项;当单击新选项时,其他选项将被取消选择。这是广播的行为。相比之下,检查将允许同时选择多个项目。


(字符串;可选)

确定上述设置是否应用于整个菜单(当此选项为),或者是否将菜单中的每个组作为单独的菜单来处理广播选择。

ips.ui.sidemenu触发的事件

事件由根菜单元素(即data-ipsSideMenu应用属性)。

itemClicked.sideMenu

当用户选择菜单中的项时触发。

事件数据:

  • id
    触发事件的菜单的ID
  • menuElem
    对菜单元素的引用
  • 选定主题
    指向导致此事件的选定元素的引用
  • selectedItemID
    选中的项目的data-ipsMenuValue值
  • 设置selecteditem
    菜单中所有当前选定值的数组

报告指南< / >


×
  • 创建新的…
Baidu