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

ライウイの使い方

angryTom

リリース： 2019-07-31 10:09:39

オリジナル

15877 人が閲覧しました

ライウイの使い方

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

##layuiとは

考えるだけで実装できるWebポップアップ（レイヤー）ソリューション（jsコンポーネント）Layer（作者）シアンシン。このレイヤーは、さまざまな人々の使用習慣に合わせてパワーを提供する、ユーザーによる柔軟なカスタマイズに焦点を当てています。重要なのは、ページにより豊かで便利な操作エクスペリエンスを提供できることです。これは、呼び出し時に関連パラメーターを構成するだけで簡単に実現できます。 —–百度百科事典より

レイヤーコンポーネントのユーザー数に基づいて、layui フレームワークが非常に優れていることがわかります。次に、layui の旅を始めましょう。

ライウイの使い方

Layui 構造

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

ログイン後にコピー

Layui 組み込みモジュール

ライウイの使い方 ##以下は、私がより重要だと思ういくつかのコンポーネントモジュールのリストです

結局のところ、私はフロントエンドに特化しているわけではありません。

ライウイの使い方

Layui の入手

Layui 公式 Web サイトから入手してください。ライユイ公式サイト。

Layer elastic レイヤーの美しさ

Layer にアクセスして、レイヤーコンポーネントを取得し、プロジェクトにインポートすることでも取得できます。具体的なステップ構造については、以下の図を参照してください。

1. jQuery フレームワークをページに導入します

2. ダウンロードしたレイヤーフォルダーを完全にコピーします。

3. レイヤーディレクトリにlayer.js ファイルを導入します

## 4. レイヤーのエラスティックジャーニーを開始します

#初めての経験ライウイの使い方

 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>layer弹层之美</title>
  <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
  <script type="text/javascript" src="layer/layer.js" ></script>
</head>
<script type="text/javascript">
      $(function(){
        $("#btn").click(function(){
             //询问框
                        layer.confirm(&#39;您是如何看待前端开发？&#39;, {
                          btn: [&#39;重要&#39;,&#39;奇葩&#39;] //按钮
                        }, function(){
                          layer.msg(&#39;的确很重要&#39;, {icon: 1});
                        }, function(){
                          layer.msg(&#39;也可以这样&#39;, {
                            time: 20000, //20s后自动关闭
                            btn: [&#39;明白了&#39;, &#39;知道了&#39;]
                          });
                        });
        })
      })
</script>
<body>
    <input type="button" value="提交" id="btn"/>
</body>
</html>

ログイン後にコピー

ここでは簡単なデモンストレーションのみを行います。さらに弾性層の実装については、具体的な実装を参照してください。コードはLayer公式Webサイトに掲載されています。

うわー

以上がライウイの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。