layui-layer独立コンポーネントについて--ポップアップレイヤ
49457 ワード
公式ダウンロードドキュメントリンク:http://layer.layui.com/
===============================================================================
【注意事項】一、使用する場合は、フォルダlayerをサイトのいずれかのディレクトリに全体的に配置し、layerを導入するだけでよい.jsでいいです.jQuery以外のファイルは再導入する必要はありません.二、js導入がマージ処理またはlayerで自動的に取得したくない絶対パスである場合は、layer.config()を構成して(詳細は公式サイトAPIページを参照)3、jqueryは1.8+4、詳細な使用説明とプレゼンテーションが必要です.layer公式サイトを参照してください.
=======================================================================================
クイックマニュアル:http://layer.layui.com/hello.html
layerをダウンロードした後、プロジェクトのいずれかのディレクトリに配置します(もちろん、フロントエンドの関連ディレクトリに配置することをお勧めします).layerのファイル構造を移動することはできません.これらは分割できない組み合わせです.このように:(特に、layer.jsファイルだけを導入するのではなく、layerフォルダ全体をあなたのファイルに導入する必要があります)
書類が何をしているのか気にする必要はありません.書類を認識する必要があります.layer.jsは間違いありません.layerをページに表示しようとすると、そうすべきです.(最も簡単な例)
その他の例:
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
転載先:https://www.cnblogs.com/xiangru0921/p/6728234.html
===============================================================================
【注意事項】一、使用する場合は、フォルダlayerをサイトのいずれかのディレクトリに全体的に配置し、layerを導入するだけでよい.jsでいいです.jQuery以外のファイルは再導入する必要はありません.二、js導入がマージ処理またはlayerで自動的に取得したくない絶対パスである場合は、layer.config()を構成して(詳細は公式サイトAPIページを参照)3、jqueryは1.8+4、詳細な使用説明とプレゼンテーションが必要です.layer公式サイトを参照してください.
=======================================================================================
クイックマニュアル:http://layer.layui.com/hello.html
layerをダウンロードした後、プロジェクトのいずれかのディレクトリに配置します(もちろん、フロントエンドの関連ディレクトリに配置することをお勧めします).layerのファイル構造を移動することはできません.これらは分割できない組み合わせです.このように:(特に、layer.jsファイルだけを導入するのではなく、layerフォルダ全体をあなたのファイルに導入する必要があります)
書類が何をしているのか気にする必要はありません.書類を認識する必要があります.layer.jsは間違いありません.layerをページに表示しようとすると、そうすべきです.(最も簡単な例)
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<link rel="stylesheet" type="text/css" href="css/layer.css"/>
<style type="text/css">
.btn{
width: 100%;
height: 50px;
line-height: 50px;
background: magenta;
text-align: center;
font-size: 15px;
}
style>
head>
<body>
<div class="btn"> div>
<script src="js/jquery-2.1.0.js">script>
<script src="js/layer/layer.js">script>
<script>
$(".btn").bind("click",function(){
layer.msg(' ！');
});
script>
body>
html>$("#btn").bind("click",function(){
//layer.msg(' ！');
layer.msg(' ， ！', {
time: 3000
});
});その他の例:
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<link rel="stylesheet" type="text/css" href="css/layer.css"/>
<style type="text/css">
.btn:nth-child(odd){
width: 100%;
height: 50px;
line-height: 50px;
background: magenta;
text-align: center;
font-size: 15px;
}
.btn:nth-child(even){
width: 100%;
height: 50px;
line-height: 50px;
background: aqua;
text-align: center;
font-size: 15px;
}
#test5{
text-align: center;
width: 500px;
margin-left: 500px;
}
style>
head>
<body>
<div class="btn" id="btn"> .btndiv>
<div class="btn" id="test2"> test2div>
<div class="btn" id="parentIframe"> parentIframediv>
<div class="btn" id="test4"> test4div>
<div class="btn" id="test5"> test5div>
<script src="js/jquery-2.1.0.js">script>
<script src="js/layer/layer.js">script>
<script>
$(function(){
$("#btn").bind("click",function(){
layer.msg(' ！');
});
//
$('#test2').on('click', function(){
layer.open({
type: 1,
area: ['600px', '360px'],
shadeClose: true, //
content: '\ -- \'
});
});
// iframe
$('#parentIframe').on('click', function(){
layer.open({
type: 2,
title: 'iframe ',
maxmin: true,
shadeClose: true, //
area : ['800px' , '520px'],
content: 'parentIframe.html'
});
});
// loading
$('#test4').on('click', function(){
var ii = layer.load();
// setTimeout ajax
setTimeout(function(){
layer.close(ii);
}, 1000);
});
// tips
$('#test5').on('click', function(){
layer.tips('Hello tips!', '#test5');
});
});
script>
body>
html>+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<link rel="stylesheet" type="text/css" href="css/layer.css"/>
<style type="text/css">
.btn:nth-child(odd){
width: 100%;
height: 50px;
line-height: 50px;
background: magenta;
text-align: center;
font-size: 15px;
}
.btn:nth-child(even){
width: 100%;
height: 50px;
line-height: 50px;
background: aqua;
text-align: center;
font-size: 15px;
}
#test5{
text-align: center;
width: 100px;
margin-left: 100px;
}
style>
head>
<body>
<div class="btn" id="btn"> .btndiv>
<div class="btn" id="test2"> test2div>
<div class="btn" id="parentIframe"> parentIframediv>
<div class="btn" id="test4"> test4div>
<div class="btn" id="test5"> test5div>
<div class="btn" id="test6"> test6div>
<div class="btn" id="test7"> test7div>
<div class="btn" id="test8"> test8div>
<div class="btn" id="test9"> test9div>
<script src="js/jquery-2.1.0.js">script>
<script src="js/layer/layer.js">script>
<script>
$(function(){
$("#btn").bind("click",function(){
layer.msg(' ！');
});
//
$('#test2').on('click', function(){
layer.open({
type: 1,
area: ['600px', '360px'],
shadeClose: true, //
content: '\ -- \'
});
});
// iframe
$('#parentIframe').on('click', function(){
layer.open({
type: 2,
title: 'iframe ',
maxmin: true,
shadeClose: true, //
area : ['800px' , '520px'],
content: 'parentIframe.html'
});
});
// loading
$('#test4').on('click', function(){
var ii = layer.load();
// setTimeout ajax
setTimeout(function(){
layer.close(ii);
}, 1000);
});
// tips
$('#test5').on('click', function(){
layer.tips('Hello tips!', '#test5');
});
//======================================
// ，
$('#test6').on('click', function(){
layer.open({
type: 2 // iframe
,title: ' ， '
,area: ['390px', '330px']
,shade: 0
,offset: [ // ，
Math.random()*($(window).height()-300)
,Math.random()*($(window).width()-390)
]
,maxmin: true
,content: 'settop.html'
,btn: [' ', ' '] //
,yes: function(){
$(that).click(); // ，
}
,btn2: function(){
layer.closeAll();
}
,zIndex: layer.zIndex // 1
,success: function(layero){
layer.setTop(layero); // 2
}
});
});
//
$('#test7').on('click', function(){
layer.msg('
， ', {
time: 20000, //20s
btn: [' ', ' ', ' ']
});
});
//
$('#test8').on('click', function(){
layer.open({
type: 1
,title: false //
,closeBtn: false
,area: '300px;'
,shade: 0.8
,id: 'LAY_layuipro' // id，
,resize: false
,btn: [' ', ' ']
,btnAlign: 'c'
,moveType: 1 // ，0 1
,content: '
'
,success: function(layero){
var btn = layero.find('.layui-layer-btn');
btn.find('.layui-layer-btn0').attr({
href: 'http://www.layui.com/'
,target: '_blank'
});
}
});
});
//
$('#test9').on('click', function(){
layer.open({
type: 1
,offset: 'c' // ：offset (t、r、b、l、c)
,content: ' '
,btn: ' '
,btnAlign: 'c' //
,shade: 0 //
,yes: function(){
layer.closeAll();
}
});
});
});
script>
body>
html>転載先:https://www.cnblogs.com/xiangru0921/p/6728234.html