[注意事項]
1. 使用する場合は、フォルダー階層全体をサイトの任意のディレクトリに配置し、jQuery を除くlayer.js を導入するだけにしてください。 、他のファイルを導入する必要はありません。
2. js インポートがマージによって処理される場合、またはレイヤーによって自動的に取得される絶対パスを使用したくない場合は、layer.config() を通じて設定できます (詳細については、公式 Web サイトの API ページを参照してください) )
3. jquery には 1.8 が必要です
レイヤーをダウンロードした後、それをプロジェクト内の任意のディレクトリにデプロイします (もちろん、フロントエンド関連のディレクトリに配置することをお勧めします)。レイヤー内のファイル構造を移動します。これらは切り離せない組み合わせであるためです。次のようになります: (特記事項:layer.js ファイルだけでなく、レイヤー フォルダー全体をファイルに導入する必要があります)
次のように心配する必要はありません。これらのファイルは何のためにあるのでしょうか? 識別する必要があるのは、layer.js という 1 つのファイルだけです。そうです、ページ上にレイヤーを表示しようとするときは、次のようにする必要があります: (最も単純な例)
<!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>
<!--你必须先引入jQuery1.8或以上版本-->
<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">点我.btn</div>
<div class="btn" id="test2">点我test2</div>
<div class="btn" id="parentIframe">点我parentIframe</div>
<div class="btn" id="test4">点我test4</div>
<div class="btn" id="test5">点我test5</div>
<!--你必须先引入jQuery1.8或以上版本-->
<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: '\<\div style="padding:20px;">自定义内容--添加自己需要的描述内容\<\/div>'
});
});
//弹出一个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">点我.btn</div>
<div class="btn" id="test2">点我test2</div>
<div class="btn" id="parentIframe">点我parentIframe</div>
<div class="btn" id="test4">点我test4</div>
<div class="btn" id="test5">点我test5</div>
<div class="btn" id="test6">点我test6</div>
<div class="btn" id="test7">点我test7</div>
<div class="btn" id="test8">点我test8</div>
<div class="btn" id="test9">点我test9</div>
<!--你必须先引入jQuery1.8或以上版本-->
<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: '\<\div style="padding:20px;">自定义内容--添加自己需要的描述内容\<\/div>'
});
});
//弹出一个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('大部分参数都是可以公用的<br>合理搭配，展示不一样的风格', {
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: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">内容<br>内容</div>'
,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: '<div style="padding: 20px 80px;">内容</div>'
,btn: '关闭全部'
,btnAlign: 'c' //按钮居中
,shade: 0 //不显示遮罩
,yes: function(){
layer.closeAll();
}
});
});
});
</script>
</body>
</html>layui の詳細については、layui 使用法チュートリアル 列に注目してください。
以上がlaui-layer 独立コンポーネント-pop-up レイヤーの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明
この記事は博客园で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
アサシンのクリードシャドウズ：シーシェルリドルソリューション
3週間前ByDDD
Atomfallのクレーンコントロールキーカードを見つける場所
3週間前ByDDD
R.E.P.O.で節約説明した（そしてファイルを保存）
1 か月前By尊渡假赌尊渡假赌尊渡假赌
ホットツール
Dreamweaver Mac版
ビジュアル Web 開発ツール
メモ帳++7.3.1
使いやすく無料のコードエディター
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。
SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。
