|
|
復制代碼 代碼如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Layer.ASPx.cs" Inherits="Layer" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-1.3.2.js" type="text/Javascript"></script>
<script src="jquery.layer.js" type="text/Javascript"></script>
<script type="text/Javascript">
$(document).ready(function() {
$("#button").click(function() {
var layer = $('none').layer({ content: '這里是層內容，默認焦點可以用none對象來代替' });
layer.open();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<input id="button" type="button" value="第一個層" />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<input type="button" onclick="$(this).layer({ content: $('#content') }).open();" value="第二個層" />
<div id="content" style="display:none;">
我是Dom對象內的內容
<input id="aaa" type="text" value="我是表單" />
</div>
</form>
</body>
</html>
復制代碼 代碼如下:
/*
* 作者：彭白洋 2009.10.24
* 功能：可彈出自定義字符串、Dom對象，根據事件焦點彈出、關閉動畫
* 調用方法：
* 1、初始化直接打開：$("#buttonID").layer().open()；
* 2、初始化：var layer=$("#buttonID").layer()；打開：layer.open()；關閉：layer.close()；
* 3、初始化：var layer=$("#buttonID").layer({自定義配置})；打開：layer.open()；關閉：layer.close()；
*樣式：
* .layer-box{background-color:#fff;width: 692px;border: 1px solid #ccc;position:absolute;}
* .layer-box div.layer-bar{background: #f4f4f4;padding: 5px;margin:0px;text-align:left;height:18px;position:relative;}
* .layer-box div.layer-bar span.layer-close{position:absolute;width:18px;height:18px;top:0px;right:0px;cursor:pointer;}
* .layer-box div.layer-content{margin:0px;padding:5px 0px 0px 0px;text-align:center;}
*/
/// <reference path="jquery-1.3.2-vsdoc.js" />
(function($) {
$.layer = function(element, options) {
var base = this;
base.$el = $(element);
base.tagHide = true;
//初始化層
base.init = function() {
base.options = $.extend({}, $.layer.defaults, options);
base.$layerBox = $(base.options.template);
base.posX = base.posY = 0;
base.moveing = false;
//加載樣式
if (!$.layer.hasCss && base.options.cssurl != "") {
$("head", base.options.target).append("<link href=/"" + base.options.cssurl + "/" rel=/"stylesheet/" type=/"text/css/" />");
$.layer.hasCss = true;
}
//加載層對象
$.layer.maskLayerIndex += 20; //調高層位置
base.$layerBox.appendTo("body", base.options.target).css({ "z-index": $.layer.maskLayerIndex }).hide();
base.$layerBox.find("div[class='layer-title']").append(base.options.title);
//判斷內容是字符串還是Jquery對象
if (typeof (base.options.content) == "object") {
base.$tempContentParent = base.options.content.parent();
base.tagHide = base.options.content.is(":hidden");
base.$tempContent = base.options.content.clone();
base.options.content.appendTo(base.$layerBox.find("div[class='layer-content']")).show();
}
else {
base.$layerBox.find("div[class='layer-content']").append(base.options.content);
}
//綁定關閉按鈕事件
base.$layerBox.find("span[class='layer-close']").mousedown(function(event) {
//阻止事件冒泡
if (event && event.stopPropagation) {
event.stopPropagation();
} else {
window.event.cancelBubble = true;
}
base.close();
return false;
});
base.$layerBox.find("div[class='layer-bar']").mousedown(function(event) {
base.moveStart(event);
});
//base.$layerBox.show();
}
//打開層
base.open = function() {
//層顯示動畫
//alert($("html", base.options.target).height());
var mtop = ($("html", base.options.target).height() - base.options.height) / 2 + $(document, base.options.target).scrollTop(); //
var mleft = $("html", base.options.target).width() / 2 - base.options.width / 2; //
base.$layerBox.css({ top: base.$el.offset().top, left: base.$el.offset().left, width: 0, height: 0 }).animate({
left: mleft,
top: mtop,
width: base.options.width,
height: base.options.height,
opacity: "show"
}, "slow", function() {
//加載遮罩層
if (base.options.masklayer.show) {
$.layer.maskLayerIndex -= 10; //降低層位置
base.$masklayer = $("<div style=/"display:none; z-index:" + $.layer.maskLayerIndex + "; filter: alpha(opacity:" + base.options.masklayer.alpha + "); left: 0px; width: 100%; position: absolute; top: 0px; height: " + $(document, base.options.target).height() + "px; background-color:" + base.options.masklayer.bgcolor + "/"></div>");
base.$masklayer.appendTo("body", base.options.target).animate({
opacity: 'toggle'
}, 500);
}
});
}
//開始移動
base.moveStart = function(event) {
base.moveing = true;
base.bgColor = base.$layerBox.css("background-color");
base.$layerBox.css("background-color", "Transparent").children().hide();
base.posX = event.pageX - base.$layerBox.offset().left;
base.posY = event.pageY - base.$layerBox.offset().top; ;
$(document).mousemove(function(event) {
base.moveOn(event);
}).mouseup(function() {
base.moveStop();
});
if ($.browser.msie) {
base.$layerBox.get(0).setCapture();
} else {
document.addEventListener("mousemove", base.moveOn, true);
}
}
//移動中
base.moveOn = function(event) {
if (base.moveing) {
window.getSelection && window.getSelection().removeAllRanges();
base.$layerBox.css({ top: Math.max(event.pageY - base.posY, 0), left: Math.max(event.pageX - base.posX, 0) });
return false;
}
}
//移動停止
base.moveStop = function() {
base.$layerBox.css("background-color", base.bgColor).children().show();
base.moveing = false;
$(document, base.options.target).unbind("mousemove");
if ($.browser.msie) {
base.$layerBox.get(0).releaseCapture();
} else {
document.removeEventListener("mousemove", base.moveOn, true);
}
}
//關閉層
base.close = function() {
if (base.$tempContent) {
base.$tempContent.appendTo(base.$tempContentParent);
if(base.tagHide){
base.$tempContent.hide();
}
}
if (base.options.masklayer.show) {
base.$masklayer.animate({
opacity: 'toggle'
}, 500, function() {
$(this).remove();
base.$layerBox.animate({
left: base.$el.offset().left,
top: base.$el.offset().top,
width: 0,
height: 0,
opacity: "hide"
}, "hide", function() {
$(this).remove();
});
});
}
else {
base.$layerBox.animate({
left: base.$el.offset().left,
top: base.$el.offset().top,
width: 0,
height: 0,
opacity: "hide"
}, "hide", function() {
$(this).remove();
});
}
}
base.init();
}
$.layer.hasCss = false;
$.layer.maskLayerIndex = 1000;
//默認配置
$.layer.defaults = {
masklayer: { show: true, bgcolor: '#eee', alpha: 50 }, //是否顯示覆蓋層
target: window.self.document,
cssurl: "layer.css",
title: "層標題",
content: "層內容",
width: 500,
height: 300,
template: "<div class=/"layer-box/"><div class=/"layer-bar/"><div class=/"layer-title/"></div><span class=/"layer-close/">×</span></div><div class=/"layer-content/"></div></div>"
}
$.fn.layer = function(options) {
return new $.layer(this, options);
}
})(jQuery);
插件下載地址：jquery.layer.js
JavaScript技術：Jquery 彈出層插件實現代碼，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
