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 多级下拉菜单核心代码
May 21 Javascript
使用jQuery清空file文件域的解决方案
Apr 12 Javascript
使用变量动态设置js的属性名
Oct 19 Javascript
jQuery实现的调整表格行tr上下顺序
Jan 10 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
Feb 16 Javascript
JS 面向对象之继承---多种组合继承详解
Jul 10 Javascript
JS 数字转换为大写金额的简单实例
Aug 04 Javascript
jquery拖动改变div大小
Jul 04 jQuery
React + webpack 环境配置的方法步骤
Sep 07 Javascript
使用RxJS更优雅地进行定时请求详析
Jun 02 Javascript
vue子传父关于.sync与$emit的实现
Nov 05 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
Dec 24 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
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
自定义PHP分页函数
2006/10/09 PHP
PHP加密解密类实例代码
2016/07/20 PHP
PHP实现转盘抽奖算法分享
2020/04/15 PHP
解决AJAX中跨域访问出现'没有权限'的错误
2008/08/20 Javascript
Dom 结点创建 基础知识
2011/10/01 Javascript
JavaScript function函数种类详解
2016/02/22 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
2016/06/13 Javascript
原生JS下拉加载插件分享
2016/12/26 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
2017/07/25 Javascript
React + webpack 环境配置的方法步骤
2017/09/07 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
ES6 let和const定义变量与常量的应用实例分析
2019/06/27 Javascript
vue项目中极验验证的使用代码示例
2019/12/03 Javascript
深入浅析vue全局环境变量和模式
2020/04/28 Javascript
vue使用video插件vue-video-player的示例
2020/10/03 Javascript
[03:44]2014DOTA2国际邀请赛 71专访:DK战队赛前讨论视频遭泄露
2014/07/13 DOTA
[00:52]DOTA2国际邀请赛
2020/02/21 DOTA
python选择排序算法实例总结
2015/07/01 Python
浅谈Python peewee 使用经验
2017/10/20 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
Python数据结构与算法(几种排序)小结
2019/06/22 Python
python for循环remove同一个list过程解析
2019/08/14 Python
django教程如何自学
2020/07/31 Python
django跳转页面传参的实现
2020/09/17 Python
用HTML5制作一个简单的弹力球游戏
2015/05/12 HTML / CSS
锐步英国官网:Reebok英国
2019/11/29 全球购物
什么是反射
2012/03/17 面试题
遗体告别仪式主持词
2014/03/20 职场文书
职业规划实施方案
2014/06/10 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
小型婚礼主持词
2015/06/30 职场文书
新农村建设指导员工作总结
2015/08/13 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
MySQL笔记 —SQL运算符
2022/01/18 MySQL