本例子实现弹窗的效果:

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=$("
"); title=$("

"); content=$("

"); 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


<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:"我不是黄蓉
我不会武功
我只要靖哥哥
完美的爱情"
});
});
});
</script>
 

实现后的效果如下:

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

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

    该示例实现弹出窗口效应: 1.jquery.show.js /* * 开发人员:lzugis * 开发时间:2014年6月10日 * 实现功能:点击在鼠标位置显示div * 版本号序号:1.0 */ ...

  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. ffmpeg安装的问题

    php语音转换需要安装ffmpeg文件 参考地址: http://thierry-xing.iteye.com/blog/2017864 http://diogomelo.net/blog/11/en ...

  2. 读Java 804 - Quick refresher

    Upcast永远是成功的,但Downcast不是,记得做instanceof判断 仅抛不同异常,而返回值相同的重载是不可以的 static import只会import静态类 static metho ...

  3. GNU风格 ARM汇编语法指南

    汇编源程序一般用于系统最基本的初始化:初始化堆栈指针.设置页表.操作 ARM的协处理器等.这些初始化工作完成后就可以跳转到C代码main函数中执行. 1.  GNU汇编语言语句格式 任何Linux汇编 ...

  4. 配置新系统(Win7 x64)

    新装了一个Win7 x64系统.总结了一些系统配置需要注意的地方. 1. C盘空间 发现C盘被用去了50G的空间,在什么软件都没装的情况下,被用去这么多,感到不可思议. 打开控制面板->文件夹选 ...

  5. 在Linux 应用层 基于i2c-dev.h 实现i2c读写

    /* i2c-dev.h - i2c-bus driver, char device interface Copyright (C) 1995-97 Simon G. Vogl Copyright ( ...

  6. MxNet Windows下安装

    项目链接:https://github.com/dmlc/mxnet 因为要做一些开发工作,prebuilt的lib不能满足需求.由于工作环境要求是windows,所以可以利用cmake工具来构建. ...

  7. [Z] 北大一牛人生物转申CS的经历

    http://www.bdwm.net/bbs/bbscon.php?board=CIS&file=M.1367038121.A&num=626&attach=0&di ...

  8. Android动态设置android:drawableLeft|Right|Top|Bottom 并根据分辨率自适应

    http://blog.sina.com.cn/s/blog_4b93170a0102e1m9.html //调用setCompoundDrawables时,必须调用Drawable.setBound ...

  9. 储物柜soket通信协议和中间件实现技术细节

    一.中间件程序的职责: 1)对柜机提供soket长连接的服务器端,就是soket server.可提供上万的客户端同时连接.用来实时响应控制请求,中间件必须随时知道某个柜机的在线状态,外部请求时才能判 ...

  10. yii2 [行为] behaviors 拦截器

    yii2 拦截器 在控制器中可以自定义对action的拦截器,拦截器需要继承 \yii\base\ActionFilter 参考代码: class BaseUserAuthorizeFilter ex ...