この仕様には、合計 4 つの内容があります: 1. プラグインの使用ディレクトリを指定する、2. プラグインの CSS スタイルのプレフィックスを指定する、3. プラグインの統一パッケージ化を指定するプラグイン、4. プラグインの導入方法を指定します。
1. ディレクトリ
まずディレクトリの写真を撮ってみましょう
ディレクトリ構造の説明 (写真で理解します)
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. スタイル
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
(2) JQuery に基づく UMD カプセル化 - JQ プラグイン
(3) Lauiui ベースの UMD カプセル化記述方法 - 高度なプラグイン
##4. はじめに
まず、私のローダー
mods.js をダウンロードする必要があります。ローダーは [layui/mods/mods.js] にあります。それを入手するための最初のステップは、次のリストを変更することです。ローダー変数。
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 サイトの他の関連記事を参照してください。

ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター

ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境

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

メモ帳++7.3.1
使いやすく無料のコードエディター

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

ホットトピック









