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

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. php集成环境

    apache+php+mysql是常见php环境,在windows下也称为WAMP,对于初学者自选版本搭建总是会遇到一些麻烦,下面是收集到的一些集成环境安装: 1.AppServ (推荐,简洁精简) ...

  2. ConcurrentHashMap中的2的n次方幂上舍入方法（转）

    最近看JDK中的concurrentHashMap类的源码,其中有那么一个函数: /** * Returns a power of two table size for the given desir ...

  3. Linux 文件系统(二)---运行过程及结构间的关系

    (内核2.4.37) 一.首先.看看磁盘.超级块,inode节点在物理上总体的分布情况: (图示来自:www.daoluan.net) 对于一个分区,相应一个文件系统,一个文件系统事实上本质上还是磁盘 ...

  4. poj3176--Cow Bowling(dp:数塔问题)

    Cow Bowling Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 14028   Accepted: 9302 Desc ...

  5. adt-bundle-windows-x86_32-20140702

    adt-bundle-windows-x86_32-20140702 Windows > Preference,在Android里没有NDK选项 法一:help->install new ...

  6. windows phone 7 定位（获取经纬度）,然后找到经纬度所在的位置(城市信息)

    原文:windows phone 7 定位(获取经纬度),然后找到经纬度所在的位置(城市信息) 前几天做项目用到, 代码贴给大家. /// <summary> /// 获取当前位置的经纬度 ...

  7. http协议之cookie标准RFC6265介绍

      [Docs] [txt|pdf] [draft-ietf-httpst...] [Diff1] [Diff2] [Errata] PROPOSED STANDARD Errata Exist In ...

  8. Android学习之 AChartEngine 图表绘制

    Android 开源图表绘制工具AChartEngine地址:http://code.google.com/p/achartengine/ AChartEngine Android实现图表绘制和展示( ...

  9. volatile解析（转）

    Java并发编程:volatile关键字解析 volatile这个关键字可能很多朋友都听说过,或许也都用过.在Java 5之前,它是一个备受争议的关键字,因为在程序中使用它往往会导致出人意料的结果.在 ...

  10. Linux命令对应的全称解释（转）

    Filesystem Hierarchy Standard(FHS) /:根目录,所有的目录.文件.设备都在/之下,/就是Linux文件系统的组织者,也是最上级的领导者.  /bin:bin 就是二进 ...