Comment utiliser la couche contextuelle layui

Comment utiliser la couche contextuelle layui : introduisez d'abord n'importe quelle version de jQuery1.8 ou supérieure ; puis introduisez laery.js ; enfin, passez "function show(){var a = layer.open({. ..}) ;}" peut être utilisée pour faire apparaître le calque à l'aide de laery.open.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version layui2.4&&jquery2.2.1, ordinateur Dell G3.

Recommandé : "tutoriel layUI"

le calque a une position spéciale dans le système layui, et beaucoup de gens pensent même à tort que layui = layer ui, donc le calque est mis en valeur encore une fois Tout comme un module de couche élastique de layui

1 Pour obtenir laery, vous devez vous rendre sur le site officiel pour télécharger l'adresse laery.js --http://layer.layui.com/

.

2. Présentez laery .js Avant cela, vous devez d'abord introduire toute version de jQuery1.8 ou supérieure

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

3 Utilisez laery.open();

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

paramètres de base<.>

1. tapez le type

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

2. titre titre

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

3.1. 🎜> exemple :

3.2. S'il s'agit d'un calque iframe

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，那么需要字符拼接。
  });
});

Exemple :

3.3. Si vous utilisez layer.open pour exécuter les astuces Layer

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

Exemple :

Largeur et hauteur de la zone

In. l'état par défaut, le calque est adaptatif à la fois en largeur et en hauteur. Mais lorsque vous souhaitez uniquement définir la largeur, vous pouvez zoner : '500px' et la hauteur sera toujours adaptative. Lorsque vous devez définir à la fois la largeur et la hauteur, vous pouvez zone : ['500px', '300px']

5. Bouton btn

En mode boîte d'information, btn est un bouton de confirmation par par défaut. Les autres types de calques ne sont pas affichés par défaut et le chargement des calques et des calques de conseils n'est pas valide. Lorsque vous souhaitez personnaliser un seul bouton, vous pouvez appuyer sur : 'Je sais', lorsque vous souhaitez définir deux boutons, vous pouvez appuyer sur : ['oui', 'non']. Bien entendu, vous pouvez également définir plus de boutons, tels que : btn : ['Bouton 1', 'Bouton 2', 'Bouton 3', ...], le rappel du bouton 1 est oui, et à partir du bouton 2, le rappel est btn2 : function(){}, et ainsi de suite. Par exemple :

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

6, le masque d'ombrage

est la zone située à l'extérieur de la couche élastique. La valeur par défaut est un fond noir avec une transparence de 0,3 (« #000 »). Si vous souhaitez définir d'autres couleurs, vous pouvez ombrer : [0.8, '#393D49'] si vous ne souhaitez pas afficher le masque, vous pouvez le faire. shade: 0

Si votre masque existe, vous pouvez également définir shadeClose pour cliquer sur le masque pour le fermer. Par défaut : false Si votre shade existe, vous pouvez également définir shadeClose pour contrôler le clic sur la zone à l'extérieur. la couche élastique pour fermer

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!