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

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. zabbix监控nginx连接状态(转)

    zabbix监控nginx zabbix可以监控nginx的状态,关于一个服务的状态可以查看服务本身的状态(版本号.是否开启),还应该关注服务能力(例如以nginx的负载效果:连接数.请求数和句柄数) ...

  2. Linux下精确控制时间的函数

    Linux下精确控制时间的函数 在测试程序接口运行时间的时候,常用time,gettimeofday等函数,但是这些函数在程序执行的时候是耗费时间的,如果仅仅测试时间还行,但是如果程序中用到时间控制类 ...

  3. 【转向Javascript系列】从setTimeout说事件循环模型

    本文首发在alloyteam团队博客,链接地址http://www.alloyteam.com/2015/10/turning-to-javascript-series-from-settimeout ...

  4. 道破Redis的VM

    原创文章是freas_1990.转载请注明出处:http://blog.csdn.net/freas_1990/article/details/42052813 Redis唯一的那个key的value ...

  5. JDBC与反射

    什么是JDBC Java定义了一套关于连接使用数据库的规范(接口)叫做JDBC,许多数据库厂商实现了这个规范,所以我们可以通过Java提供的接口编程,使得我们更换数据库的时候不用修改原来的代码,只需要 ...

  6. Golang初学者的资源整理

    看了汪汪汪不是我的语言的GO语言零基础入门资料整理,个人感觉还不够全面,忍不住过来补充一些内容. 网站教程: GO语言编程 and GO语言开发2048 from 实验楼Go语言后台应用开发 form ...

  7. linux提取锁和信号灯经常使用

    1.信号( 这两个过程之间的同步) struct semaphore power_sem; sema_init(&pdata->power_sem,1); down(&pdata ...

  8. 数据库的group by 分组

    有一个表 查询结果为 用下面的代码写 select COUNT( case NumName when 'a' then NumName end ) as 'aaa', COUNT( case NumN ...

  9. C语言程序代写（qq:928900200）

    1cs3157 – Advanced ProgrammingSummer 2014, Project 1, 150 pointsJune 17, 2014Follow these step-by-st ...

  10. Cocos2d-x 3.2 Lua演示样例 XMLHttpRequestTest（Http网络请求）

    Cocos2d-x 3.2 Lua演示样例 XMLHttpRequestTest(Http网络请求)     本篇博客介绍Cocos2d-x 3.2Lua演示样例中的XMLHttpRequestTes ...