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

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. Codeforces 452A Eevee

    #include<bits/stdc++.h> using namespace std; string m[]={"vaporeon","jolteon&qu ...

  2. Java正則表達式演示样例

    import java.util.regex.Matcher; import java.util.regex.Pattern; public class RegexMatches { public s ...

  3. Cordova CLI源码分析（二）——package.json

    每个包需要在其顶层目录下包含一个package.json文件,该文件不仅是包的说明,也影响npm安装包时的配置选项 更多参数详见参考文档https://npmjs.org/doc/json.html ...

  4. Android开发之按键、触摸屏和手势输入专业压力測试方法

    按键输入.触摸屏输入和手势笔画输入等功能是Android开发的基本功能.其稳定性和健壮性对移动应用系统开发很重要.按键.触摸屏和手势输入专业压力測试方法能够使用Monkey,相应用程序进行压力測试,检 ...

  5. sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)

    在使用Hibernate的J2EE项目中,莫名其妙出现如上错误,既不报错,也不运行不论什么输出測试代码,更不返回结果. 经过排查,在方法里面引用的实体类和其映射文件属性个数不一致. 改动一致后,即解决 ...

  6. android--自己定义ProgressDialog显示位置(其他Dialog子类都能够设置)

    1.普通情况下,系统默认的Dialog显示位置为屏幕居中: pbDialog = new ProgressDialog(MainActivity.this); pbDialog.setMessage( ...

  7. OCP-1Z0-051-题目解析-第30题

    30. Evaluate the following CREATE TABLE commands: CREATE TABLE orders (ord_no NUMBER(2) CONSTRAINT o ...

  8. sql小技巧 group by datetime类型字段，只取其中的日期部分

    工作中经常会遇到,要在sql中查询报表,查询结果要求按照日期来罗列, 或按照天, 或按照月,年. 这个时候我们经常会苦恼,datetime是精确到毫秒的,如果单纯的group by datetime就 ...

  9. cocos2d-x3.0 相对布局(一)

    2dx相对布局和Android非常类似.假设前完成Android它应该是easy入门. Size widgetSize = Director::getInstance()->getWinSize ...

  10. 很多Python新手教程

    重要提示 这不是一个教程新手程序员准备,你担任很快编程,或者没有使用1至2程序设计语言,请移步!这是一些编程经验准备.它最出名Java或C,理解命令行,Shell等待.简而言之,面向老鸟的,让老鸟高速 ...