Layui 모듈화 및 비모듈화의 다양한 참조 방법 소개-레이이 튜토리얼-php.cn

집

웹 프론트엔드

레이이 튜토리얼

Layui 모듈화 및 비모듈화의 다양한 참조 방법 소개

尚

Dec 19, 2019 pm 05:03 PM

layui

Layui 모듈화 및 비모듈화의 다양한 참조 방법 소개

layui 모듈화와 비모듈화의 다양한 참조 방법:

layui에는 팝업 레이어, 날짜 및 시간 선택기, 페이징 및 기타 다양한 모듈과 같은 다양한 내장 모듈이 있습니다.

모듈화: 사용 시 해당 모듈을 로드합니다.

비모듈식: 모든 모듈을 한 번에 로드합니다.

2. 모듈형 참조

Quote ../layui/layui.js

1 일반적으로 작성되는 도구 classlayui.util.js(확장 가능), jsp 페이지에서 직접 참조

var layer;var laydate;
layui.use([&#39;layer&#39;,&#39;laydate&#39;], function() {
    layer = layui.layer;
    laydate = layui.laydate;
});

② jsp 페이지

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/layui/layui.all.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/layui/layui_util.js"></script>

<script type="text/javascript">
	
  	$(function(){
		　　laydate.render({
		    　　　　elem: &#39;#test&#39; //指定元素
		 　　});
  	});
  	
	function openLayui() {
		　　layer.msg(&#39;hello&#39;);
		　　　　layer.open({
			　　　　type : 1,
			　　　　maxmin : true,
			　　　　area: [&#39;500px&#39;, &#39;300px&#39;],
			　　　　content : $(&#39;#inputId&#39;),
			　　　　btn: [&#39;确定&#39;, &#39;重置&#39;, &#39;关闭&#39;], //可以无限个按钮,
			　　　　btn1: function(index, layero){
				　　　　　　alert(parent.$("#inputId").val());
				　　　　　　//layer.close(parent.layer.getFrameIndex(window.name));
				　　　　　　layer.close(index);
			　　　　},
			　　　　btn2: function(index, layero){
				　　　　　　layer.style(index, {
				  　　　　　　　　width: &#39;80px&#39;
				　　　　　　});
				　　　　　　parent.$("#inputId").val("button");
				　　　　　　return false;
			　　　　},
			　　　　btn3: function(index, layero){
				　　　　　　alert(index);
				　　　　　　return false; 	
			　　　　}
		　　　});
		　　var index = layer.getFrameIndex(window.name);
		　　layer.title(&#39;傻逼&#39;, index);
		
	}
</script>
</head>
<body>
	　　<input type="button" onclick="openLayui()" id="inputId" value="弹框" />
	　　<input type="text" id="test"/>
</body>
</html>

3, 비모듈형 견적 #🎜🎜 #

Quote ../layui/layui.all.js

일반적으로 jsp 페이지에 도구 클래스인layui.util.js(확장 가능)를 작성합니다. 레이어를 직접 인용하고, laydate....

var layer = layui.layer;
var laydate = layui.laydate;

또는 jsp 페이지에서layui.layer,layui.laydate를 직접 사용하세요

layui에 대한 더 많은 지식은 PHP 중국어 웹사이트를 참고해주세요# 🎜🎜#layui 사용법 튜토리얼

컬럼.

위 내용은 Layui 모듈화 및 비모듈화의 다양한 참조 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

이 기사는 博客园에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.