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效果之图片减速度滚动实现代码
Dec 08 Javascript
jquery对dom的操作常用方法整理
Jun 25 Javascript
javascript数字验证的实例代码(推荐)
Aug 20 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
Dec 02 Javascript
Bootstrap表单制作代码
Mar 17 Javascript
vue axios用法教程详解
Jul 23 Javascript
JS实现遍历不规则多维数组的方法
Mar 21 Javascript
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
JS实现百度搜索框关键字推荐
Feb 17 Javascript
element-ui tree结构实现增删改自定义功能代码
Aug 31 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
Dec 20 Javascript
uniapp微信小程序:key失效的解决方法
Jan 20 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
图书管理程序(一)
2006/10/09 PHP
PHP中func_get_args(),func_get_arg(),func_num_args()的区别
2013/09/30 PHP
PHP中的流(streams)浅析
2015/07/02 PHP
PHP快速推送微信模板消息
2017/04/14 PHP
PHP使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
JavaScript中的对象化编程
2008/01/16 Javascript
jquery中常用的SET和GET
2009/01/13 Javascript
小型js框架veryide.librar源代码
2009/03/05 Javascript
Javascript 读书笔记索引贴
2010/01/11 Javascript
javascript开发技术大全-第3章 js数据类型
2011/07/03 Javascript
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
jQuery实现返回顶部效果的方法
2015/05/29 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
2019/10/09 Javascript
[00:23]魔方之谜解锁款式
2018/12/20 DOTA
Python使用MD5加密字符串示例
2014/08/22 Python
对numpy中的where方法嵌套使用详解
2018/10/31 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
使用python实现数组、链表、队列、栈的方法
2019/12/20 Python
python计算二维矩形IOU实例
2020/01/18 Python
windows python3安装Jupyter Notebooks教程
2020/04/13 Python
python小白学习包管理器pip安装
2020/06/09 Python
python如何调用java类
2020/07/05 Python
Python文件操作及内置函数flush原理解析
2020/10/13 Python
美国百年历史早餐食品供应商:Wolferman’s
2017/01/18 全球购物
Charles&Keith美国官方网站:新加坡快时尚鞋类和配饰零售商
2019/11/27 全球购物
小学语文课后反思精选
2014/04/25 职场文书
消防标语大全
2014/06/07 职场文书
九一八事变演讲稿
2014/09/05 职场文书
党支部书记四风问题整改措施
2014/09/24 职场文书
小学生法制教育心得体会
2016/01/14 职场文书
教你用python实现一个无界面的小型图书管理系统
2021/05/21 Python
Unity连接MySQL并读取表格数据的实现代码
2021/06/20 MySQL
python中Pyqt5使用Qlabel标签播放视频
2022/04/22 Python
阿里云服务器部署RabbitMQ集群的详细教程
2022/06/01 Servers