Jquery 彈出層插件實現代碼
2024-05-06 14:13:14
供稿：網友
直接看代碼：
代碼如下:
<%@ 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/" />");
