该示例实现弹出窗口效应：

1、jquery.show.js

/*

 * 开发人员：lzugis

 * 开发时间：2014年6月10日

 * 实现功能：点击在鼠标位置显示div

 * 版本号序号：1.0

 */

(function($){

 	$.fn.showDIV = function(options){

		var defaults = {};

		var options = $.extend(defaults, options);

		var showdiv=$(this);

		var close, title, content;

		close=$("<div class='close'></div>");

		title=$("<div class='title'></div>");

		content=$("<div class='content'></div>");

		showdiv.html("");

		showdiv.append(close);

		showdiv.append(title);

		showdiv.append(content);

		close.html("X");

		title.html(options.title);

		content.html(options.content);

		showdiv.css("display","block");

		showdiv.css("position","absolute");

		showdiv.css("left",($(window).width()-options.width)/2+"px");

		showdiv.css("top",($(window).height()-options.height)/2+"px");

		showdiv.css("width",options.width);

		showdiv.css("height",options.height);

		close.bind("click",function(){

			showdiv.css("display","none");

		});

	};

})(jQuery);

2、jquery.showdiv.css

body div

{

	font-size:12px;

	text-align:center;

}

#container

{

	background-color:#CCC;

	border:1px solid #000;

	width:1024px;

	height:600px;

}

#showdiv

{

	background-color:#FF0;

	width:100px;

	height:100px;

	display:none;

	z-index:99;

}

.title

{

	padding:10px;

	background:#F39;

	font-weight:bold;

	text-align:center;

	color:#FFF;

}

.close

{

	margin:5px;

	position:absolute;

	right:0px;

	top::0px;

	padding:5px;

	color:#000;

	background:#FFF;

}

.close:hover

{

	cursor:pointer;

	background:#CCC;

}

.content

{

	text-align:left;

	padding:10px;

}

3、demo.html

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>ShowDiv Demo</title>

<link rel="stylesheet" type="text/css" href="jquery/jquery.showdiv.css"/>

<script type="text/javascript" src="jquery/jquery.min.js"></script>

<script type="text/javascript" src="jquery/jquery.showdiv.js"></script>

<script type="text/javascript">

	$(document).ready(function (){

    	$('#show').bind("click", function(evt){

			var showdiv = $('#showdiv').showDIV({

				width:400,

				height:200,

				title:"我不是黄蓉",

				content:"我不是黄蓉<br />我不会武功<br />我仅仅要靖哥哥<br />完美的爱情"

			});

		});

	});

</script>

</head>

<body>

<input id="show" name="showDiv" type="button" value="显示" />

<div id="showdiv"></div>

</body>

</html>

实现后的效果例如以下：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvR0lTU2hpWGlTaGVuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" width="695" height="534" alt="">

在此只是抛砖引玉，同时也为录制自己的小的学习过程。

版权声明：本文博主原创文章，博客，未经同意不得转载。

jquery自定义插件——window实现的更多相关文章

  1. jquery自定义插件——window的实现

    本例子实现弹窗的效果: 1.jquery.show.js /* * 开发者:lzugis * 开发时间:2014年6月10日 * 实现功能:点击在鼠标位置显示div * 版本序号:1.0 */ (fu ...

  2. jQuery自定义插件

    jQuery自定义插件 jQuery自定义插件按照功能分类,可以分为三类, 1>封装对象方法的插件,(也就是基于某个DOM元素的jQuery对象,局部的) 2>封装全局函数的插件,   ( ...

  3. 深入学习jQuery自定义插件

    原文地址:jQuery自定义插件学习 1.定义插件的方法 对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数);      $(‘#id’).myPlugin(o ...

  4. jquery自定义插件——以 选项卡插件为例

    一直打算尝试自定义插件,终于付诸实践了,现在把内容发表出来,与大家共勉. 我是根据自己正在用的插件,模仿其源码,实现的自定义插件,完成之后,在网上看相关资料,对自定义插件部分,有了更明确的认识. jq ...

  5. 你的专属定制——JQuery自定义插件

        前  言 絮叨絮叨 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗 ...

  6. jQuery自定义插件--banner图滚动

    前言 jQuery是一个功能强大的库,提供了开发JavaScript项目所需的所有核心函数.很多时候我们使用jQuery的原因就是因为其使用插件的功能,然而,有时候我们还是需要使用自定义代码来扩展这些 ...

  7. JQuery自定义插件详解之Banner图滚动插件

      前  言 JRedu JQuery是什么相信已经不需要详细介绍了.作为时下最火的JS库之一,JQuery将其"Write Less,Do More!"的口号发挥的极致.而帮助J ...

  8. 代码：jquery自定义插件 demo

    jquery自定义插件 demo 2016-1-13 只是一个简易的示例 <script type="text/javascript" src="http://cd ...

  9. fullpage的使用以及less, Sass的属性和JQuery自定义插件的声明和使用

    使用fullpage的步骤   1 导入JQuery.js fullpage,js fullpage.css 2 组建网页布局,最外层id="fullpage" 单页class=& ...

随机推荐

  1. cocos2dx A* + tiledMap

    本文转自:http://blog.csdn.net/w18767104183/article/category/1757765 前面一章讲了cocos2dx 中使用A星算法 这章中讲 A*结合tile ...

  2. 《Nginx文件类型错误解析漏洞－－攻击演练》 (转)

    今天看书看到其中提到的一个漏洞,那就是Nginx+PHP的服务器中,如果PHP的配置里 cgi.fix_pathinfo=1 那么就会产生一个漏洞.这个配置默认是1的,设为0会导致很多MVC框架(如T ...

  3. U7Linux文件与目录管理

    1. .:代表当前层目录． ..:代表上一层目录． -:代表前一个工作目录． ~:代表目前用户所在的主文件夹． ~account:代表account这个用户的主文件夹． 2.pwd:显示当前目录． p ...

  4. vb.net版机房收费——助你学会七层架构（一）

    我自己写机房的时候,看非常多高人的博客,各种的借鉴,当初务必的纠结,如今整个机房敲完了,写这篇博客给大家一个总体上的.简单理解的七层,期望大家看完这篇文章之后,不会这个纠结了. 首先大家得看了我的上一 ...

  5. Cocos2d-x Layout简单使用

    1. Text* alert = Text::create("Layout", "fonts/Marker Felt.ttf", 30 ); alert-> ...

  6. android中listview分页载入数据

    前段时间做的新浪微博项目一直想实现listview分页载入数据,今天最终实现了,哈哈!感觉挺好的,今天又写了个demo给大家分享下. 首先说下listview的优化方案,这也是面试中常考的题目.优化方 ...

  7. 鸽巢原理应用-分糖果 POJ 3370 Halloween treats

    基本原理:n+1只鸽子飞回n个鸽笼至少有一个鸽笼含有不少于2只的鸽子. 很简单,应用却也很多,很巧妙,看例题: Description Every year there is the same pro ...

  8. hdu(预处理+线段树）

    给n个数,m个询问, 问任意区间内与其它数互质的数有多少个 比如3个数1 2 4,询问[1,3] 那么答案是1 千万要记住,这样的题目,如果你不转变下,使劲往线段树想(虽然转变之后,也说要用到线段树, ...

  9. Android如何获得手机power_profile.xml文件

    上的能量消耗进行最近的测试,阅读文章一个月,最后,我们发现了一些新的想法,但产生的问题.那 工作无法再进行下去. 在Android手机中,对于手机中的每一个部件(cpu.led.gps.3g等等)执行 ...

  10. An Overview of Complex Event Processing

    An Overview of Complex Event Processing 复杂事件处理技术概览(一) 翻译前言:我在理解复杂事件处理(CEP)方面一直有这样的困惑--为什么这种计算模式是有效的, ...