layui导航栏和layui.layui.msg问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="/assets/layui/css/layui.css" media="all">
<script type="text/javascript" src="/assets/layui/layui.js"></script> </head>
<body> <ul class="layui-nav layui-nav-tree layui-nav-side" lay-filter="test">
<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">默认展开</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">选项1</a></dd>
<dd><a href="javascript:;">选项2</a></dd>
<dd><a href="">跳转</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">产品</a></li>
<li class="layui-nav-item"><a href="">大数据</a></li>
</ul> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;margin-right: 10px;">
<legend>垂直导航菜单</legend>
</fieldset> <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo" style="margin-right: 10px;margin-top: 60px;">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">默认展开</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">选项一</a></dd>
<dd><a href="javascript:;">选项二</a></dd>
<dd><a href="javascript:;">选项三</a></dd>
<dd><a href="">跳转项</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">云市场</a></li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<ul class="layui-nav layui-nav-tree layui-bg-cyan layui-inline" lay-filter="demo">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">默认展开</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">选项一</a></dd>
<dd><a href="javascript:;">选项二</a></dd>
<dd><a href="javascript:;">选项三</a></dd>
<dd><a href="">跳转项</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">移动模块</a></dd>
<dd><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">云市场</a></li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
</body>
<script type="text/javascript">
需要监听layer才可以调用他的功能 layui.use(['element','layer'], function(){
var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
var layer = layui.layer;//监听layer，否则不能用
//console.log("1121212"+layer); //这个可以查看元素是否为空 //监听导航点击
element.on('nav(demo)', function(elem){
console.log(elem.text());
layer.msg(elem.text());
});
});
</script>
</html>
有问题的js
<script type="text/javascript">
layui.use('element', function(){
var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块 //监听导航点击
element.on('nav(demo)', function(elem){
console.log(elem.text());
layui.layer.msg(elem.text());
});
});
</script> 这样写，msg 会出现问题。不能实现功能。用msg的功能需要，监听layer,然后拿到layer对象才能调用msg的功能
layui，layer学习过程中...
layui导航栏和layui.layui.msg问题的更多相关文章
- 修改layui的后台模板的左侧导航栏可以伸缩
原生的左侧导航栏代码: <div class="layui-side layui-bg-black"> <div class="layui-side-s ...
- [转]layui点击左侧导航栏，实现不刷新整个页面，只刷新局部
本文转自:https://blog.csdn.net/s31415926_004/article/details/84256587 其实这篇文章是给自己看的,以后忘记怎么做回来还能看一下哈哈哈哈哈哈哈 ...
- 监听导航新增Tab选项卡-layui
1. 加载element模块 2. 监听导航事件 3. 创建选项卡 //加载element模块 layui.use('element', function () { element = layui.e ...
- 导航栏控制器和标签栏控制器(UINavigationController和UITabBarController)混用
很多时候,在UI设计方面同时需要使用导航控制器和标签栏控制器,这时,需要掌握如何设计结合使用这两种不同控制器.比如手机QQ,程序有三个标签 栏(分别为消息.联系人.动态),同时在选择某个联系人或者会话 ...
- React Navigation 导航栏样式调整+底部角标消息提示
五一佳节匆匆而过,有人选择在外面看人山人海,有人选择宅在家中度过五一,也有人依然坚守在第一线,致敬! 这是坚持学习react-native的第二篇文章,可能会迟到,但是绝不会缺席,这篇要涉及到的是re ...
- day77:luffy:导航栏的实现&DjangoRestFramework JWT&多条件登录
目录 1.导航栏的实现 2.登录前戏:用户表初始化 3.DjangoRestFramework JWT 4.多条件登录 5.登录状态的判断和退出登录 1.导航栏的实现 1.设计导航栏的model模型类 ...
- 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- SAP CRM 将组件整合至导航栏中
到现在,我们已经可以让组件独立地显示.我们只是运行它.让它显示在Web UI中.让我们把组件整合进导航栏,使我们可以在正常登录Web UI时访问它. 步骤一: 为你的UI组件主窗体创建一个内向插件. ...
- ABP(现代ASP.NET样板开发框架)系列之22、ABP展现层——导航栏设置
点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之22.ABP展现层——导航栏设置 ABP是“ASP.NET Boilerplate Project (ASP.NE ...
随机推荐
- P2453 [SDOI2006]最短距离
题目描述 一种EDIT字母编辑器,它的功能是可以通过不同的变换操作可以把一个源串X [l..m]变换为新的目标串y[1..n].EDIT提供的变换操作有: 源串中的单个字符可被删除(delete): ...
- 零基础自学Python十天，写了一款猜数字小游戏，附源码和软件下载链接！
自学一门语言最重要的是要及时给自己反馈,那么经常写一些小程序培养语感很重要,写完可以总结一下程序中运用到了哪些零散的知识点. 本程序中运用到的知识点有: 1.输入输出函数 (input.print) ...
- 四年级--python函数基础用法
一.函数的定义,调用和返回值 1.1 语法 def 函数(参数一,参数二...): ''' 文档注释 ''' 代码逻辑一 代码逻辑二 .... return 返回值 1.2 定义函数的三种形式 说明: ...
- hadoop HA 详解
NameNode 高可用整体架构概述 在 Hadoop 1.0 时代,Hadoop 的两大核心组件 HDFS NameNode 和 JobTracker 都存在着单点问题,这其中以 NameNode ...
- sniffer 简介
http://www.doc88.com/p-095375416629.html 介绍sniffer的工作原理及简单介绍.
- 第四次作业之jieba库的应用
#!/usr/bin/python# -*- coding:utf-8 -*- import imp,sys imp.reload(sys)from matplotlib.font_manager i ...
- Java 8系列之重新认识HashMap
摘要 HashMap是Java程序员使用频率最高的用于映射(键值对)处理的数据类型.随着JDK(Java Developmet Kit)版本的更新,JDK1.8对HashMap底层的实现进行了优化,例 ...
- oracle的事务级别
ooracle的事务级别是不提交的,如果在sql语句中插入数据,如果不提交(commit).在程序里面试读不出来数据的.长时间不用oracle竟然忘了这些东西,特此记下.方便以后查看
- 关于mui 中popover与下拉刷新冲突问题
最近用mui做app混合式开发时,作为一个后端开发,高前端确实有点吃了,期间遇到的问题肯定也不少.这两天app做更新,为了装逼,将更新的提示搞得好看些,用到了mui中的popover,结果把自己整死了 ...
- jquery选择器 看这个链接吧！2017.6.2
http://www.cnblogs.com/tylerdonet/archive/2013/04/02/2996713.html关于jquery选择器说明.