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 相关文章推荐
jquery autocomplete自动完成插件的的使用方法
Aug 07 Javascript
Javascript处理DOM元素事件实现代码
May 23 Javascript
js history对象简单实现返回和前进
Oct 30 Javascript
JS OffsetParent属性深入解析
Jan 13 Javascript
开源的javascript项目Kissy介绍
Nov 28 Javascript
javascript实现uploadify上传格式以及个数限制
Nov 23 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
Sep 17 Javascript
js实现非常棒的弹出div
Oct 06 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
Feb 24 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
Sep 07 Javascript
利用JS响应式修改vue实现页面的input值
Sep 02 Javascript
浅谈vuex中store的命名空间
Nov 08 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
CodeIgniter中实现泛域名解析
2014/07/19 PHP
PHP文件读写操作相关函数总结
2014/11/18 PHP
PHP简单判断字符串是否包含另一个字符串的方法
2016/03/25 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
基于PHP实现发微博动态代码实例
2020/12/11 PHP
javascript实现的距离现在多长时间后的一个格式化的日期
2009/10/29 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
2011/07/13 Javascript
CheckBoxList多选样式jquery、C#获取选择项
2013/09/06 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
2014/01/08 Javascript
一个判断抢购时间是否到达的简单的js函数
2014/06/23 Javascript
JavaScript中的Web worker多线程API研究
2014/12/06 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
2015/08/05 Javascript
Javascript实现快速排序(Quicksort)的算法详解
2015/09/06 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
2015/11/17 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
9个让JavaScript调试更简单的Console命令
2016/11/14 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
2017/01/20 Javascript
JavaScript实现一个简易的计算器实例代码
2018/05/10 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
jquery实现烟花效果(面向对象)
2020/03/10 jQuery
Vue中的this.$options.data()和this.$data用法说明
2020/07/26 Javascript
vc6编写python扩展的方法分享
2014/01/17 Python
python中类的一些方法分析
2014/09/25 Python
Scrapy框架CrawlSpiders的介绍以及使用详解
2017/11/29 Python
用Python编写一个简单的CS架构后门的方法
2018/11/20 Python
python中selenium操作下拉滚动条的几种方法汇总
2019/07/14 Python
Python爬虫学习之翻译小程序
2019/07/30 Python
python脚本调用iftop 统计业务应用流量的思路详解
2019/10/11 Python
利用pyshp包给shapefile文件添加字段的实例
2019/12/06 Python
pytorch实现线性拟合方式
2020/01/15 Python
一款纯css3实现简单的checkbox复选框和radio单选框
2014/11/05 HTML / CSS
动物学专业毕业生求职信
2013/10/11 职场文书
预备党员2014年第四季度思想汇报范文
2014/10/25 职场文书
企业承诺书格式范文
2015/04/28 职场文书
毕业实习感受与体会
2015/05/26 职场文书
《女娲补天》读后感5篇
2019/12/31 职场文书