検索
ホームページウェブフロントエンドライユイのチュートリアル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 までご連絡ください。

ホット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衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

mPDF

mPDF

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