ホームページ > 記事 > ウェブフロントエンド > Lauii の使い方の概要
Lauii の使い方の概要
- 尚転載
- 2019-11-27 11:56:442619ブラウズ
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 サイトの他の関連記事を参照してください。