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 相关文章推荐
简约JS日历控件 实例代码
Jul 12 Javascript
封装的jquery翻页滚动(示例代码)
Nov 18 Javascript
jQuery实现精美的多级下拉菜单特效
Mar 14 Javascript
javascript三元运算符用法实例
Apr 16 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
Sep 04 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
Dec 03 Javascript
逻辑表达式中与或非的用法详解
Jun 06 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
Nov 23 Javascript
JS实现的简单轮播图运动效果示例
Dec 22 Javascript
javascript利用键盘控制小方块的移动
Apr 20 Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 19 Javascript
vue中destroyed方法的使用说明
Jul 21 Javascript
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 递归效率分析
2009/11/24 PHP
php设计模式之简单工厂模式详解
2014/09/04 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
2010/10/20 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
node.js cookie-parser之parser.js
2016/06/06 Javascript
深入理解Angular2 模板语法
2016/08/07 Javascript
angular学习之ngRoute路由机制
2017/04/12 Javascript
JavaScript html5 canvas实现图片上画超链接
2017/10/20 Javascript
详解vue使用插槽分发内容slot的用法
2019/03/28 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
2019/08/27 Javascript
JavaScript函数IIFE使用详解
2019/10/21 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
2021/02/20 Vue.js
在Windows8上的搭建Python和Django环境
2014/07/03 Python
Python的Django框架使用入门指引
2015/04/15 Python
Python中的字符串类型基本知识学习教程
2016/02/04 Python
python代理工具mitmproxy使用指南
2019/07/04 Python
Django实现基于类的分页功能
2019/10/31 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
pycharm中import呈现灰色原因的解决方法
2020/03/04 Python
Python如何读取、写入CSV数据
2020/07/28 Python
飞利浦比利时官方网站:Philips比利时
2016/08/24 全球购物
彪马荷兰官网:PUMA荷兰
2019/05/08 全球购物
DJI全球:DJI Global
2021/03/15 全球购物
土木工程建筑专业毕业生求职信
2013/10/21 职场文书
五一手机促销方案
2014/03/08 职场文书
幼儿园教师自我鉴定
2014/03/20 职场文书
大学生英语演讲稿
2014/04/24 职场文书
关于青春的演讲稿
2014/05/05 职场文书
先进事迹演讲稿
2014/09/01 职场文书
工作经常出错的检讨书
2014/09/13 职场文书
2015年化验室工作总结
2015/04/23 职场文书