layui学习笔记一

最新推荐文章于 2024-04-18 17:17:12 发布

Skye Lin

最新推荐文章于 2024-04-18 17:17:12 发布

阅读量500

点赞数

分类专栏： html layui 文章标签： layui

本文链接：https://blog.csdn.net/skye_95/article/details/81584773

版权

html 同时被 2 个专栏收录

35 篇文章 3 订阅

订阅专栏

layui

11 篇文章 0 订阅

订阅专栏

1.form表单自定校验的时候，能够直接return字符串提示消息

form.verify({
			username:function(value){
				if(value.length<5){
					return '用户名至少得5个字符啊';
						}
					}
				});

2.提交form表单，用layer.msg显示提示信息时，出现提示框闪现或显示不出来的情况，是因为表单提交后默认是表单跳转，如果想显示提示信息，需要加上"return flase;"，阻止表单跳转。

form.on('submit(sub)',function(data){
			  	var field = data.field;
			  	
			  	layer.msg(field.username,{icon:1});
			  	
			  	return false;
			  });

3.提交form表单，用if语句对表单字段进行判断时，如果不满足if 语句的条件，而想中断操作时，要加上"return false;"，不然程序默认继续执行。

form.on('submit(sub2)',function(data){
			  	var field = data.field,
			  	username = field.username,
			  	name = field.name;
			  	
			  	if(username!==name){
			  		layer.msg('输入有错');
			  		return false;//return false将中断操作，否则会继续执行程序
			  	}
			  	if(username=='1'){
			  		layer.msg('是的');
			  	}
			  	return false;
			  });

4.layui.use中自定义函数的调用

layui.use里面自定义的函数，在layui.use里面调用

例：自定义函数所实现功能：将按钮的背景变成绿色。

layui.use(['jquery'], function(){
    //在自定义函数中使用了jQuery，所以这里要加载该模块
    var $ = layui.$;

    var Test=function(){
			      	$('#sub').css("background-color","#00F7DE");
			      }
    
    $('#sub').click(function() {
			            // todo
			           	Test();
			        });
});

点击按钮之前：

点击按钮之后：

可见，和jQuery定义函数和调用函数的方法一样。

layui.use内自定义的函数，在layui.use外调用

例：自定义函数所实现的功能：改变span标签的内容

//因为页面加载的函数里用到了jQuery，所以这里要加载jQuery
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
layui.use(['jquery'], function(){
			      var $ = layui.$;

                  window.Show=function(){
			      	$("#test").html("hello world");
			      }
});

$(function(){
			    	$('#sub1').click(function(){
			    		Show();
			    	});
			    });
</script>

点击按钮之前：

点击按钮之后：

可见，需要在定义函数的时候加上"window."，才能在外部调用。

layui.use外自定义的函数，在layui.use里面调用

例：自定义函数所实现的功能：改变文字的颜色

<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
function Check(){
			    	$('#test1').css("color","red");
			    }

layui.use(['jquery'], function(){
			      var $ = layui.$;

                  $('#sub').click(function() {
			            // todo
			     
			           	Check();			           	
			        });
});
</script>

点击按钮之前：

点击按钮之后：

可见，在外部定义的函数，可以在layui.use里面直接调用。

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../../layui/css/layui.css"/>
	</head>
	<body>
		
		<button class="layui-btn layui-btn-primary" id="sub" style="margin: 50px;">提交</button>
		<span id="test1">不知道</span><br />
		<button class="layui-btn" id="sub1" style="margin: 50px;">改变</button>
		<span id="test">我是谁</span><br />
	
		<script type="text/javascript" src="../../layui/layui.js" ></script>
		<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
		<script>
			layui.use(['jquery'], function(){
			      var $ = layui.$;
			      // 你可以在下面的 js 代码中使用你熟悉的 $, jQuery
			      
			      //自定义函数,用到jQuery,需要加载该模块
			      var Test=function(){
			      	$('#sub').css("background-color","#00F7DE");
			      }
			      
			      window.Show=function(){
			      	$("#test").html("hello world");
			      }
			      
			      //内部调用自定义函数
			        $('#sub').click(function() {
			            // todo
			           	Test();
			           	Show();
			           	Check();
			        });
			    });
			    
			    //use外部定义的函数用到jQuery,需要引入jQuery,在use内页可以调用
			    function Check(){
			    	$('#test1').css("color","red");
			    }
			    
			    //页面加载
			    $(function(){
			    	$('#sub1').click(function(){
			    		Show();
			    	});
			    });
		</script>
	</body>
</html>

运行初始界面：

点击提交按钮，可以改变该按钮的背景颜色，和其后文字的颜色，和下一行文字的内容。

点击改变按钮，可以改变其后文字的内容。

5.layui使用jQuery

如果内置的模块本身是依赖jquery，则无需去use jquery。例如：

layui.use('layer', function(){ 
  var $ = layui.$ //由于layer弹层依赖jQuery，所以可以直接得到
  ,layer = layui.layer;
 
  //……
});

主动加载jquery模块。例如：

layui.use(['jquery', 'layer'], function(){ 
  var $ = layui.$ //重点处
  ,layer = layui.layer;
  
  //后面就跟你平时使用jQuery一样
  $('body').append('hello jquery');
});