init
This commit is contained in:
117
public/frontend/layui-main/docs/menu/examples/demo.md
Executable file
117
public/frontend/layui-main/docs/menu/examples/demo.md
Executable file
@@ -0,0 +1,117 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>基础菜单 - Layui</title>
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="{{= d.layui.cdn.css }}" rel="stylesheet">
|
||||
</head>
|
||||
<body class="layui-bg-gray">
|
||||
<div class="layui-panel" style="width: 260px; margin: 16px;">
|
||||
<ul class="layui-menu" id="demo-menu">
|
||||
<li lay-options="{id: 100}">
|
||||
<div class="layui-menu-body-title"><a href="javascript:;">menu item 1</a></div>
|
||||
</li>
|
||||
<li lay-options="{id: 101}">
|
||||
<div class="layui-menu-body-title">
|
||||
<a href="javascript:;">menu item 2 <span class="layui-badge-dot"></span></a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="layui-menu-item-divider"></li>
|
||||
<li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group'}">
|
||||
<div class="layui-menu-body-title">
|
||||
menu group <i class="layui-icon layui-icon-up"></i>
|
||||
</div>
|
||||
<ul>
|
||||
<li lay-options="{id: 103}">
|
||||
<div class="layui-menu-body-title">menu item 3-1</div>
|
||||
</li>
|
||||
<li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: false}">
|
||||
<div class="layui-menu-body-title">menu group 2</div>
|
||||
<ul>
|
||||
<li class="layui-menu-item-checked">
|
||||
<div class="layui-menu-body-title">menu item 3-2-1</div>
|
||||
</li>
|
||||
<li><div class="layui-menu-body-title">menu item 3-2-2</div></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><div class="layui-menu-body-title">menu item 3-3</div></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="layui-menu-item-divider"></li>
|
||||
<li><div class="layui-menu-body-title">menu item 4 <span class="layui-badge">1</span></div></li>
|
||||
<li><div class="layui-menu-body-title">menu item 5</div></li>
|
||||
<li><div class="layui-menu-body-title">menu item 6</div></li>
|
||||
<li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
|
||||
<div class="layui-menu-body-title">
|
||||
menu item 7 Children
|
||||
<i class="layui-icon layui-icon-right"></i>
|
||||
</div>
|
||||
<div class="layui-panel layui-menu-body-panel">
|
||||
<ul>
|
||||
<li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
|
||||
<div class="layui-menu-body-title">
|
||||
menu item 7-1
|
||||
<i class="layui-icon layui-icon-right"></i>
|
||||
</div>
|
||||
<div class="layui-panel layui-menu-body-panel">
|
||||
<ul>
|
||||
<li><div class="layui-menu-body-title">menu item 7-2-1</div></li>
|
||||
<li><div class="layui-menu-body-title">menu item 7-2-2</div></li>
|
||||
<li><div class="layui-menu-body-title">menu item 7-2-3</div></li>
|
||||
<li><div class="layui-menu-body-title">menu item 7-2-4</div></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><div class="layui-menu-body-title">menu item 7-2</div></li>
|
||||
<li><div class="layui-menu-body-title">menu item 7-3</div></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li>menu item 8</li>
|
||||
<li class="layui-menu-item-divider"></li>
|
||||
<li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: false}">
|
||||
<div class="layui-menu-body-title">menu group 9</div>
|
||||
<ul>
|
||||
<li><div class="layui-menu-body-title">menu item 9-1</div></li>
|
||||
<li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
|
||||
<div class="layui-menu-body-title">
|
||||
menu item 9-2
|
||||
<i class="layui-icon layui-icon-right"></i>
|
||||
</div>
|
||||
<div class="layui-panel layui-menu-body-panel">
|
||||
<ul>
|
||||
<li><div class="layui-menu-body-title">menu item 9-2-1</div></li>
|
||||
<li><div class="layui-menu-body-title">menu item 9-2-2</div></li>
|
||||
<li><div class="layui-menu-body-title">menu item 9-2-3</div></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li><div class="layui-menu-body-title">menu item 9-31</div></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="layui-menu-item-divider"></li>
|
||||
<li><div class="layui-menu-body-title">menu item 10</div></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<script src="{{= d.layui.cdn.js }}"></script>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var dropdown = layui.dropdown;
|
||||
var layer = layui.layer;
|
||||
var util = layui.util;
|
||||
|
||||
// 菜单点击事件
|
||||
dropdown.on('click(demo-menu)', function(options){
|
||||
console.log(this, options);
|
||||
|
||||
// 显示 - 仅用于演示
|
||||
layer.msg(util.escape(JSON.stringify(options)));
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
62
public/frontend/layui-main/docs/menu/index.md
Executable file
62
public/frontend/layui-main/docs/menu/index.md
Executable file
@@ -0,0 +1,62 @@
|
||||
---
|
||||
title: 基础菜单 menu
|
||||
toc: true
|
||||
---
|
||||
|
||||
# 基础菜单
|
||||
|
||||
> 基础菜单 `menu` 是垂直导航菜单的另一个替代方案，它是基于 `dropdown` 组件驱动的静态元素结构。
|
||||
|
||||
<h2 id="examples" lay-toc="{hot: true}" style="margin-bottom: 0;">示例</h2>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: 'iframe', style: 'height: 535px;', layout: ['preview', 'code'], tools: ['full', 'window']}">
|
||||
<textarea>
|
||||
{{- d.include("/menu/examples/demo.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h2 id="layout" lay-toc="{}">结构</h2>
|
||||
|
||||
基础菜单层级与样式结构如下：
|
||||
|
||||
- 通过 `<ul class="layui-menu"></ul>` 命名基础菜单容器
|
||||
- 追加 `className` 为 `layui-menu-lg` 可设置基础菜单的大尺寸风格
|
||||
- 通过 `<li></li>` 放置菜单列表项
|
||||
- 属性：
|
||||
- 追加 `className` 为 `layui-menu-item-group` 可设置当前菜单为菜单组，即子菜单为纵向层级。
|
||||
- 或追加 `className` 为 `layui-menu-item-parent` 可设置当前菜单为父级菜单，即子菜单为横向层级。
|
||||
- 追加 `className` 为 `layui-menu-item-divider` 可设置分隔线。
|
||||
- 追加 `className` 为 `layui-menu-item-up` 或 `layui-menu-item-down` 可设置子菜单默认收缩或展开。
|
||||
- 追加 `className` 为 `layui-menu-item-checked` 可设置当前菜单为选中状态
|
||||
- 添加 `lay-options="{}"` 可设置对应菜单列表的基础属性
|
||||
- 内容：
|
||||
- 通过 `<div class="layui-menu-body-title"></div>` 放置菜单标题容器
|
||||
- 通过 `<div class="layui-panel layui-menu-body-panel"></div>` 放置横向子菜单外层面板
|
||||
- 通过 `<ul><li></li></ul>` 放置子菜单列表，其中 `<li>` 中的规则同父级。
|
||||
- 再将基础菜单放置在一个面板容器中，以更好地定义尺寸、边框或阴影等外观，详细可参考上述示例。
|
||||
|
||||
|
||||
<h2 id="options" lay-toc="{}">属性</h2>
|
||||
|
||||
属性即命名在基础菜单列表元素 `<li></li>` 中的 `lay-options` 属性值，如：`<li lay-options="{type: 'parent'}"></li>`，其支持的属性如下：
|
||||
|
||||
| 属性 | 描述 |
|
||||
| --- | --- |
|
||||
| title | 设置菜单标题。默认读取标题容器内容中的文本。 |
|
||||
| type | 设置菜单类型。可选值如下：<ul><li>若不设定，则表示为常规菜单项</li><li>`type:'group'` 菜单组，子菜单为纵向层级</li><li>`type:'parent'` 父级菜单，子菜单为横向层级</li></ul> |
|
||||
| isAllowSpread | 子菜单是否允许展开收缩操作。默认 `true` |
|
||||
|
||||
<h3 id="on" lay-toc="{}" class="ws-bold">事件</h3>
|
||||
|
||||
`dropdown.on('click(filter)', callback)`
|
||||
|
||||
- 参数 `click(filter)` 是一个特定结构。
|
||||
- `click` 为基础菜单项点击事件固定值；
|
||||
- `filter` 为基础菜单容器属性 `lay-filter` 对应的值。
|
||||
- 参数 `callback` 为事件执行时的回调函数，并返回一个 object 类型的参数。
|
||||
|
||||
点击菜单列表项时触发。用法：[#详见示例](#examples)
|
||||
|
||||
## 贴士
|
||||
|
||||
基础菜单相当于是 `dropdown` 组件的一种静态化呈现，因此在事件等动态操作上需借助 `dropdown` 组件的 API 来完成。
|
||||
Reference in New Issue
Block a user