ホームページ > 記事 > ウェブフロントエンド > Lauii の使い方の概要
Layui を入手する
Layui の最新バージョンは、公式 Web サイトのホームページからダウンロードできます。または、 GitHub を経由して、Layui のオープンソース パッケージを取得できます。現在、これら 2 つのリソース チャネルのみが同時に維持されます。通常、実際のプロジェクトで使用する場合は、公式 Web サイトから直接ダウンロードすることをお勧めします。構築後のlayuiの構造(つまり、入手したパッケージ)
├─css //css目录 │ └─modules //模块css目录(一般如果模块相对较大,我们会单独提取) │ ├─laydate │ ├─layer │ │ └─default │ └─layim │ └─skin ├─font //字体图标目录 ├─images //图片资源目录(一些表情等) │ └─face └─lay //JS目录 │ ├─dest //经过合并的完整模块 │ └─modules //各模块/组件 └─layui.js
すぐに始めましょう
layuiを入手したら、プロジェクトディレクトリ(または静的リソース サーバー) の場合、次の 2 つのファイルを導入するだけで済みます。
./layui/css/layui.css ./layui/layui.js
はい、他のファイルについて心配する必要はありません。なぜなら、それら(各モジュールなど)は、最終的に使用されるときに自動的にロードされるからです。これは基本的な紹介ページです:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>开始使用Layui</title> <link rel="stylesheet" href="build/css/layui.css"> </head> <!-- 你的HTML代码 --> <script src="build/layui.js"></script> <script> //一般直接写在一个js文件中 layui.use(['layer', 'form'], function(){ var layer = layui.layer ,form = layui.form(); layer.msg('Hello World'); }); </script> </body> </html>
標準化された使用法 (推奨)
Layui コンポーネントをすぐに使用したい場合は、通常どおり script タグを導入できます。 js ファイルを作成し、js ファイルでlayui のコンポーネントを使用します。ただし、Layui のモジュール仕様に従い、入り口として独自のモジュールを作成することをお勧めします。
<script> layui.config({ base: '/res/js/modules/' //你的模块目录 }).use('index'); //加载入口 </script>
上記のインデックスは、/res/js/modules/ ディレクトリ内のindex.js であり、その内容は次のようになります。
<script> /** 项目JS主入口 以依赖Layui的layer和form模块为例 **/ layui.define(['layer', 'form'], function(exports){ var layer = layui.layer ,form = layui.form(); layer.msg('Hello World'); exports('index', {}); //注意,这里是模块输出的核心,模块名必须和use时的模块名一致 }); </script>
簡単で大まかな使用法
Layui のモジュール性がまだ少し冗長だと思われる場合でも、それは問題ではありません。 Layui はあなたのような類人猿を考慮しています。layui.js とすべてのモジュールを個別に完全な js ファイルにパッケージ化してマージします。使用するときにこのファイルを直接インポートできます。この方法を採用すると、layui.use を通じてモジュールをロードする必要がなくなり、次のように直接使用できます。
<script src="../layui/lay/dest/layui.all.js"></script> <script> ;!function(){ //当使用了 layui.all.js,无需再执行layui.use()方法 var from = layui.form() ,layer = layui.layer; //… }(); </script>
ただし、この使用方法は Layui のモジュール性を意味することを知っておく必要があります。その意味が失われてしまいました。しかし、それが何よりもシンプルであることは否定できません。
layui の詳細については、layui 使用法チュートリアル 列に注目してください。
以上がLauii の使い方の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。