jQuery 插件简单模板
/*!
* Copyright yunos.com All rights reserved.
* jquery.scrollspy.js
* @author v10258@qq.com
* @version 0-0-1
*/
(function ($) { // contructor function
var ScrollSpy = function (element, options) {
this.element = $(element);
this.options = $.extend({}, ScrollSpy.defaults, options || {});
this.anchorArr = $(element).find('a');
this.init();
}; // default config
ScrollSpy.defaults = {
scrollEle: $(window)
}; // prototype
ScrollSpy.prototype = {
constractor: ScrollSpy,
init: function () {
var self = this,
element = this.element,
scrollEle = this.options.scrollEle,
anchorData,
scrollTop; scrollEle.on('scroll', function () {
// The realization of the bad dynamic acquisition
anchorData = self.getAnchorData();
scrollTop = $(this).scrollTop();
for (var i = 0, len = anchorData.length; i < len; i++) {
if (anchorData[i].min <= scrollTop && scrollTop < anchorData[i].max) {
$(anchorData[i].author).parent().addClass('current').siblings().removeClass('current');
break;
}
}
});
},
getAnchorData: function () {
var anchorArr = this.anchorArr,
active,
activeDom,
anchorTargetArr = []; anchorArr.each(function (i, n) {
active = $($(this).attr('href'));
activeDom = active[0];
anchorTargetArr.push({
ele: activeDom,
author: this,
min: active.offset().top,
max: active.offset().top + active.height()
});
});
return anchorTargetArr;
},
distroy: function(){
this.element.removeData('scrollspy');
this.options.scrollEle.off('scroll');
}
}; // bridging
$.fn.scrollspy = function (option) {
return this.each(function () {
var $this = $(this),
data = $this.data('scrollspy'),
options = typeof option == 'object' && option; if (!data) $this.data('scrollspy', (data = new ScrollSpy(this, options)));
if (typeof option == 'string') data[option]();
});
};
})(jQuery);
个人感觉,写插件,插件的具体结构,能用原生结构,还是用原生结构的好,最后桥接在jquery上.
如果像下面这样,看起来是不是有点 蛋疼呢。
(function ($) {
$.love.defaults = {
// ......
};
$.love = function (element, o) {
this.element = element;
this.options = $.extend({}, $.love.defaults, o);
// ......
}; var $love = $.love;
$love.fn = $love.prototype = {
verson: '0.0.1'
// ......
};
$love.fn.extend = $love.extend = $.extend; $love.fn.extend({
metod: function () { }
// ......
}); $.fn.ilove = function (o) {
// ......
};
})(jQuery);
jQuery 插件简单模板的更多相关文章
- jquery 插件封装模板
//插件编写模板 ;(function ($) { $.fn.plugIn = function ( opt ) { var def = { //这里填写自定义的参数例如: event : 'clic ...
- jquery插件简单的声明方法
(function($){ // 声明插件内容 $.fn.pluginName = function(options){ // 默认插件配置 var ...
- table切换jquery插件 jQuery插件写法模板 流程
通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法 通过$.widget()应用jQuery UI的部件工厂方式创建 通过$.extend()来扩展jQuery $. ...
- python 全栈开发,Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)
一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...
- jquery 插件和后台模板搜集
弹框 alert confirmhttp://www.jq22.com/jquery-info2607 jQuery表格排序筛选插件http://www.jq22.com/jquery-info880 ...
- 一个简单的消息提示jquery插件
最近在工作中写了一个jquery插件,效果如下: 就是一个简单的提示消息的一个东西,支持最大化.最小化.关闭.自定义速度.自定义点击事件,数据有ajax请求和本地数据两种形式.还有不完善的地方,只做了 ...
- 推荐两款简单好用的图片放大jquery插件
一.zoomfiy.js 推荐可以从这里下载 使用说明: 使用该jquery 插件引入该插件的js:zoomfiy.js 或 min引入该插件的css:zoomfiy.css 或 min前后顺序都可j ...
- jquery 提示简单效果插件 cluetip
介绍一个不错的jquery插件-cluetip 我们在做web项目的时候,经常会使用到提示效果.html自带的提示效果是label标签的title,但是这个效果过于简单和难看,并且不方便调整样式. 今 ...
- 编写一个简单的Jquery插件
1.实现内容 定义一个简单的jquery插件,alert传递进来的参数 2.插件js文件(jquery.showplugin.js) (function ($) { //定义插件中的方法 var me ...
随机推荐
- Windows 自动关机/定时关机 命令 shuntdown
一 .倒计时关机: 指定系统在10分钟后自动关闭:点击"开始→运行",输入命令"Shutdown -s -t 60"(注意:引号不输入,参数之间有空格 ...
- (原创)古典主义——平凡之美 佳作欣赏(摄影,欣赏)
文中图片摘自腾讯文化网:www.cal.qq.com 1.Abstract 生活本就是平淡的,如同真理一般寂静.平时生活中不经意的瞬间,也有它本来的美丽.下面一组图是上上个世纪到上个世纪末一个 ...
- WM8978和VS1053B的区别
WM8978是DAC和ADC芯片,不具备编解码的功能.不能把MP3格式或者WAV格式的文件解码出来.有播放和录音功能. 录音如果需要保存为MP3或者WAV格式,那么需要进行软件编码. VS1053B是 ...
- Django的virtualenv环境搭建
安装virtualenv好处多多,可以让当前的项目使用单独的类库,实现系统类库的隔离,所以能够自由地控制当前项目类库的版本,不受系统类库的影响:还有其他N多好处. 下面是安装说明和使用示例: 首先安装 ...
- libmegjb.so加载问题调试和分析
欢迎转载opendevkit文章, 文章原始地址: http://www.opendevkit.com/?e=70 01-01 00:09:21.084: D/dalvikvm(10394): Try ...
- php中的mysql 和 mysqli 区别
mysql是非持续连接函数,每次链接都会打开一个连接进程 mysqli是持续连接函数,多次运行将使用同一连接进程,从而降低服务器开销.
- 直接代码POST数据调用WebService
ps:使用过webservice的童鞋大概都明白它是基于Soap协议交换数据的,同时Soap协议是对HTTP协议的扩展,其实我们就可以认为调用一个WEB服务就是通过http协议GET或POST数据的过 ...
- mysql5.7 代价模型浅析
代价模型 mysql 5.7.10代价计算相对之前的版本有5.7 代价模型浅析较大的改进.例如 代价模型参数可以动态配置,可以适应不同的硬件 区分考虑数据在内存和在磁盘中的代价 代价精度提升为浮点型 ...
- Javascript-URL帮助类
很久以前写的一个js关于url的帮助类,今天又翻出来了.贴一下源码,做一个简单的教程. 作用 这是一个关于urlquery的一个帮助类,我们在前端编程的时候经常涉及到操作并重组url的情况,在参数比较 ...
- Centos6下安装Mono和Jexus部署ASP.NET应用程序(纯干货)
一.服务器 腾讯云VPS,Centos6.6系统 二.安装 1.yum升级 yum –y update 2.安装Mono所需要的库 yum -y install gcc gcc-c++ bison p ...