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 相关文章推荐
在b/s开发中经常用到的javaScript技术
Aug 23 Javascript
prototype Element学习笔记(Element篇三)
Oct 26 Javascript
js不能跳转到上一页面的问题解决方法
Mar 01 Javascript
CheckBoxList多选样式jquery、C#获取选择项
Sep 06 Javascript
浅谈Javascript数组索引
Jul 29 Javascript
javascript实现支持移动设备画廊
Aug 24 Javascript
JS清除字符串中重复值的实现方法
Aug 03 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
Dec 17 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
Mar 23 Javascript
微信小程序如何实现全局重新加载
Jun 05 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
Feb 06 Javascript
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
Oct 05 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
十大催泪虐心动漫电影,有几部你还没看
2020/03/04 日漫
PHP 网站修改默认访问文件的nginx配置
2017/05/27 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
PHP实现的折半查询算法示例
2017/10/09 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
js获取input标签的输入值实现代码
2013/08/05 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
2013/10/11 Javascript
javascript面向对象特性代码实例
2014/06/12 Javascript
Javascript闭包(Closure)详解
2015/05/05 Javascript
微信企业号开发之微信考勤Cookies的使用
2015/09/11 Javascript
JS实现来回出现文字的状态栏特效代码
2015/10/31 Javascript
Bootstrap零基础学习第一课之模板
2016/07/18 Javascript
jquery.Callbacks的实现详解
2016/11/30 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
2017/02/15 Javascript
Vue项目中引入外部文件的方法(css、js、less)
2017/07/24 Javascript
ES6扩展运算符的用途实例详解
2017/08/20 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
2019/09/16 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
Python冒泡排序注意要点实例详解
2016/09/09 Python
Python for循环与range函数的使用详解
2019/03/23 Python
解决django服务器重启端口被占用的问题
2019/07/26 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
分享CSS3制作卡片式图片的方法
2016/07/08 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
世界领先的高品质定制产品平台:Zazzle
2017/07/23 全球购物
zooplus意大利:在线宠物商店
2019/08/07 全球购物
精彩自我鉴定
2014/01/16 职场文书
小学生考试获奖感言
2014/01/30 职场文书
市场营销专业大学生职业生涯规划文
2014/03/06 职场文书
党员干部2014全国两会学习心得体会
2014/03/10 职场文书
生日宴会主持词
2014/03/20 职场文书
岗位廉洁从业承诺书
2014/03/28 职场文书
小学生期末评语
2014/04/21 职场文书
2015年党风廉政建设目标责任书
2015/05/08 职场文书
MongoDB使用场景总结
2022/02/24 MongoDB
MySQL聚簇索引和非聚簇索引的区别详情
2022/06/14 MySQL