怎么用layui操作左侧菜单栏及动态操作标签项

  介绍

这篇文章主要讲解了“怎么用layui操作左侧菜单栏及动态操作标签项”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习”怎么用layui操作左侧菜单栏及动态操作标签项吧!

首先说一下左侧菜单栏

怎么用layui操作左侧菜单栏及动态操作标签项

这是一个最基本的左侧菜单栏,实现的过程很简单,官方的说明文档就有,但是我在导入层。js之后,直接复制这段官方代码到我的编辑器上时,发现页面是这样的:

怎么用layui操作左侧菜单栏及动态操作标签项

发现,绑定属性的菜单并没有下拉选项,这个问题在我导入layer.all。js之后解决了,而且发现如果是在页面的最上方导入的话也没有下拉选项,只有在html代码下面导入,才可以显示,<强>不知道是什么原因

下面说重点,<强>动态操作标签项

页面截图:

怎么用layui操作左侧菜单栏及动态操作标签项

<强>标签项右键菜单:

怎么用layui操作左侧菜单栏及动态操作标签项

这里右键菜单的样式并没有做太多的美化。

<强> html代码:(页面中关于引入js和css文件的部分被我省略了,还有要注意jQuery的引入顺序)

& lt; div 类=發ayui-tab  layui-tab-card  site-demo-button",风格=拔恢?,相对的,“在   ,,,,,,,,,,,& lt; ul 类=發ayui-nav  layui-nav-tree  layui-nav-side"比;   ,,,,,,,,,,,,,,,& lt; li 类=發ayui-nav-item  layui-nav-itemed"比;   ,,,,,,,,,,,,,,,,,,,& lt; a  href=癹avascript:“在默认展开& lt;/a>   ,,,,,,,,,,,,,,,,,,,& lt; dl 类=發ayui-nav-child"比;   ,,,,,,,,,,,,,,,,,,,,,,,& lt; dd>   ,,,,,,,,,,,,,,,,,,,,,,,,,,,& lt; a  data-url=癮",数据id=?1”, data-title=把∠頰", href=?”,类=皊ite-demo-active",数据类型=皌abAdd"在选项a   ,,,,,,,,,,,,,,,,,,,,,,,& lt;/dd>   ,,,,,,,,,,,,,,,,,,,,,,,& lt; dd>   ,,,,,,,,,,,,,,,,,,,,,,,,,,,& lt; a  href=?”, data-url=癰", data-title=把∠頱",,数据id=?2”,类=皊ite-demo-active",数据类型=皌abAdd"在选项b   ,,,,,,,,,,,,,,,,,,,,,,,& lt;/dd>   ,,,,,,,,,,,,,,,,,,,,,,,& lt; dd>   ,,,,,,,,,,,,,,,,,,,,,,,,,,,& lt; a  href=啊白4翘? lt;/a>   ,,,,,,,,,,,,,,,,,,,,,,,& lt;/dd>   ,,,,,,,,,,,,,,,,,,,& lt;/dl>   ,,,,,,,,,,,,,,,& lt;/li>   ,,,,,,,,,,,,,,,& lt; li 类=發ayui-nav-item"比;   ,,,,,,,,,,,,,,,,,,,& lt; a  href=癹avascript:“在解决方案& lt;/a>   ,,,,,,,,,,,,,,,,,,,& lt; dl 类=發ayui-nav-child"比;   ,,,,,,,,,,,,,,,,,,,,,,,& lt; dd>   ,,,,,,,,,,,,,,,,,,,,,,,,,,,& lt; a  href=啊霸谝贫?? lt;/a>   ,,,,,,,,,,,,,,,,,,,,,,,& lt;/dd>   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null

怎么用layui操作左侧菜单栏及动态操作标签项