Penggunaan JQuery EasyUI_jquery

jQuery EasyUI ialah rangka kerja berasaskan jQuery yang menyepadukan pelbagai pemalam antara muka pengguna.

Pengenalan EasyUI

easyui ialah koleksi pemalam antara muka pengguna berdasarkan jQuery.

easyui menyediakan fungsi yang diperlukan untuk mencipta aplikasi JavaScript yang moden, interaktif.

Menggunakan easyui, anda tidak perlu menulis banyak kod Anda hanya perlu menentukan antara muka pengguna dengan menulis beberapa teg HTML yang mudah.

easyui ialah rangka kerja lengkap yang menyokong halaman web HTML5 dengan sempurna.

easyui menjimatkan masa dan skala pembangunan web anda.

easyui sangat ringkas tetapi berkuasa.

Artikel ini memfokuskan pada dua cara untuk menggunakan EasyUI, termasuk pemuatan yang berbeza dan pemuatan atas permintaan pintar dengan mudah. Akhir sekali, pelajari cara menggunakan parser Parser.

Nota: Semua kod akan diperkenalkan pada halaman terakhir artikel

1. Import fail yang diperlukan

Memandangkan jQuery EasyUI1.4.4 baru sahaja dikemas kini, kemas kini versi kecil ini terutamanya pengoptimuman dalaman dan beberapa penalaan halus UI, yang tidak menjejaskan pembelajaran. Sebelum ini, kami menggunakan versi 1.2.4 manual bahasa Cina untuk mempelajari 1.3.5 tanpa sebarang halangan, jadi tidak perlu risau tentang isu versi.

Struktur direktori JQuery EasyUI sepanjang artikel kami adalah seperti yang ditunjukkan di bawah

Folder easyui ialah tempat semua fail yang akan digunakan oleh JQuery EasyUI disimpan

Folder JS menyimpan fail JS kami sendiri

index.html adalah untuk menyimpan kod html yang kami tulis sendiri

//引入 jQuery 核心库，这里采用的是 .
<script type="text/javascript" src="easyui/jquery.min.js"></script>
//引入 jQuery EasyUI 核心库，这里采用的是 ..
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
//引入 EasyUI 中文提示信息
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
//引入自己开发的 JS 文件
<script type="text/javascript" src="js/index.js"></script>
//引入 EasyUI 核心 UI 文件 CSS
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
//引入 EasyUI 图标文件
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />

PS: Selepas pengenalan selesai, kita boleh menulis kod jQuery EasyUI.

2. Cara memuatkan komponen UI

Terdapat dua cara untuk memuatkan komponen UI: 1. Muatkan menggunakan kaedah kelas 2. Muatkan menggunakan panggilan JS.

//使用 class 加载，格式为：easyui-组件名
<div class="easyui-dialog" id="box" title="标题" style="width:px;height:px;">
内容部分
</div>

PS: Komponen UI boleh dijana menggunakan format yang ditentukan Ini disebabkan oleh peranan penghurai (Parser) jQuery EasyUI. Selepas menghuraikan, anda boleh melihat HTML yang diubah bagi komponen UI daripada Firebug.

//使用 JS 调用加载
$('#box').dialog();

PS: Secara umumnya disyorkan untuk menggunakan panggilan JS kedua untuk memuatkan, kerana komponen UI mempunyai banyak sifat dan kaedah, dan ia akan menjadi sangat menyusahkan untuk menggunakan kelas. Dan berdasarkan prinsip pemisahan JS dan HTML, yang kedua meningkatkan kebolehbacaan kod.

3. Gunakan easyload.js untuk memuatkan

dengan bijak

//删除 jQuery EasyUI 的 JS 核心文件及 CSS，引入 easyloader.js 文件
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/easyloader.js"></script>
//JS 代码
easyloader.load('dialog', function () {
$('#box').dialog();
});

PS: Gunakan pemuat mudah untuk memuatkan secara bijak, yang memuatkan atas permintaan mengikut komponen UI yang anda gunakan. Kami boleh melihat HTML melalui Firebug dan mendapati bahawa banyak fail js dimuatkan ini adalah semua syarat yang diperlukan untuk komponen dialog. Oleh itu, menggunakan pemuat mudah untuk memuatkan akan mengurangkan pemuatan kandungan yang tidak perlu. Tetapi masalahnya ialah dengan pemuatan pintar, kesukaran dan kos pengekodan anda meningkat, dan kecekapan dikurangkan Selain itu, bilangan fail js yang dimuatkan dengan bijak masih sangat besar, yang tidak akan meningkatkan kelajuan terlalu banyak. Sebaliknya, kerana terdapat lebih banyak fail js, ia akan disekat Enjin carian memerlukan pengoptimuman gabungan.

4. Penghurai

Penghurai penghurai khusus dalam menghurai dan memaparkan pelbagai komponen UI Secara umumnya, kita tidak perlu menggunakannya untuk melengkapkan penghuraian komponen UI secara automatik. Sudah tentu, kadangkala penghuraian manual mungkin diperlukan dalam keadaan tertentu.
Penghuraian manual secara amnya berkesan apabila menggunakan kelas, seperti menetapkan class="easyui-dialog".

Atribut penghurai

Nama atribut Nilai lalai Perihalan

$.parser.auto true 定义是否自动解析 EasyUI 组件
//关闭自动解析功能，放在$(function() {})外
$.parser.auto = false;

Kaedah penghurai

Nama atribut Perihalan parameter

$.parser.parse 空或 JQ 选择器 解析指定的 UI 组件
$.parser.onComplete 回调函数 解析完毕后执行
//解析所有 UI
$.parser.parse();
//解析指定的 UI
$.parser.parse('#box');

PS: Untuk menggunakan UI yang ditentukan untuk menghuraikan, anda mesti menetapkan bekas kelas induk untuk menghuraikannya. Contohnya:

<div id="box">
<div class="easyui-dialog" title="标题" style="width:400px;height:200px;">
<span>内容部分</span>
</div>
</div>
//UI 组件解析完毕后执行，放在$(function () {})外
$.parser.onComplete = function () {
alert('UI 组件解析完毕！');
};

Kandungan di atas memperkenalkan anda kepada penggunaan JQuery EasyUI, saya harap ia akan membantu anda!