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

本例子实现弹窗的效果：

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的实现【示例代码】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jquery自定义插件结合baiduTemplate.js实现异步刷新（附源码）

    jquery自定义插件结合baiduTemplate.js实现异步刷新（附源码）

    上一篇记录了BaiduTemplate模板引擎使用示例(附源码),在此基础上对使用方法进行了封装 自定义插件jajaxrefresh.js 代码如下: //闭包限定命名空间 (function ($) { $.fn.extend({ "ajaxrefresh": function (options) { //检测用户传进来的参数是否合法 if (!isValid(options)) return this; var opts = $.extend({}, defaluts, optio

  • jQuery自定义插件详解及实例代码

    jQuery自定义插件详解及实例代码

     jQuery自定义插件 jQuery是一个功能强大的库,提供了开发JavaScript项目所需的所有核心函数.然而,有时候我们还是需要使用自定义代码来扩展这些核心函数来提高开发效率. jQuery库是为了加快JavaScript的开发速度而设计的,通过简化编写JavaScript的方式,减少代码量. jQuery编写插件有两种方式 1.添加jQuery对象级别的插件,原理是给jQuery类添加方法. 写法如下: (function($){ $.fn.extend({ 函数名:function(

  • 基于jQuery实现Accordion手风琴自定义插件

    目前网上有很多各种各样的手风琴插件,但是没有一个完整实现了的侧菜单,今天写了一个可以无限子节点的手风琴侧菜单,有需要的可以参考一下,有什么好的想法可以留言.(没有经过彻底测试,不过问题应该不大) 下面老规矩,直接贴代码: (function ($) { 'use strict'; var defaults = { url: null, param: {}, data: {}, fill: true, level_space: 15, onitemclick: null, style: { hea

  • jquery自定义插件开发之window的实现过程

    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

  • 基于jQuery实现Tabs选项卡自定义插件

    控件这东西网上找的多少都有些功能不如意的,只能自己动手来写了. Tabs插件很多人都需要用到,网上也有很多的例子,但是不是风格不搭调就是用着不习惯(自己写的不一定比别人的好但用着顺手In love) 下面直接贴代码,不喜勿喷: (function ($) { 'use strict'; var defaults = { type: "iframe", onchanged: null, style: { header_panel: "tab-headers", con

  • jQuery创建自己的插件(自定义插件)的方法

    jQuery创建自己的插件(自定义插件)的方法

    但必须知道,这些插件不是自己凭空产生的,它们是由开发人员编写.测试并完善的,这些人员为 jQuery 社区奉献了自己的业余时间.我们做这些都是免费的,是出于对自己代码的热爱.本文主要关注您如何回报这个伟大的社区,即如何编写自己的插件并上传到 jQuery 的插件页面.这可以让所有人使用您创建的插件,可以让整个 jQuery 开发社区变得更好.今年您也做出自己的贡献吧. 在编写本文中的插件时,我发现插件的创建过程以及用来创建它的框架非常简单明了.困难的地方在于想一些其他人还没有做过的事情,并编写一

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

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

    本例子实现弹窗的效果: 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=$

  • Flutter实现自定义搜索框AppBar的示例代码

    Flutter实现自定义搜索框AppBar的示例代码

    目录 介绍 效果图 实现步骤 完整源码 总结 介绍 开发中,页面头部为搜索样式的设计非常常见,为了可以像系统AppBar那样使用,这篇文章记录下在Flutter中自定义一个通用的搜索框AppBar记录. 功能点: 搜索框.返回键.清除搜索内容功能.键盘处理. 效果图 实现步骤 首先我们先来看下AppBar的源码,实现了PreferredSizeWidget类,我们可以知道这个类主要是控制AppBar的高度的,Scaffold脚手架里的AppBar的参数类型就是PreferredSizeWidge

  • Android自定义滑动验证条的示例代码

    Android自定义滑动验证条的示例代码

    本文介绍了Android自定义滑动验证条的示例代码,分享给大家,具体如下: *注:不知道为什么,h5的标签在这里没用了,所以我也只能用Markdown的语法来写了 项目地址:https://github.com/994866755/handsomeYe.seekbar.github.io 需求: 在我们的某些应用中需要滑动验证.比如说这个样子的: 刚开始我也很懵逼要怎么去弄,结果我去看了一些人的代码,有人是用自定义viewgroup去做,就是viewgroup包含滑动块和滑动条.但我觉得太麻烦,

  • layui中使用jquery控制radio选中事件的示例代码

    勾选 form.on('radio(yesHave)', function (data) { $("input[name='hasPrepaidVoucher'][title='有']").attr('checked',true); form.render(); }); 取消勾选 form.on('radio(noIssuer)', function (data) { debugger; $("input[name='voucherIssuer']").remove

  • python使用自定义钉钉机器人的示例代码

    1.添加自定义机器人 2.编写python代码请求钉钉机器人所给的webhook 钉钉自定义机器人官方文档 安全方式使用加签的方式: 第一步,把timestamp+"\n"+密钥当做签名字符串,使用HmacSHA256算法计算签名,然后进行Base64 encode,最后再把签名参数再进行urlEncode,得到最终的签名(需要使用UTF-8字符集). 参数 说明 timestamp 当前时间戳,单位是毫秒,与请求调用时间误差不能超过1小时 secret 密钥,机器人安全设置页面,加签

  • SpringSecurity自定义成功失败处理器的示例代码

    1. 新建SpringBoot工程 2. 项目依赖 <dependencies> <!-- security --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-security</artifactId> </dependency> <!-- thymeleaf -->

  • jquery Moblie入门—hello world的示例代码学习

    jquery Moblie入门—hello world的示例代码学习

    1.需要运行JQuery Mobile 移动应用页面,需要下载JQuery Mobile 3个相关插件文件(有多版本),jquery.mobile-1.2.0.min.css.jquery-1.8.3.min.js.jquery.mobile-1.2.0.min.js,JQuery Mobile官网地址:http://jquerymobile.com 2.将插件文件加载到页面中,注意它们的加载顺序,语句如: 复制代码 代码如下: <link href="Css/jquery.mobile-

随机推荐