描述
下拉菜单允许用户从多个选项中进行选择。标记设计为与<一个href="//www.kcjns.com/4guides/themes-and-customizations/javascript-framework/using-ui-widgets/ipsuimenu-r49/">ips.ui.menujavascript模块。
用法
菜单由触发器元素和菜单元素本身组成:
<一个href=“#elMyMenu”身份证件=“elMyMenu”>打开菜单<!——菜单——>< ul身份证件=“elMyMenu菜单”班=“IPS菜单”>...
菜单的ID应该是触发器元素的ID,后缀为_菜单.如果触发器元素是一个链接,则其href应该是菜单元素ID的锚点。这样即使在浏览器中禁用了Javascript,也可以访问菜单。
基本菜单
基本菜单可能具有以下标记:
< ul班=“ipsMenu ipsHide”>班=“IPS菜单项”>href='#'>项目1 班=“IPS菜单项”>href='#'>项目2 班=“IPS菜单项”>href='#'>项目3 班=“ipsMenu_sep”> 班=“IPS菜单项”>href='#'>项目4 班=“IPS菜单项”>href='#'>项目5
这将显示如下:<一个data-ipsmenu="" href="#elMenu1_menu" id="elMenu1" rel="external nofollow">参见示例.
ipsMenu是菜单元素的基类。菜单中的项目应具有类菜单项,其中包含链接元素。可以通过为项指定类来添加分隔项伊普斯菜单,包含
要素
注意,定位和阀杆由菜单javascript模块自动添加;它不需要手动指定。如有必要,可通过包含类别来移除阀杆ipsMenu_noStem在菜单元素上。
禁用菜单项
可以通过添加类来禁用单个菜单项IPS菜单项已禁用对列表项执行以下操作:<一个data-ipsmenu="" href="#elMenu3_menu" id="elMenu3" rel="external nofollow">参见示例.
注:禁用的项目不是万无一失的;在不支持CSS的浏览器中指针事件样式,单击禁用的项目仍将注册。确保你的javascript正确处理禁用项目点击如果必要。
菜单大小
默认情况下,菜单将没有定义的宽度。可以在菜单元素上指定一个额外的类名来确定它应该显示的宽度。
- 自动菜单-菜单将显示为所需的宽度,但最小宽度为200px,最大宽度为500px
- 伊普斯穆尔狭隘- 200像素宽
- 伊普苏正常- 300像素宽
- ipsMenu_wide-450像素宽
可选菜单
可选择的菜单允许用户切换一个或多个菜单项,用于打开和关闭选项。要使此功能正常工作,需要使用javascript模块。
通过添加类名可以选择菜单可选择的菜单. 通过添加类名,菜单项可以显示为选中IPS菜单项已选中添加到列表项。
可选菜单的标记可能如下所示:
< ul身份证件=“elMenu2_菜单”班=“ipsMenu ipsMenu\u普通ipsMenu\u可选ipsHide”>班=“IPS菜单项”>href='#'>项目1 班=“ipsMenu\u项ipsMenu\u项已选中”>href='#'>项目2 班=“IPS菜单项”>href='#'>项目3
这将显示如下:<一个data-ipsmenu="" href="#elMenu2_menu" id="elMenu2" rel="external nofollow">参见示例.
子菜单
子菜单可以通过嵌入菜单来创建。要做到这一点,只需在包含子菜单的项上包含ipsMenu_subItems类,并在该项中包含子菜单本身。例如:
- < li class='ipsMenu_item'>Sub Item 1
这将显示如下:<一个data-ipsmenu="" href="#" id="elMenu4" rel="external nofollow">参见示例.
报告指南