検索
ホームページウェブフロントエンドライユイのチュートリアルLayUIサードパーティプラグイン開発仕様の詳細説明

LayUIサードパーティプラグイン開発仕様の詳細説明

この仕様には、合計 4 つの内容があります: 1. プラグインの使用ディレクトリを指定する、2. プラグインの CSS スタイルのプレフィックスを指定する、3. プラグインの統一パッケージ化を指定するプラグイン、4. プラグインの導入方法を指定します。

1. ディレクトリ

まずディレクトリの写真を撮ってみましょう

LayUIサードパーティプラグイン開発仕様の詳細説明

ディレクトリ構造の説明 (写真で理解します)
mod_name は次のことを表しますプラグインの名前、作成者はサードパーティの作成者を表します

layui                       layui框架目录
├─ css                      layui官方样式目录
├─ font                     layui官方字体目录
├─ images                   layui官方表情目录
├─ lay                      layui官方模块目录
│
├─ mods                     layui插件目录
│  ├─ extend                项目开发者目录
│  │  ├─ mod_name           项目开发者mod_name插件的目录
│  │  │  ├─ mod_name.js     项目开发者mod_name插件本体
│  │  │  ├─ mod_name.css    项目开发者mod_name插件样式
│  │  │  └─ ...
│  │  └─ ...
│  │
│  ├─ author                第三方作者目录
│  │  ├─ mod_name           第三方mod_name插件的目录
│  │  │  ├─ mod_name.js     第三方mod_name插件本体
│  │  │  ├─ mod_name.css    第三方mod_name插件样式
│  │  │  └─ ...
│  │  └─ ...
│  └─ ...
│
├─ layui.all.js             一次性载入layui
└─ layui.js                 模块化载入layui

2. スタイル

LayUIサードパーティプラグイン開発仕様の詳細説明Style Scss を使用して作成することをお勧めします。良い巣作り。 umd3.scss のデモをご覧いただくことをお勧めします (デモのあとがきを参照)。

他のフロントエンド フレームワークとの競合など、異なるプラグイン作成者間のスタイルの競合を防ぐため。したがって、lay で始まり、その後に作成者名が続くことを規定します。作成者名 [lay-vlice] を省略してから、btn [lay-vlice-btn] のようにスタイル モジュール名を続けます。好きなだけスタイルを書いてください。多数のプラグインがある場合、相互に競合しないように、プラグイン名を追加することをお勧めします。最終クラスは [lay-vlice-umd-btn] です。

これによりクラスが非常に長くなってしまいます。同じクラスを何度も書くのは面倒ではないでしょうか?これが、Scss の使用をお勧めする理由です。

3. カプセル化

オリジナルのプラグインまたはサードパーティのプラグインには、次の 3 つの状況があります:

1. ネイティブ JS で書かれた基本的なプラグイン(Vue.js など)

2. JQuery に基づいて作成された JQ プラグイン (Select2.js など)

3.layui に基づいて作成された高度なプラグイン (FormSelects .jsなど)。

UMD パッケージ化は、これら 3 つの状況をサポートできます。したがって、プラグインの作成には UMD を使用することをお勧めします。

(1) プリクラスなしの UMD カプセル化 - ネイティブ js

LayUIサードパーティプラグイン開発仕様の詳細説明

(2) JQuery に基づく UMD カプセル化 - JQ プラグイン

LayUIサードパーティプラグイン開発仕様の詳細説明(3) Lauiui ベースの UMD カプセル化記述方法 - 高度なプラグイン

##4. はじめにLayUIサードパーティプラグイン開発仕様の詳細説明

時間をかけてプラグイン ローダー ベースのプラグインを書きましたテスト後、公式モジュールとサードパーティのプラグインは正常に導入できますが、コンピュータのパフォーマンスやネットワークの状況によっては、約 100 ~ 400 ミリ秒の遅延が発生します。大きな問題ではありません。ここではこの仕様に基づいて開発されたLayUIプラグインの導入方法を説明します。


まず、私のローダー
mods.js をダウンロードする必要があります。ローダーは [layui/mods/mods.js] にあります。それを入手するための最初のステップは、次のリストを変更することです。ローダー変数。

LayUIサードパーティプラグイン開発仕様の詳細説明

layui.use を使用してローダーを導入します。次に、公式モジュールまたはサードパーティのプラグインを MOD に導入し、ローダーのコールバックにビジネス コードを記述します。詳細については、私が作成したデモを確認してください (追記でダウンロード)

layui.use('mods',function(mods){
    // umd2和umd3都是扩展插件,所以放到最后。
    mods(['layer','form','umd1','umd2','umd3'],function(layer,form,umd1){
        var $ = layui.$;

        layer.msg();
        form.render();
        umd1.func();
        $.umd2();
        $('body').umd2();

        // umd3扩展
        layer.maxopen();
    });
});

Example

https://cdn.vlice.cn/layui/layui-2.3.0.zip

layui の詳細については、

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

以上がLayUIサードパーティプラグイン開発仕様の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事はfly社区で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
如何利用Layui实现图片轮播图功能如何利用Layui实现图片轮播图功能Oct 24, 2023 am 08:27 AM

如何利用Layui实现图片轮播图功能现如今,图片轮播图已经成为了网页设计中常见的元素之一。它可以使网页更加生动活泼,吸引用户的眼球,提升用户体验。在本文中,我们将介绍如何利用Layui框架来实现一个简单的图片轮播图功能。首先,我们需要在HTML页面中引入Layui的核心文件和样式文件:<linkrel="stylesheet"h

2023最新layui视频教程推荐(建议收藏)2023最新layui视频教程推荐(建议收藏)Jul 19, 2021 pm 05:22 PM

以下为大家整理了前端UI框架 — layui的视频教程,不需要从迅雷、百度云之类的第三方网盘平台下载,全部在线免费观看。教程由浅入深,有前端基础的人就能学习,从安装到案例讲解,全面详细,帮助你更快更好的掌握layui框架!

如何利用Layui开发一个具有分页功能的数据展示页面如何利用Layui开发一个具有分页功能的数据展示页面Oct 24, 2023 pm 01:10 PM

如何利用Layui开发一个具有分页功能的数据展示页面Layui是一个轻量级的前端UI框架,提供了简洁美观的界面组件和丰富的交互体验。在开发中,我们经常会遇到需要展示大量数据并进行分页的情况。以下是一个利用Layui开发的具有分页功能的数据展示页面的示例。首先,我们需要引入Layui的相关文件和依赖。在html页面的<head>标签中加入以下代

如何利用Layui实现图片拖拽和缩放效果如何利用Layui实现图片拖拽和缩放效果Oct 24, 2023 am 09:16 AM

如何利用Layui实现图片拖拽和缩放效果在现代网页设计中,图片的交互效果成为增加网页活力和用户体验的重要手段。其中,图片拖拽和缩放效果是常见且受欢迎的交互方式之一。本文将介绍如何使用Layui框架实现图片拖拽和缩放效果,并提供具体的代码示例。一、引入Layui框架和相关依赖:首先,我们需要在HTML文件中引入Layui框架和相关依赖。可以通过以下代码示例引入

如何利用Layui实现图片反色和亮度调节功能如何利用Layui实现图片反色和亮度调节功能Oct 25, 2023 am 09:10 AM

如何利用Layui实现图片反色和亮度调节功能引言:在前端开发中,经常会遇到需要对图片进行特效处理的情况。本文将介绍如何利用Layui框架实现图片反色和亮度调节功能,并提供具体代码实例供参考。一、Layui简介:Layui是一款优秀的前端UI框架,具有简洁、美观、易用等特点。它提供了丰富的前端组件,让开发者能够轻松搭建出精美的网站。二、准备工作:在开始之前,我

如何使用Layui开发一个支持文件上传和下载的资源管理系统如何使用Layui开发一个支持文件上传和下载的资源管理系统Oct 24, 2023 am 09:19 AM

如何使用Layui开发一个支持文件上传和下载的资源管理系统引言:随着互联网的发展,数据资源的管理已经成为一项重要的任务。无论是企业内部的文档管理,还是个人的文件存储,都需要一个高效且易于使用的资源管理系统。Layui是一款轻量级的前端框架,具有简洁明了的设计以及丰富的组件库,非常适合用来进行资源管理系统的开发。本文将介绍如何使用Layui开发一个支持文

如何使用Layui开发一个支持图片放大缩小的相册功能如何使用Layui开发一个支持图片放大缩小的相册功能Oct 24, 2023 am 09:02 AM

如何使用Layui开发一个支持图片放大缩小的相册功能相册功能在现代的网页应用中非常常见,通过展示用户上传的图片,让用户能够方便地浏览和管理图片。为了提供更好的用户体验,一种常见的需求是支持图片的放大和缩小功能。本文章将介绍如何使用Layui框架开发一个支持图片放大缩小的相册功能,同时提供具体的代码示例。首先,确保您已经引入Layui框架的CSS和JS文件。您

如何使用Layui框架开发一个支持实时通讯的在线客服系统如何使用Layui框架开发一个支持实时通讯的在线客服系统Oct 25, 2023 am 08:47 AM

如何使用Layui框架开发一个支持实时通讯的在线客服系统概述:在线客服系统是现代企业提供与客户交流的重要渠道之一,而实时通讯是在线客服系统的关键技术之一。本文将介绍如何使用Layui框架开发一个支持实时通讯的在线客服系统,并提供具体的代码示例。一、准备工作安装Node.js:在开发环境中安装Node.js,并配置好相关环境。安装Layui:在项目中引入Lay

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。