ライウイの使い方-ライユイのチュートリアル-php.cn

ホームページ

ウェブフロントエンド

ライユイのチュートリアル

ライウイの使い方

angryTom

Jul 29, 2019 am 10:39 AM

layui

ライウイの使い方

layui について詳しく知りたい場合は、次をクリックしてください: layui チュートリアル

ライウイの使い方

## まず、Layui の紹介を見てみましょう:

Layui は、独自の言語を使用して記述された感情的なフロントエンド UI です。モジュール仕様. フレームワークはネイティブ HTML/CSS/JS の記述および構成形式に従います. しきい値は非常に低く、そのまま使用できます。外観はミニマルですが、内部は充実しています。サイズは軽く、コンポーネントが豊富です。コアコードから API に至るすべての詳細が注意深く作成されており、迅速なインターフェイス開発に非常に適しています。 layui の最初のバージョンは、2016 年の黄金の秋にリリースされました。これは、MVVM の最下位層に基づいた UI フレームワークとは異なりますが、方向性に反するものではなく、自然への回帰を信じています。正確に言うと、サーバーサイドプログラマ向けにカスタマイズされたものです。さまざまなフロントエンドツールの複雑な構成に関与する必要はありません。ブラウザ自体、およびすべての要素と対話に直面するだけで済みます。必要なものがすぐに見つかります。 layui は、現在人間が使用しているすべてのブラウザ (IE6/7 を除く) と互換性があり、PC 側のバックエンドシステムおよびフロントエンドインターフェイスの迅速な開発ソリューションとして使用できます。

Layui を入手

Layui の最新バージョンは、公式 Web サイトのホームページからダウンロードできます。運用環境で使用します。ディレクトリ構造は次のとおりです。

 ├─css //css目录
  │  │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）
  │  │  ├─laydate
  │  │  ├─layer
  │  │  └─layim
  │  └─layui.css //核心样式文件
  ├─font  //字体图标目录
  ├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）
  │─lay //模块核心目录
  │  └─modules //各模块组件
  │─layui.js //基础核心库
  └─layui.all.js //包含layui.js和所有模块的合并文件

ログイン後にコピー

すぐに始めましょう

layui を入手したら、プロジェクトディレクトリ (または静的リソース) に完全にデプロイします。

./layui/css/layui.css
./layui/layui.js //提示：如果是采用非模块化方式（最下面有讲解），此处可换成：./layui/layui.all.js

ログイン後にコピー

これら 2 つのファイルをロードするだけでよく、他のファイルについて心配する必要はありません。なぜなら、それら（各モジュールなど）は、最終的に使用されるときに自動的にロードされるからです。これは基本的なエントリページです。

モジュラーアプローチ

Layui のモジュール仕様に従ってエントリファイルを作成し、Layui に渡すことをお勧めします。以下に示すように、 use() メソッドを使用してエントリファイルをロードします。

<!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="../layui/css/layui.css">
</head>
<body>
 
<!-- 你的HTML代码 -->
 
<script src="../layui/layui.js"></script>
<script>
//一般直接写在一个js文件中
layui.use([&#39;layer&#39;, &#39;form&#39;], function(){
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg(&#39;Hello World&#39;);
});
</script> 
</body>
</html>

ログイン後にコピー

#非モジュール式メソッド (つまり、すべてのモジュールが一度にロードされます) #layui のモジュール構成が気に入らない場合は、「ワンタイムロード」方式を採用することもできます。layui.js とすべてのモジュールを個別にパッケージ化し、完全な js ファイルにマージします。このファイルを直接実行します。このアプローチを採用すると、layui.use() メソッドを通じてモジュールをロードする必要がなくなり、次のように直接使用できるようになります。

<!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="../layui/css/layui.css">
</head>
<body>
 
<!-- 你的HTML代码 -->
 
<script src="../layui/layui.all.js"></script>
<script>
//由于模块都一次性加载，因此不用执行 layui.use() 来加载对应模块，直接使用即可：
;!function(){
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg(&#39;Hello World&#39;);
}();
</script> 
</body>
</html>

ログイン後にコピー

モジュール化と非モジュール化

私は依然として、必要に応じてロードするというモジュール性の概念を好みます。非モジュール式の場合、すべての js ファイルが最初にロードされるためですが、実際には一部のページではモジュールが非常に少ないため、そのような大きな js ファイルをロードする必要がないため、モジュール方式のアプローチを使用することをお勧めします。非モジュール式は便利ですが、あまり使いやすいとは言えません。

モジュール仕様

Layui のモジュールは、layui.js に内部実装された非同期モジュール読み込みメソッドに基づいており、AMD には準拠していません (結局のところ、なぜあなたは故意なのですか!)、より軽量なモジュール仕様のセットを定義しました。そして、多くの練習を重ねた結果、このメソッドは、layui のコアモジュール読み込みエンジンになりました。

プリロード

早速本題に入りますが、使い方だけを述べた方が適切です。 Layui のモジュールの読み込みでは、コアのlayui.use(mods, callback) メソッドが使用されます。JS で Layui モジュールを使用する必要がある場合は、どこにでもlayui.use を記述する手間を回避できるため、プリロードを使用することをお勧めします。最外層で次のように定義する必要があります:

/*
  Demo1.js
  使用Layui的form和upload模块
*/
layui.use([&#39;form&#39;, &#39;upload&#39;], function(){  //如果只加载一个模块，可以不填数组。如：layui.use(&#39;form&#39;)
  var form = layui.form //获取form模块
  ,upload = layui.upload; //获取upload模块
  
  //监听提交按钮
  form.on(&#39;submit(test)&#39;, function(data){
    console.log(data);
  });
  
  //实例化一个上传控件
  upload({
    url: &#39;上传接口url&#39;
    ,success: function(data){
      console.log(data);
    }
  })
});

ログイン後にコピー

ロードオンデマンド (推奨されません)

強迫性障害がある場合、Web サイトに極端なパフォーマンス要件があることに興味がない場合、必要なモジュールを事前にロードしたくないが、アクションがトリガーされたときにのみモジュールをロードする必要がある場合、これは許可されます。 JS の最外層で大きなlayui.useをラップする必要はありません。必要なのは次のとおりです:

/*
  Demo2.js
  按需加载一个Layui模块
*/
 
//……
//你的各种JS代码什么的
//……
 
//下面是在一个事件回调里去加载一个Layui模块
button.addEventListener(&#39;click&#39;, function(){
  layui.use(&#39;laytpl&#39;, function(laytpl){ //温馨提示：多次调用use并不会重复加载laytpl.js，Layui内部有做模块cache处理。
    var html = laytpl(&#39;&#39;).render({});
    console.log(html);
  });
});

ログイン後にコピー

注:

多くのモジュールを使用する必要がある場合は、このロード方法を使用することは、多くのlayui.use()を記述する必要があり、コードの保守性が高くないため、推奨されません。

プリロードを使用することをお勧めします。つまり、JS ファイルには use を記述するだけです。

モジュール名前空間

　　Layui的全部模块绑定在 layui对象下，内部由layui.define()方法来完成。每一个模块都会一个特有的名字，并且无法被占用。所以你无需担心模块的空间被污染，除非是你 delete layui.mod; 调用一个模块也必须借助layui对象的赋值。如：

layui.use([&#39;layer&#39;, &#39;laypage&#39;, &#39;laydate&#39;], function(){
  var layer = layui.layer //获得layer模块
  ,laypage = layui.laypage //获得laypage模块
  ,laydate = layui.laydate; //获得laydate模块
  
  //使用模块
});

ログイン後にコピー

　　一个模块一旦加载后，就会注册在layui对象下，所以你无法直接用模块名来获得，而同样借助layui对象。譬如有时你可能会直接在元素的事件属性上去调用一个模块，如：

<input onclick="layui.laydate()">

ログイン後にコピー

扩展一个Layui模块

　　layui 官方提供的模块有时可能还无法满足你，或者你试图按照layer的模块规范来扩展一个模块。那么你有必要认识layui.define()方法，相信你在文档左侧的“底层方法”中已有所阅读。下面就就让我们一起扩展一个Layui模块吧：

　　第一步：确认模块名，假设为：test，然后新建一个test.js 文件放入项目任意目录下（注意：不用放入layui目录）

　　第二步：编写test.js 如下：

/**
  扩展一个test模块
**/      
layui.define(function(exports){ //提示：模块也可以依赖其它模块，如：layui.define(&#39;layer&#39;, callback);
  var obj = {
    hello: function(str){
      alert(&#39;Hello &#39;+ (str||&#39;test&#39;));
    }
  };
  //输出test接口
  exports(&#39;test&#39;, obj);
});

ログイン後にコピー

　　第三步：设定扩展模块所在的目录，然后就可以在别的JS文件中使用了

//config的设置是全局的
layui.config({
  base: &#39;/res/js/&#39; //假设这是test.js所在的目录
}).extend({ //设定模块别名
  test: &#39;test&#39; //如果test.js是在根目录，也可以不用设定别名
  ,test1: &#39;admin/test1&#39; //相对于上述base目录的子目录
});
 
//使用test
layui.use(&#39;test&#39;, function(){
  var test = layui.test;
  
  test.hello(&#39;World!&#39;); //弹出Hello World!
});
//使用test1
layui.use(&#39;test1&#39;, function(){
  var test = layui.test1;
  
  //……
});

ログイン後にコピー

大体上来说，Layui的模块定义很类似Require.js和Sea.js，但跟他们又有着明显的不同，譬如在接口输出等地方。
以上がライウイの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

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

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
2週間前 By 尊渡假赌尊渡假赌尊渡假赌

スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？
1 か月前 By DDD

R.E.P.O.最高のグラフィック設定
2週間前 By 尊渡假赌尊渡假赌尊渡假赌

アサシンのクリードシャドウズ：シーシェルリドルソリューション
1週間前 By DDD

R.E.P.O.誰も聞こえない場合はオーディオを修正する方法
3週間前 By 尊渡假赌尊渡假赌尊渡假赌

もっと見る

ホットツール

メモ帳++7.3.1

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

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7413

15

CakePHP チュートリアル

1359

52

Steamのアカウント名の形式は何ですか

76

11

Win11 Activation Key Permanent

20

19

もっと見る

Related knowledge

Lauiuiでフォームデータを取得する方法 Apr 04, 2024 am 03:39 AM
layui は、フォームのすべてのフィールドデータを直接取得する、単一のフォーム要素の値を取得する、formAPI.getVal() メソッドを使用して指定されたフィールド値を取得する、フォームデータをシリアル化するなど、フォームデータを取得するためのさまざまなメソッドを提供します。これを AJAX リクエストパラメータとして使用し、フォーム送信イベントをリッスンしてデータを取得します。

Lauiuiログインページでジャンプを設定する方法 Apr 04, 2024 am 03:12 AM
Layui ログインページジャンプ設定手順: ジャンプコードの追加: ログインフォーム送信ボタンクリックイベントに判定を追加し、ログイン成功後、window.location.href 経由で指定ページにジャンプします。フォーム構成を変更します。lay-filter="login" のフォーム要素に非表示の入力フィールドを追加します。名前は「redirect」、値はターゲットページアドレスです。

Lauiui が自己適応を実現する方法 Apr 26, 2024 am 03:00 AM
アダプティブレイアウトは、layui フレームワークのレスポンシブレイアウト機能を使用して実現できます。手順には以下が含まれます:layui フレームワークを参照する。アダプティブレイアウトコンテナを定義し、layui-container クラスを設定します。レスポンシブブレークポイント (xs/sm/md/lg) を使用して、特定のブレークポイントの下にある要素を非表示にします。グリッドシステム (layui-col-) を使用して要素の幅を指定します。オフセット (layui-offset-) によって間隔を作成します。応答性の高いユーティリティ (layui-invisible/show/block/inline) を使用して、要素の可視性とその表示方法を制御します。

lauiとvueの違いは何ですか？ Apr 04, 2024 am 03:54 AM
Lauiui と Vue の違いは主に機能と懸念事項に反映されます。 Layui は UI 要素の迅速な開発に重点を置き、ページ構築を簡素化するプレハブコンポーネントを提供します。Vue は、データバインディング、コンポーネント開発、および状態管理に重点を置いたフルスタックフレームワークで、複雑なアプリケーションの構築により適しています。 Layui は学習が簡単で、ページをすばやく作成するのに適しています。Vue は学習曲線が急ですが、スケーラブルで保守が簡単なアプリケーションの構築に役立ちます。プロジェクトのニーズと開発者のスキルレベルに応じて、適切なフレームワークを選択できます。

レイウイの実行方法 Apr 04, 2024 am 03:42 AM
layui を実行するには、次の手順を実行します: 1.layui スクリプトをインポートします; 2.layui を初期化します; 3.layui コンポーネントを使用します; 4.layui スタイルをインポートします (オプション); 5. スクリプトの互換性を確認し、その他の考慮事項に注意してください。これらの手順により、layui の機能を使用して Web アプリケーションを構築できます。

Lauiui フレームワークは何語ですか? Apr 04, 2024 am 04:39 AM
layui フレームワークは、開発者が応答性の高い Web アプリケーションを迅速に構築できるようにする、使いやすい UI コンポーネントとツールのセットを提供する JavaScript ベースのフロントエンドフレームワークです。その機能には、モジュール式、軽量、応答性が高く、完全なドキュメントとコミュニティサポートが含まれます。 layui は、管理バックエンドシステム、電子商取引 Web サイト、モバイルアプリケーションの開発で広く使用されています。利点は迅速な起動、効率の向上、メンテナンスの容易さですが、欠点はカスタマイズの貧弱さと技術の更新の遅さです。

Lauiui フレームワークと Vue フレームワークの違い Apr 26, 2024 am 01:27 AM
layui と vue はフロントエンドフレームワークであり、layui は UI コンポーネントとツールを提供する軽量ライブラリであり、vue は UI コンポーネント、状態管理、データバインディング、ルーティングなどの機能を提供する包括的なフレームワークです。 layui はモジュール型アーキテクチャに基づいており、vue はコンポーネント化されたアーキテクチャに基づいています。 lauiui には小規模なエコシステムがあり、vue には大規模でアクティブなエコシステムがあります。 Lauiui の学習曲線は低く、vue の学習曲線は急です。 Layui は小規模なプロジェクトや UI コンポーネントの迅速な開発に適しており、vue は大規模なプロジェクトや豊富な機能を必要とするシナリオに適しています。

ライウイとエレメントイはどっちがいいですか？ Apr 04, 2024 am 04:15 AM
質問:layui と ElementUI のどちらが優れていますか?回答: それはプロジェクトの要件によって異なります。 Layui はより包括的でカスタマイズ可能で大規模なプロジェクトに適していますが、ElementUI はより軽量で美しく、使いやすいです。選択の具体的な理由は次のとおりです:layui を選択: コンポーネントの外観と動作を高度にカスタマイズできる幅広い機能とモジュールを提供します。幅広い機能と拡張性を必要とする大規模なプロジェクトに適しています。ElementUI を選択します:サイズが小さくなり、読み込み速度が速くなり、コンポーネントはマテリアルデザインの原則に準拠し、高い美観が得られ、多数の既製コンポーネントが提供され、開発の複雑さと時間が削減されます。

See all articles