フレームlayui（A）のフロントエンドを導入

使用の、layuiステップ

最初のステップは、layui公式ウェブサイトにlayui使用する必要があるhttps://www.layui.com/彼らはモジュールを使用しようとしているコンポーネントを見つけるために、内部で。
[ダウンロード]ボタンをクリックすることで、CSSやJSファイル関連layuiをダウンロードし、対応するデモを参照して学習に使用することができますが存在します。
layui使用は、一般的に二つの部分に分割され、コンポーネントを運ぶために、初期のdivコンテナを与える必要が使用されます。設定およびアセンブリlayui初期化する必要があります。この部分は、JS部分の生成に属している必要があり、実際には、何度も、直接目に見えるCSSスタイルではなく、layuiパッケージ、実際にコンテナが配置されているdiv要素に与えられています。その下に、私はあなたが表示されます、より一般的にデータlayuiのページの2種類を挙げました。

二、layuiページングデータ

言うべきことの最初の部分によると、layuiあなたが使用layui参照のjsとcssファイルに必要な、使用したいです。注：ファイルパスのスタイルを変更する必要があります。

<リンクのrel = " スタイルシート"のhref = " 〜/コンテンツ/ layui-v2.5.6 / layui / CSS / layui.css "メディア= " すべて" />
<スクリプトSRC = " 〜/コンテンツ/のlayui-v2.5.6 / layui / layui.all.js " > </ SCRIPT>

　　2.第二部では、ページにデータを与えるために必要であるのdivコンテナが開始されるデータを搬送するための

<divのクラス = " layui-タブ項目" >
                <divの上記のid =上記の「pageDemo 」 > </ div>の最も重要なことは、このコード行です。
            </ div>

　　3.第3の部分は初期のlayui位相となります

1  < スクリプト> 
2          layui.config（{
 3              版：' 1,583,393,622,887 '  // キャッシュJSを更新するためには、無視することができる
4。         }）;
 5。 
6。         layui.use（[ ' laypage ' 、' テーブル' ]、関数（）{
 7。                 、laypage = layui.laypage // タブ
。8                  、表= layui.table // 表
9              // タブ
10             laypage.render（{
 11。                 URL："" 、// 受信したアドレスAPI 
12は、                 elemは：' pageDemo '  // ID]タブコンテナ
13がある                 ：COUNT、100  // 総ページ数
14                  、皮膚：' ＃1 1E9FFF '  // セルフ選択された色値の定義
15                  // 、スキップ：オープン//真のページへのジャンプ
16                  、ジャンプ：関数（最初OBJ、）{
 17                      IF （！最初の）{
 18は                         layer.msg（' 第一'  + obj.curr +  ' 页'{オフセット：' B ' }）。
19                      }
 20                  }
 21              }）;
22  </ スクリプト>

下に示した効果の後に出て4：

フレームlayui（A）のフロントエンドを導入

おすすめ