ホームページ >ウェブフロントエンド >ライユイのチュートリアル >Lauiui モジュール化と非モジュール化のさまざまな参照方法の紹介

Lauiui モジュール化と非モジュール化のさまざまな参照方法の紹介

尚転載: 2019-12-19 17:03:412079ブラウズ

#layui モジュラーと非モジュラーのさまざまな参照方法:

1. モジュラーと非モジュラーの違い

layui には、ポップアップレイヤー、日付と時刻のピッカー、ページング、その他のさまざまなモジュールなど、さまざまな組み込みモジュールが多数あります。

モジュール化: 使用時に対応するモジュールをロードします。

非モジュール型: すべてのモジュールを一度にロードします。

2. モジュールリファレンス

リファレンス ../layui/layui.js

① 通常、ツールクラスlayui.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、非モジュール参照

Reference .. /layui/layui .all.js

通常は、ツールクラスlayui.util.js (拡張可能) を作成し、レイヤ、laydate....

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

を直接参照するか、JSP ページに直接記述します。layui を使用できます。 jsp ページの .layer およびlayui.laydate

layui の詳細については、PHP 中国語 Web サイトの

layui 使用法チュートリアル列に注目してください。

以上がLauiui モジュール化と非モジュール化のさまざまな参照方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php layui JS 选择器

声明：

この記事はcnblogs.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

前の記事：Lauiuiフレームワークフォームフォームの使用方法の紹介次の記事：Lauiuiフレームワークフォームフォームの使用方法の紹介

続きを見る