使用Jquery实现弹出层插件示例与代码

需积分: 2 195 浏览量更新于2024-08-31 收藏 42KB PDF 举报

本篇文章主要介绍了如何使用JQuery实现一个弹出层插件，通过C#与HTML结合，利用JQuery库来创建动态的可交互式弹出窗口。以下是详细步骤和关键代码片段： 1. **页面设置**: - 使用ASP.NET语法（`<%@Page Language=”C#” AutoEventWireup=”true” CodeFile=”Layer.aspx.cs” Inherits=”Layer”%>`)定义了一个ASP.NET服务器控件，这将用于编译服务器端逻辑。 2. **文档结构**: - `<html>`标签开启HTML文档，声明了XHTML1.0 Transitional文档类型。 - `<head>`部分包含页面标题元素，同时引入了两个JavaScript文件：`jquery-1.3.2.js`作为基础的jQuery库，以及自定义的`jquery.layer.js`插件文件，这将用于实现弹出层功能。 3. **JQuery初始化**: - 在`<script>`标签内，使用`$(document).ready()`函数确保当DOM加载完成后执行代码。这里绑定了一个点击事件到ID为`button`的按钮，当用户点击时，会触发弹出层插件。 4. **弹出层插件的使用**: - `$(“#button”).click(function(){...})`这段代码定义了点击事件处理程序。在点击事件中，首先创建一个空的`layer`对象（`var layer = $(‘none’).layer({...})`），然后设置了内容为“这里是层内容，默认焦点可以用none对象来代替”，最后调用`layer.open()`方法显示弹出层。 5. **第二个弹出层示例**: - 页面上还有一个额外的按钮，它使用`.layer()`方法动态设置内容，内容来源于ID为`content`的DOM元素，即`$(‘#content’)`。点击这个按钮时，弹出层会显示`content`元素的内容，并且焦点落在内容中的`input`元素上。 6. **隐藏内容**: - 在页面中，有一个`<div>`元素具有`id="content"`，初始状态为`display:none;`，这意味着它默认是隐藏的。当弹出层内容需要动态更改时，可以将其内容设置为这个隐藏的`content`元素。总结来说，这篇文章展示了如何通过JQuery插件`jquery.layer.js`创建简单的弹出层功能，结合C#服务器端控件和客户端JavaScript交互，提供了一种常见的网页交互体验。开发者可以根据实际需求扩展和定制这个基础插件，以满足不同的界面需求。

Jquery 弹出层插件实现代码弹出层插件实现代码

直接看代码：

代码如下:

<%@ 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”>

$(document).ready(function() {

$(“#button”).click(function() {

var layer = $(‘none’).layer({ content: ‘这里是层内容，默认焦点可以用none对象来代替’ });

layer.open();

});

</script>

</head>

<body>

我是Dom对象内的内容

</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; //调高层位置

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38501363

粉丝: 2
资源: 901

使用Jquery实现弹出层插件示例与代码

jquery弹出层插件

一款不错的Jquery弹出层插件

zeroModal-扁平化风格jQuery弹出层插件特效代码

jQuery弹出层插件fDialog源代码

jQuery弹出层插件简化版代码下载

jQuery弹出层插件Sexy LightBox特效代码

jQuery弹出层插件LayerModel特效代码

基于jQuery弹出层插件实现的多种不同展开方式的遮罩效果.zip

jQuery jBox弹出层插件特效代码

jQuery弹出层插件

最新资源