Lauiuiポップアップレイヤーの使い方

layui ポップアップ レイヤーの使用方法: 最初に jQuery1.8 以降のバージョンを導入し、次に laery.js を導入し、最後に「function show(){var a =layer.open({. ..}) ;}" メソッドを使用すると、laery.open を使用してレイヤーをポップアップできます。

#このチュートリアルの動作環境: Windows 7 システム、layui2.4&&jquery2.2.1 バージョン、Dell G3 コンピューター。

おすすめ: 「

layUI チュートリアル 」

layui システムにおけるレイヤーの位置は非常に特殊で、多くの人がlayui = レイヤー ui と誤解していることさえあります。レイヤーを再度強調しますlayuiのエラスティックレイヤーモジュールと同じように

#1. laeryを入手するには、公式Webサイトにアクセスしてlaery.jsアドレスをダウンロードする必要があります - http://layer.layui.com/

2. laery .js の導入 その前に、まず jQuery 1.8 以降のバージョンを導入する必要があります

<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script src="layer/layer.js"></script>

3. laery.open();

function show(){
  var a = layer.open({
    type: 2,
    area: ['80%','450px'],
    title: '我是标题',
    shadeClose: true,
    content: ['layer_model.html','no']
  });
}

基本パラメータを使用します

1. type type

type: 1,  // 0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）

2. title title

title:"我是标题",  
//若你还需要自定义标题区域样式，那么你可以title: ['文本', 'font-size:18px;'] 数组第二项可以写任意css样式；
//如果你不想显示标题栏，你可以 title: false

3. content content

3.1. ページ レイヤーの場合

layer.open({
  type: 1, 
  content: '传入任意的文本或html' //这里content是一个普通的String
});
 
layer.open({
  type: 1,
  content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
});
 
//Ajax获取
$.post('url', {}, function(str){
  layer.open({
    type: 1,
    content: str //注意，如果str是object，那么需要字符拼接。
  });
});

例:

3.2. iframe レイヤーの場合

layer.open({
  type: 2, 
  content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
});

例:

#3.3. Layer.open を使用してヒントを実行する場合 Layer

layer.open({
  type: 4,
  content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
});

Example:

4. 領域の幅と高さ

Inデフォルトの状態では、レイヤーは幅と高さの両方に適応しますが、幅のみを定義したい場合は、 area: '500px' に設定しても高さは適応されます。幅と高さの両方を定義する必要がある場合は、次のように指定できます: ['500px', '300px']

5. btn ボタン

情報ボックス モードでは、btn は確認ボタンです。他のレイヤー タイプはデフォルトでは表示されず、読み込みレイヤーとヒント レイヤーは無効です。 1 つのボタンだけをカスタマイズしたい場合は、「知っています」ボタンを押すことができます。2 つのボタンを定義したい場合は、[「はい」、「いいえ」] ボタンを押すことができます。もちろん、さらに多くのボタンを定義することもできます。 btn: ['Button 1', 'Button 2', 'Button 3', ...]、ボタン 1 のコールバックは Yes で、ボタン 2 から開始します。コールバックは btn2 : function(){} などです。例:

layer.open({
  content: 'test',
  btn: ['按钮一', '按钮二', '按钮三'],
  yes: function(index, layero){
    //按钮【按钮一】的回调
  },
  btn2: function(index, layero){
    //按钮【按钮二】的回调
    //return false 开启该代码可禁止点击该按钮关闭
  },
  btn3: function(index, layero){
    //按钮【按钮三】的回调
    //return false 开启该代码可禁止点击该按钮关闭
  },
  cancel: function(){ 
    //右上角关闭回调
    //return false 开启该代码可禁止点击该按钮关闭
  }
});

6、シェード マスク

は、スプリング レイヤの外側の領域です。デフォルトは、透明度 0.3 の黒の背景 ('#000') です。他の色を定義したい場合は、シェーディングを行うことができます: [0.8, '#393D49']; マスクを表示したくない場合は、次のようにすることができます。 shade: 0

マスクが存在する場合は、shadeClose を設定して、マスクをクリックして閉じるかどうかを制御することもできます。デフォルト: false。シェードが存在する場合は、shadeClose を設定して、領域のクリックを制御することもできます弾性層の外側で閉じます

以上がLauiuiポップアップレイヤーの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。