Lauii の使い方の概要

Nov 27, 2019 am 11:56 AM
layui

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([&#39;layer&#39;, &#39;form&#39;], function(){
          var layer = layui.layer
          ,form = layui.form();
          
           layer.msg(&#39;Hello World&#39;);
          
        });
        
    </script> 
    </body>
</html>
ログイン後にコピー

標準化された使用法 (推奨)

Layui コンポーネントをすぐに使用したい場合は、通常どおり script タグを導入できます。 js ファイルを作成し、js ファイルでlayui のコンポーネントを使用します。ただし、Layui のモジュール仕様に従い、入り口として独自のモジュールを作成することをお勧めします。

<script>
layui.config({
  base: &#39;/res/js/modules/&#39; //你的模块目录
}).use(&#39;index&#39;); //加载入口
</script>
ログイン後にコピー

上記のインデックスは、/res/js/modules/ ディレクトリ内のindex.js であり、その内容は次のようになります。

<script>
/**
  项目JS主入口
  以依赖Layui的layer和form模块为例
**/    
layui.define([&#39;layer&#39;, &#39;form&#39;], function(exports){
  var layer = layui.layer
  ,form = layui.form();
  
  layer.msg(&#39;Hello World&#39;);
  
  exports(&#39;index&#39;, {}); //注意,这里是模块输出的核心,模块名必须和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 サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、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衣類リムーバー

AI Hentai Generator

AI Hentai Generator

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

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Lauiuiでフォームデータを取得する方法 Lauiuiでフォームデータを取得する方法 Apr 04, 2024 am 03:39 AM

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

Lauiuiログインページでジャンプを設定する方法 Lauiuiログインページでジャンプを設定する方法 Apr 04, 2024 am 03:12 AM

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

Lauiui が自己適応を実現する方法 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の違いは何ですか? 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 フレームワークは何語ですか? Lauiui フレームワークは何語ですか? Apr 04, 2024 am 04:39 AM

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

Lauiui フレームワークと Vue フレームワークの違い 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