基于Layer+jQuery的自定義彈框
更新時(shí)間：2020年05月26日 11:33:15 作者：Yiyuery
這篇文章主要介紹了基于Layer+jQuery的自定義彈框，功能強(qiáng)大，實(shí)用性強(qiáng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
目的：XXXX項(xiàng)目中，很多的彈窗是利用freemarker的網(wǎng)頁(yè)標(biāo)簽追加的形式實(shí)現(xiàn)的，網(wǎng)頁(yè)彈框只是將隱藏的div顯示出來(lái)，這樣會(huì)使網(wǎng)頁(yè)在預(yù)加載時(shí)速度變慢，增加頁(yè)面加載和響應(yīng)時(shí)間
解決方法如下：<已分中心管理的添加分中心彈框?qū)崿F(xiàn)機(jī)制為例>
1.彈框頁(yè)面部分的html代碼和css抽離
html : html/configure/layer-win/_group-add-layer.html
css : css/common/componnentWin.css <自定義彈窗通用樣式>
子層html: _group-add-layer.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>group Add</title> </head> <link rel="stylesheet" type="text/css" href="../../../js/lib/datePicker/skin/WdatePicker.css" /> <link rel="stylesheet" type="text/css" href="../../../css/common/componnentWin.css" /> <body> ···· </body> <script type="text/javascript" src="../../../js/jquery-1.9.1.js"></script> <script type="text/javascript" src="../../../js/lib/layer/layer.js"></script> <script type="text/javascript" src="../../../js/scooper/scooper.tool.xiacy.js"></script> <script type="text/javascript" src="../../../js/configure/layer-win/group-new-add.js"></script> <script type="text/javascript"> </script> </html>
父層html : group-manager.html
<#include "/html/config/configure.html"/>
<@menuConfig likey="stationGroup">
<link rel="stylesheet" type="text/css" href="${contextPath}/css/configure/group-manager.css" />
<link rel="stylesheet" type="text/css" href="${contextPath}/css/lib/userLibs/page-plugin.css">
<script type="text/javascript" src="${contextPath}/js/lib/layer/layer.js"></script>
<script type="text/javascript" src="${contextPath}/js/lib/userLibs/page-load.js"></script>
<script type="text/javascript" src="${contextPath}/js/scooper/scooper.tool.xiacy.js"></script>
<script type="text/javascript" src="${contextPath}/js/configure/group-manager.js"></script>
·····
</@menuConfig>
通用彈窗 html :
<div id = "addNewGroupWin" class = "capsule-win show">
<div class = "capsule-win-top" title = "添加分中心"><span>添加分中心</span></div>
<div class = "capsule-win-center">
<div class = "capsule-item" id = "oldDevSearch">
<div class = "item-left input_required" >名稱</div>
<div class = "item-right">
<input id = "newGroupName" class = "sc_validate" title = "分中心名稱" type="text" placeholder="請(qǐng)輸入分中心名稱" scvalidate='{"required":true,"format":"string"}'/>
</div>
</div>
<div class = "capsule-item">
<div class = "item-left input_required">經(jīng)度</div>
<div class = "item-right">
<input id = "newGroupLng" class = "sc_validate" title= "分中心經(jīng)度" type="text" placeholder="請(qǐng)輸入0-180的數(shù)字" scvalidate='{"required":true,"format":"lng"}'/>
</div>
</div>
<div class = "capsule-item">
<div class = "item-left input_required">緯度</div>
<div class = "item-right">
<input id = "newGroupLat" class = "sc_validate" title = "分中心緯度" type="text" placeholder="請(qǐng)輸入0-90的數(shù)字" scvalidate='{"required":true,"format":"lat"}'/>
</div>
</div>
<div class = "capsule-item" id = "processSNOLDIV">
<div class = "item-left input_required">描述</div>
<div class = "item-right">
<textarea id = "newGroupDesc" class = "sc_validate" title = "分中心描述" scvalidate='{"required":true,"format":"string"}'></textarea>
</div>
</div>
</div>
<div class = "capsule-win-bottom">
<input id="addNewGroupSure" class = "btn-bottom centerfix btn-succ" type="button" value="確定"/>
<input id="addNewGroupCancle" class = "btn-bottom btn-cancel" type="button" value="取消"/>
</div>
</div>
2.子父層都需要引入layer.js
3.子層js
/**
* <分中心管理>
* 添加分中心
* Author : Yiyuery
* Date : 2016/10/19
*/
;(function($,w,document,undefined){
$(document).ready(function(){
validatorInit();
clickEventBind();
});
var addGroupValidator = new Validator();
var contextPath = "/ZJDZYW";
/**
* 表單驗(yàn)證初始化
* @returns
*/
function validatorInit(){
addGroupValidator.init(function(obj, msg){
layer.tips(msg,obj,{
style: ['background-color:#78BA32; color:#fff', '#78BA32'],
maxWidth:185,
time: 2000,
tips: 1,
});
});
}
/**
* 點(diǎn)擊事件綁定
* @returns
*/
function clickEventBind(){
addNewGroupClick();
}
/**
* 分中心相關(guān)點(diǎn)擊事件
* @returns
*/
function addNewGroupClick(){
$("#addNewGroupSure").click(function(){
addNewGroupSure();
});
$("#addNewGroupCancle").click(function(){
addNewGroupCancle();
});
}
/**
* 添加新的分中心 [確定]
* @returns
*/
function addNewGroupSure(){
validatorInput();
}
/**
* 添加分中心 [取消]
*/
function addNewGroupCancle(){
closeLayerWin();
}
/**
* 關(guān)閉當(dāng)前打開(kāi)的layer彈窗
*/
function closeLayerWin(){
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index); //再執(zhí)行關(guān)閉
}
/**
* 表單提交輸入驗(yàn)證
*/
function validatorInput(){
/**
* 輸入校驗(yàn)
*/
if(!addGroupValidator.validate("addNewGroupWin")){
return;
}
var paras = {
"group_name" : $("#newGroupName").val(),
"longitude" : $("#newGroupLng").val(),
"latitude" : $("#newGroupLat").val(),
"group_desc" : $("#newGroupDesc").val(),
};
$.ajaxSettings.async = false ;
$.getJSON(contextPath+"/stationGroup/add", paras, function(resp){
if(resp.code !=undefined && resp.code == 0){
console.log("分中心列表刷新！");
}
});
$.ajaxSettings.async = true ;
closeLayerWin();
}
})(jQuery,window,document);
4.父層js
$("#addGroup").click(function(){
layer.config({
path : '${contextPath}/js/lib/layer'
});
index = layer.open({
type: 2,
area: ['520px', '400px'],
fix: false, //不固定
title: '',
maxmin: false,
scrollbar:false,
shade:0.5,
shadeColse:true,
content:capsule.request.path.groupMan.layer.groupManAddLayerShow,
end:function(){
loadGroupCenterInfo();
}
});
});
loadGroupCenterInfo :父層js的方法，在關(guān)閉layer彈窗時(shí)調(diào)用父層方法刷新分中心列表
5.父層的layer彈窗此處是無(wú)法跳出父頁(yè)面的所嵌套的iframe的，由于添加分中心的操作loadGroupCenterInfo，中嵌套著點(diǎn)擊事件的重新激活clickEventInit該方法不是全局的，無(wú)法通過(guò)end傳遞到父頁(yè)面中再次執(zhí)行
/**
* 加載分中心
*/
function loadGroupCenterInfo(){
$.ajaxSettings.async = false ;
$.getJSON(capsule.request.path.groupMan.getJson.loadCenterGroup,{},function(data){
$("#groupCenterArea").empty();
$.each(data.list,function(i,obj){
groupMap.setKeyValue(obj.id,obj.group_name);
var count = obj.c_num;
if(obj.c_num == null || obj.c_num == "null"){
count = 0;
}
var html = '<div class="groupItemDiv" id='+obj.id+'>'
+ '<img class="checkBoxLeftSite" src="'+contextPath+'/image/Checkbox.png"/>'+obj.group_name+"("+count+")"+'<li title="編輯" class="editGroup"></li></div>';
$("#groupCenterArea").append(html);
});
clickEventInit();
});
$.ajaxSettings.async = true ;
}
因此:當(dāng)回調(diào)函數(shù)涉及當(dāng)前層的函數(shù)互相調(diào)用時(shí)，是無(wú)法使用通用layer最外層彈框來(lái)實(shí)現(xiàn)的，只能在當(dāng)前頁(yè)面的js中重新模塊化引入layer
[后來(lái)發(fā)現(xiàn)，其實(shí)是可以的，只需要將回調(diào)函數(shù)直接寫(xiě)在調(diào)用方法中即可，參見(jiàn)：javascript中的方法回調(diào)和父頁(yè)面Iframe的方法調(diào)用]
layer.config({
path : '${contextPath}/js/lib/layer'
});
index = layer.open({
type: 2,
area: ['520px', '400px'],
fix: false, //不固定
title: '',
maxmin: false,
scrollbar:false,
shade:0.5,
shadeColse:true,
content:capsule.request.path.groupMan.layer.groupManAddLayerShow,
end:function(){
loadGroupCenterInfo();
}
});
6.通用彈窗樣式css
@charset "utf-8";
/*-------功能性按鈕------*/
body,html{
width:100%;
height:100%;
margin:0px;
padding:0px;
}
.capsule-btn {
height: 40px;
width: 50px;
background-color: #5093e1;
border: 0;
border-radius: 2px;
color: #fff;
margin: 15px 0px 10px 15px;
float: left;
}
/*----------------------------------------- 彈框按鈕 -------------------------------------*/
.capsule-win .btn-bottom{width: 100px; height: 40px; background-color: #4f94e0; font-size: 16px; border: none; color: #fff; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
cursor: pointer; margin-right: 10px;margin-top: 10px;}
.centerfix{margin-left: 30%;}
.btn-cancel {background-color: #f5f5f5 !important; border: 1px #c2c2c2 solid !important;; color: #333 !important;}
.btn-succ {background-color: #1abd9b;}
.btn-warn {background-color: #ec962f;}
/*------------彈窗---------------*/
.capsule-win {
width: 100%;
min-height: 100%;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #fff;
display: none;
position: fixed;
}
.capsule-win-top {
width: 100%;
height: 50px;
background-color: #4f94e0;
line-height: 50px;
color: #fff;
font-size: 16px;
}
.capsule-win-center {
width: 100%;
min-height: 250px;
padding: 20px 0px 20px 0px;
margin:0px 1px 0px 1px;
}
.capsule-win-bottom {
width: 100%;
height: 60px;
background-color: #ececec;
padding: 0px;
position: fixed;
bottom: 1px;
}
.capsule-win-center .capsule-item {
height: 50px !important;
width: 100%;
margin: 0px 2px 0px 2px;
padding: 0px;
}
.capsule-win-center .capsule-item .item-left {
width: 100px;
text-align: right;
margin: 10px 0px 0px 0px;
float:left;
}
.capsule-win-center .capsule-item .item-right {
width: 400px;
float:right;
}
.capsule-win-center .capsule-item .item-right input[type=text]{
width:75%;
height: 35px;
}
.capsule-win-center .capsule-item .item-right input[type=checkbox]{
width:20px;
marin:2px -5px 2px 0px;
padding:10px;
}
.capsule-win-center .capsule-item .item-right textarea{
width:75%;
height:50px;
margin-bottom: 10px;
overflow-y:auto;
}
.capsule-win-center .capsule-item .item-right select{
width:90%;
}
.hide{
display : none;
}
.show{
display : block;
}
.capsule-win-center .capsule-item-table{
width: 445px;
height: 120px;
margin: 5px 10px 0px 75px;
overflow-y:auto;
}
.capsule-win-center .capsule-item-table table{
border-collapse:collapse;
width:100%;
}
.capsule-win-center .capsule-item-table table,th, td{
border: 1px solid #ccc;
}
.capsule-win-center .capsule-item-table th{
height:30px;
text-align: center;
}
.capsule-win-center .capsule-item-table td{
text-align: center;
}
.capsule-win-center .capsule-item-table input[type=text] {
width:100% !important;
}
.textCenter {
text-align: center;
}
.capsule-win-top span {
margin : 10px;
}
最終效果：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
使用jQuery mobile NuGet讓你的網(wǎng)站在移動(dòng)設(shè)備上同樣精彩
這篇文章主要介紹了使用jQuery mobile NuGet讓你的網(wǎng)站在移動(dòng)設(shè)備上同樣精彩，使用jQuery mobile NuGet包，改變共享的布局和視圖，并使你的網(wǎng)站在傳統(tǒng)的瀏覽器和大部分手機(jī)展現(xiàn)的都很好。,需要的朋友可以參考下2019-06-06
jquery批量設(shè)置屬性readonly和disabled的方法
批量設(shè)置屬性的方法有很多，在本文為大家介紹下使用jquery批量設(shè)置readonly和disabled屬性2014-01-01
jQuery實(shí)現(xiàn)的Tab滑動(dòng)選項(xiàng)卡及圖片切換(多種效果)小結(jié)
這篇文章主要介紹了jQuery實(shí)現(xiàn)的Tab滑動(dòng)選項(xiàng)卡及圖片切換效果小結(jié),實(shí)例總結(jié)了幾種常見(jiàn)的tab切換效果,包括鼠標(biāo)點(diǎn)擊切換、滑過(guò)切換、定時(shí)自動(dòng)切換等,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-09-09
JQuery中dataGrid設(shè)置行的高度示例代碼
dataGrid 設(shè)置行的高度在jquery中如何做到，下面有個(gè)不錯(cuò)的教程，感興趣的朋友可以參考下2014-01-01
iframe異步加載實(shí)現(xiàn)點(diǎn)擊左邊菜單加載右邊內(nèi)容實(shí)例講解
iframe異步加載想必很多朋友對(duì)你都不會(huì)陌生,接下來(lái)將實(shí)現(xiàn)這樣一個(gè)功能左邊菜單不能刷新的情況下，異步加載右邊的內(nèi)容頁(yè)面，感興趣的你可以參考下本文或許對(duì)你有所幫助2013-03-03
基于jquery 的一個(gè)progressbar widge
這個(gè)widget是包含在wijmo 項(xiàng)目中的一個(gè)widget。目前此widget已經(jīng)開(kāi)源基于mit和gpl雙協(xié)議，目前是beta版，可能存在bug。2010-10-10
jQuery+css實(shí)現(xiàn)的藍(lán)色水平二級(jí)導(dǎo)航菜單效果代碼
這篇文章主要介紹了jQuery+css實(shí)現(xiàn)的藍(lán)色水平二級(jí)導(dǎo)航菜單效果代碼,通過(guò)簡(jiǎn)單的jQuery操作鼠標(biāo)事件實(shí)現(xiàn)頁(yè)面元素樣式的切換功能,非常美觀大方,需要的朋友可以參考下2015-09-09
這篇文章主要為大家詳細(xì)介紹了jQuery樹(shù)插件zTree的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了jquery專業(yè)的下拉菜單特效，一個(gè)精致的導(dǎo)航菜單會(huì)吸引用戶的注意力，讓用戶產(chǎn)生瀏覽網(wǎng)站的興趣至關(guān)重要，現(xiàn)在小編推薦給大家一款特別棒的導(dǎo)航菜單，感興趣的小伙伴可以參考下。2015-08-08
easyui Droppable組件實(shí)現(xiàn)放置特效
droppable和draggable有類似的地方,不過(guò)區(qū)別點(diǎn)在于前者著重于將元素放進(jìn)某個(gè)容器中,而后者則著重于可拖拽(雖然可能一些效果兩者都可以實(shí)現(xiàn))。而且通過(guò)查看easyloader源碼可知道，droppable并不依賴于draggable。2015-08-08