layui模块化与非模块化的不同引用方式介绍
layui模块化与非模块化的不同引用方式:
1、模块化与非模块化的区别
layui中有许多不同的内置模块,如弹出层、日期与时间选择器、分页等不同模块。
模块化:使用时加载相应的模块。
非模块化:一次性加载所有的模块。
2、模块化的引用
引用 ../layui/layui.js
① 通常编写一个工具类 layui.util.js(可扩展),在jsp页面中直接引用
var layer;var laydate; layui.use(['layer','laydate'], 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: '#test' //指定元素 }); }); function openLayui() { layer.msg('hello'); layer.open({ type : 1, maxmin : true, area: ['500px', '300px'], content : $('#inputId'), btn: ['确定', '重置', '关闭'], //可以无限个按钮, 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: '80px' }); parent.$("#inputId").val("button"); return false; }, btn3: function(index, layero){ alert(index); return false; } }); var index = layer.getFrameIndex(window.name); layer.title('傻逼', index); } </script> </head> <body> <input type="button" onclick="openLayui()" id="inputId" value="弹框" /> <input type="text" id="test"/> </body> </html>
3、非模块化的引用
引用 ../layui/layui.all.js
通常编写一个工具类 layui.util.js(可扩展),在jsp页面直接引用 layer,laydate....
var layer = layui.layer; var laydate = layui.laydate;
或者直接在jsp页面使用layui.layer、layui.laydate 均可
更多layui知识请关注PHP中文网layui使用教程栏目。
Atas ialah kandungan terperinci layui模块化与非模块化的不同引用方式介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas



Langkah penetapan lompat halaman log masuk Layui: Tambah kod lompat: Tambah pertimbangan dalam borang log masuk serah acara klik butang, dan lompat ke halaman yang ditentukan melalui window.location.href selepas berjaya log masuk. Ubah suai konfigurasi borang: tambah medan input tersembunyi pada elemen borang lay-filter="login", dengan nama "redirect" dan nilainya ialah alamat halaman sasaran.

layui menyediakan pelbagai kaedah untuk mendapatkan data borang, termasuk mendapatkan terus semua data medan borang, mendapatkan nilai elemen bentuk tunggal, menggunakan kaedah formAPI.getVal() untuk mendapatkan nilai medan yang ditentukan, menyerikan data borang dan menggunakannya sebagai parameter permintaan AJAX, dan mendengar acara penyerahan Borang mendapat data.

Susun atur suai boleh dicapai dengan menggunakan fungsi susun atur responsif rangka kerja layui. Langkah-langkahnya termasuk: merujuk rangka kerja layui. Tentukan bekas susun atur penyesuaian dan tetapkan kelas bekas layui. Gunakan titik putus responsif (xs/sm/md/lg) untuk menyembunyikan elemen di bawah titik putus tertentu. Tentukan lebar elemen menggunakan sistem grid (layui-col-). Cipta jarak melalui offset (layui-offset-). Gunakan utiliti responsif (layui-invisible/show/block/inline) untuk mengawal keterlihatan elemen dan cara ia muncul.

Kaedah menggunakan layui untuk menghantar data adalah seperti berikut: Gunakan Ajax: Cipta objek permintaan, tetapkan parameter permintaan (URL, kaedah, data), dan proses respons. Gunakan kaedah terbina dalam: Permudahkan pemindahan data menggunakan kaedah terbina dalam seperti $.post, $.get, $.postJSON atau $.getJSON.

Perbezaan antara layui dan Vue terutamanya ditunjukkan dalam fungsi dan kebimbangan. Layui memfokuskan pada pembangunan pesat elemen UI dan menyediakan komponen pasang siap untuk memudahkan pembinaan halaman manakala Vue ialah rangka kerja tindanan penuh yang memfokuskan pada pengikatan data, pembangunan komponen dan pengurusan keadaan, dan lebih sesuai untuk membina aplikasi yang kompleks. Layui mudah dipelajari dan sesuai untuk membina halaman dengan cepat; Vue mempunyai keluk pembelajaran yang curam tetapi membantu membina aplikasi berskala dan mudah diselenggara. Bergantung pada keperluan projek dan tahap kemahiran pembangun, rangka kerja yang sesuai boleh dipilih.

Untuk menjalankan layui, lakukan langkah-langkah berikut: 1. Import skrip layui 3. Gunakan komponen layui 4. Import gaya layui (pilihan); Dengan langkah ini, anda boleh membina aplikasi web menggunakan kuasa layui.

layui ialah rangka kerja UI bahagian hadapan yang menyediakan pelbagai komponen, alatan dan fungsi UI untuk membantu pembangun membina aplikasi web moden, responsif dan interaktif dengan cepat penyesuaian. Ia digunakan secara meluas dalam pembangunan pelbagai aplikasi web, termasuk sistem pengurusan, platform e-dagang, sistem pengurusan kandungan, rangkaian sosial dan aplikasi mudah alih.

layui dan vue ialah rangka kerja bahagian hadapan adalah perpustakaan ringan yang menyediakan komponen dan alatan UI ialah rangka kerja komprehensif yang menyediakan komponen UI, pengurusan keadaan, pengikatan data, penghalaan dan fungsi lain. layui adalah berdasarkan seni bina modular, dan vue adalah berdasarkan seni bina komponen. layui mempunyai ekosistem yang lebih kecil, vue mempunyai ekosistem yang besar dan aktif. Keluk pembelajaran layui adalah rendah, dan keluk pembelajaran vue adalah curam. layui sesuai untuk projek kecil dan pembangunan pesat komponen UI, manakala vue sesuai untuk projek besar dan senario yang memerlukan fungsi yang kaya.
