jquery自定义插件——window的实现【示例代码】


Posted in Javascript onMay 06, 2016

本例子实现弹窗的效果:

1、jquery.show.js

/* 
 * 实现功能:点击在鼠标位置显示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 value=显示 type=button name=showDiv>

实现后的效果如下:

jquery自定义插件——window的实现【示例代码】

以上这篇jquery自定义插件——window的实现【示例代码】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript效率调优经验
Jun 04 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
Apr 11 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
May 03 Javascript
js之onload事件的一点使用心得
Aug 14 Javascript
javascript 中的 delete及delete运算符
Nov 15 Javascript
js性能优化技巧
Nov 29 Javascript
jquery mobile实现可折叠的导航按钮
Mar 11 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 Javascript
react+ant design实现Table的增、删、改的示例代码
Dec 27 Javascript
bootstrap table实现iview固定列的效果实例代码详解
Sep 30 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 Javascript
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
javascript创建对象的几种模式介绍
May 06 #Javascript
前端性能优化及技巧
May 06 #Javascript
jquery自定义插件开发之window的实现过程
May 06 #Javascript
快速使用Bootstrap搭建传送带
May 06 #Javascript
BootStrap响应式导航条实例介绍
May 06 #Javascript
jQuery侧边栏实现代码
May 06 #Javascript
BootStrap制作导航条实例代码
May 06 #Javascript
You might like
PHP入门速成教程
2007/03/19 PHP
php 代码优化的42条建议 推荐
2009/09/25 PHP
解析mysql left( right ) join使用on与where筛选的差异
2013/06/18 PHP
PHP输出当前进程所有变量/常量/模块/函数/类的示例
2013/11/07 PHP
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
PHP get_html_translation_table()函数用法讲解
2019/02/16 PHP
DOM相关内容速查手册
2007/02/07 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
2013/05/13 Javascript
jQuery拖拽 &amp; 弹出层 介绍与示例
2013/12/27 Javascript
javascript break指定标签打破多层循环示例
2014/01/20 Javascript
JS表的模拟方法
2015/02/05 Javascript
js随机生成网页背景颜色的方法
2015/02/26 Javascript
JavaScript中set与get方法用法示例
2018/08/15 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
Vue实现一个图片懒加载插件
2019/03/11 Javascript
NodeJS读取分析Nginx错误日志的方法
2019/05/14 NodeJs
js实现简易计算器功能
2019/10/18 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
2020/10/27 Javascript
详解Python的Django框架中的中间件
2015/07/24 Python
Python温度转换实例分析
2018/01/17 Python
selenium设置proxy、headers的方法(phantomjs、Chrome、Firefox)
2018/11/29 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
关于Pytorch MaxUnpool2d中size操作方式
2020/01/03 Python
Django与AJAX实现网页动态数据显示的示例代码
2021/02/24 Python
HTTP状态码详解
2021/03/18 杂记
使用html5 canvas 画时钟代码实例分享
2015/11/11 HTML / CSS
行政管理人员精品工作推荐信
2013/11/04 职场文书
物业管理毕业生个人的求职信
2013/11/30 职场文书
四年级评语大全
2014/04/21 职场文书
篮球比赛策划方案
2014/06/05 职场文书
个人违纪检讨书
2014/09/15 职场文书
Python爬虫爬取全球疫情数据并存储到mysql数据库的步骤
2021/03/29 Python
python爬虫请求库httpx和parsel解析库的使用测评
2021/05/10 Python
python超详细实现完整学生成绩管理系统
2022/03/17 Python