基于jq插件开发及弹窗实例
基于jq的插件开发是什么鬼,$.fn是什么鬼,我在实际工作中也遇到过这个问题,下面就让我们一起来看一看这些都是什么鬼。
首先我们介绍$.fn。
$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效。
如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个jquery实例都可以引用这个方法了.
那么你可以这样子:$("#div").abc();
jQuery为开发插件提拱了两个方法,分别是:
jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。
jQuery.fn.extend(object);给jQuery对象添加方法。
fn是什么东西呢。查看jQuery代码,就不难发现。
jQuery.fn = jQuery.prototype ={
init: function( selector, context ){//....
//......
};
原来 jQuery.fn =jQuery.prototype.对prototype肯定不会陌生啦。
jQuery便是一个封装得非常好的类,比如我们用语句 $("#btn1") 会生成一个 jQuery类的实例。
jQuery.extend(object); 为jQuery类添加添加类方法,可以理解为添加静态方法。如:
$.extend({
add:function(a,b){returna+b;}
});
便为 jQuery 添加一个为add 的 “静态方法”,之后便可以在引入 jQuery 的地方,使用这个方法了,
$.add(3,4); //return 7
jQuery.fn.extend(object);对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。
比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert当前编辑框里的内容。可以这么做:
jQuery代码
$.fn.extend({
alertWhileClick:function(){
$(this).click(function(){
alert($(this).val());
});
}
});
$.fn弹窗实例
这里边的mPop相当于给jq新加了一个事件。
类似于
jQuery.fn = jQuery.prototype ={
mPop: function( selector, context ){//....
//......
};
使用起来这么写 $.fn.mPop();
//弹窗
$.fn.mPop = function(){
$("body").css("position","relative");
var sctop = top.location == self.location ? $(window).scrollTop() : $(parent.window).scrollTop();
var winW = $(window).width();
var winH = $(window).height();
var tcH = $("body").height();
var w = $(this).innerWidth();
var h = $(this).innerHeight();
$(this).css({"left":(winW - w)/2+"px","z-index":"30"});
var bgdiv = "<div class='bgdiv'></div>";
$("body").append(bgdiv);
if(h>winH){
$(this).css({"display":"block","top":"0px"})
} else{
$(this).css("display", "block").css({top: ((winH - h) / 2 + sctop) + "px"});
}
$(".bgdiv").css({"width": winW + "px","height": tcH + "px","opacity": .6,"position": "absolute","left": "0","top": "0","z-index": 10,"background-color": "#000","display":"block"});
}
在使用的时候直接用就可以了
$('.tanchu').mPop();
==============================================================
说完$.fn我们再说说这里边的
var sctop = top.location == self.location ? $(window).scrollTop() : $(parent.window).scrollTop();
top.location != self.location 就是说当前窗体的url和父窗体的 url是不是相同 如果相同执行$(window).scrollTop();不同$(parent.window).scrollTop()。这个是为了防止别的网站嵌入你的网站的内容(比如用iframe嵌入的你的网站的页面)
基于jq插件开发及弹窗实例的更多相关文章
- 基于JQ的自定义弹窗组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 基于jq图片居中插件 [center]
最近在做一个项目,大量的图片基于js进行缩放(图片放大镜),考虑用css要写许多hack,而已经基于jq了,干脆写个方法得了. 代码很简单,不用多讲但是很实用. $.fn.extend({ cente ...
- 基于jQ+CSS3页面滚动内容元素动画特效
今天给大家分享一款基于jQ+CSS3页面滚动内容元素动画特效.这是一款基于jQuery+CSS3实现的页面滚动代码.该实例适用于适用浏览器:360.FireFox.Chrome.Safari.Oper ...
- 【转】基于Python的接口测试框架实例
下面小编就为大家带来一篇基于Python的接口测试框架实例.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 背景 最近公司在做消息推送,那么自然就会产生很多接口,测试 ...
- 基于jq流畅度非常好的图片左右切换焦点图
今天给大家分享一款基于jq流畅度非常好的图片左右切换焦点图.这是一款基于jQuery实现的支持鼠标拖动切换jQuery特效下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: &l ...
- react.js插件开发,x-dailog弹窗浮层组件
react.js插件开发,x-dailog弹窗浮层组件 我认为,每一个组件都应该有他自带的样式和属性事件回调配置.所以我会给x-dialog默认一套简单的样式,和各种默认的配置项.所有react插件示 ...
- 基于zabbix 的memached 多实例监控
基于zabbix 的memached 多实例监控 zabbix agentd 配置文件新增配置: UserParameter=memcached.server.discovery[*],ps uax ...
- 基于Python的接口测试框架实例
文章来源:http://www.jb51.net/article/96481.htm 下面小编就为大家带来一篇基于Python的接口测试框架实例.小编觉得挺不错的,现在就分享给大家,也给大家做个参考. ...
- 基于JQ的简单左右轮播图
// 轮播图 主要实现思想: a.第一层div,设置overflow为hidden. b.里面是一个ul,每个li里面有个img或者为每个li设置背景图片也可以. c.li设置为左浮动,排成一行,还有 ...
随机推荐
- 数据结构(树链剖分):BZOJ 4034: [HAOI2015]T2
Description 有一棵点数为 N 的树,以点 1 为根,且树点有边权.然后有 M 个 操作,分为三种: 操作 1 :把某个节点 x 的点权增加 a . 操作 2 :把某个节点 x 为根的子树中 ...
- 字符串(马拉车算法,后缀数组,稀疏表):BZOJ 3676 [Apio2014]回文串
Description 考虑一个只包含小写拉丁字母的字符串s.我们定义s的一个子串t的“出 现值”为t在s中的出现次数乘以t的长度.请你求出s的所有回文子串中的最 大出现值. Input 输入只有一行 ...
- WebBrowser控件默认使用IE9,IE10的方法
1,打开注册表 HKEY_LOCAL_MACHINE (or HKEY_CURRENT_USER) SOFTWARE Microsoft Internet E ...
- vim下缩进及高亮设置
1.配置文件的位置 在目录 /etc/ 下面,有个名为vimrc的文件,这是系统中公共的vim配置文件,对所有用户都有效.而在每个用户的主目录下,都可以自己建立私有的配置文件,命名为:“.vimrc” ...
- 数据结构——N皇后放置方法种数
Description 在N*N的方格棋盘放置了N个皇后,使得它们不相互攻击(即任意2个皇后不允许处在同一排,同一列,也不允许处在与棋盘边框成45角的斜线上. 你的任务是,对于给定的N,求出有多少种合 ...
- 数据结构——UVA 1600 机器人巡逻
描述 A robot has to patrol around a rectangular area which is in a form of mxn grid (m rows and n colu ...
- bzoj1251 序列终结者(Splay Tree+懒惰标记)
Description 网上有许多题,就是给定一个序列,要你支持几种操作:A.B.C.D.一看另一道题,又是一个序列 要支持几种操作:D.C.B.A.尤其是我们这里的某人,出模拟试题,居然还出了一道这 ...
- 【最短路】埃雷萨拉斯寻宝(eldrethalas) 解题报告
问题来源 BYVoid魔兽世界模拟赛 [问题描述] 一万两千年前,当精灵还是在艾萨拉女王的统治下的时候,辛德拉就是是女王手下一名很有地位的法师了.他受任建造了一座城市,来保存女王的法师们进行魔法研究的 ...
- setState的同步更新
react中的setState特点: 是异步操作函数: 组件在还没有渲染之前, this.setState 还没有被调用: 批量执行 State 转变时让 DOM 渲染更快(相对比一个一个的setSt ...
- VB.NET版机房收费系统—DataGridView应用
事实上,先前刚刚開始敲机房的时候,刚用到DataGridView的时候,总显得力不从心,先要一下子就学会,看了非常多的资料,但是依照写的时候,自己有不知道从什么地方下手,于是,当自己用查询SQL语句, ...