jquery自定义插件开发之window的实现过程


Posted in Javascript onMay 06, 2016

本例子实现弹窗的效果:如果亲感觉效果还不错,请继续往下阅读。

jquery自定义插件开发之window的实现过程

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:"我不是黄蓉<br>我不会武功<br>我只要靖哥哥<br>完美的爱情"
}); 
});
});
</script>
<input id="show" name="showDiv" value="显示" type="button">

以上所述是小编给大家介绍的jquery自定义插件开发之window的实现过程,希望对大家有所帮助!同时也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用一段js程序来实现动画功能
Mar 06 Javascript
js 实现复制到粘贴板的功能代码
May 13 Javascript
DWZ刷新dialog解决方法
Mar 03 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
Apr 01 Javascript
jquery分割字符串的方法
Jun 24 Javascript
jQuery中inArray方法注意事项分析
Jan 25 Javascript
jquery遍历json对象集合详解
May 18 Javascript
javascript创建含数字字母的随机字符串方法总结
Aug 01 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
Feb 16 Javascript
无限循环轮播图之运动框架(原生JS实现)
Oct 01 Javascript
vue服务端渲染操作简单入门实例分析
Aug 28 Javascript
小程序实现录音上传功能
Nov 22 Javascript
快速使用Bootstrap搭建传送带
May 06 #Javascript
BootStrap响应式导航条实例介绍
May 06 #Javascript
jQuery侧边栏实现代码
May 06 #Javascript
BootStrap制作导航条实例代码
May 06 #Javascript
jQuery实现下拉框功能实例代码
May 06 #Javascript
jQuery 实现评论等级好评差评特效
May 06 #Javascript
Node.js插件安装图文教程
May 06 #Javascript
You might like
PHP中include()与require()的区别说明
2010/03/10 PHP
php漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
Laravel 5框架学习之Eloquent 关系
2015/04/09 PHP
PHP信号量基本用法实例详解
2016/02/12 PHP
php 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
Yii框架小部件(Widgets)用法实例详解
2020/05/15 PHP
HTTP头隐藏PHP版本号实现过程解析
2020/12/09 PHP
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
IE8下String的Trim()方法失效的解决方法
2013/11/08 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
jQuery中unbind()方法用法实例
2015/01/19 Javascript
浅谈EasyUI中编辑treegrid的方法
2015/03/01 Javascript
javascript作用域问题实例分析
2015/07/13 Javascript
Bootstrap模块dropdown实现下拉框响应
2016/05/22 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
2016/10/13 Javascript
JavaScript无缝滚动效果的实例代码
2017/03/27 Javascript
判断颜色是否合法的正则表达式(详解)
2017/05/03 Javascript
微信小程序数据分析之自定义分析的实现
2018/08/17 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
2018/08/24 Javascript
vue this.reload 方法 配置
2018/09/12 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
2020/05/06 Javascript
Python 序列化 pickle/cPickle模块使用介绍
2014/11/30 Python
详解Django中的过滤器
2015/07/16 Python
python 读取txt中每行数据,并且保存到excel中的实例
2018/04/29 Python
PyCharm安装第三方库如Requests的图文教程
2018/05/18 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
Selenium环境变量配置(火狐浏览器)及验证实现
2020/12/07 Python
ReVive利维肤美国官网:RéVive Skincare
2018/04/18 全球购物
超市后勤自我鉴定
2014/01/17 职场文书
会议室标语
2014/06/21 职场文书
韩语专业职业生涯规划范文:成功之路就在我们脚下
2014/09/11 职场文书
2015年校长新年寄语
2014/12/08 职场文书
汽车销售员岗位职责
2015/04/11 职场文书
python源码剖析之PyObject详解
2021/05/18 Python
SpringBoot2零基础到精通之数据库专项精讲
2022/03/22 Java/Android
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers