/*!
* 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 插件简单模板的更多相关文章

  1. jquery 插件封装模板

    //插件编写模板 ;(function ($) { $.fn.plugIn = function ( opt ) { var def = { //这里填写自定义的参数例如: event : 'clic ...

  2. jquery插件简单的声明方法

    (function($){     //  声明插件内容     $.fn.pluginName = function(options){         //  默认插件配置         var ...

  3. table切换jquery插件 jQuery插件写法模板 流程

    通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法 通过$.widget()应用jQuery UI的部件工厂方式创建 通过$.extend()来扩展jQuery $. ...

  4. python 全栈开发,Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

    一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...

  5. jquery 插件和后台模板搜集

    弹框 alert confirmhttp://www.jq22.com/jquery-info2607 jQuery表格排序筛选插件http://www.jq22.com/jquery-info880 ...

  6. 一个简单的消息提示jquery插件

    最近在工作中写了一个jquery插件,效果如下: 就是一个简单的提示消息的一个东西,支持最大化.最小化.关闭.自定义速度.自定义点击事件,数据有ajax请求和本地数据两种形式.还有不完善的地方,只做了 ...

  7. 推荐两款简单好用的图片放大jquery插件

    一.zoomfiy.js 推荐可以从这里下载 使用说明: 使用该jquery 插件引入该插件的js:zoomfiy.js 或 min引入该插件的css:zoomfiy.css 或 min前后顺序都可j ...

  8. jquery 提示简单效果插件 cluetip

    介绍一个不错的jquery插件-cluetip 我们在做web项目的时候,经常会使用到提示效果.html自带的提示效果是label标签的title,但是这个效果过于简单和难看,并且不方便调整样式. 今 ...

  9. 编写一个简单的Jquery插件

    1.实现内容 定义一个简单的jquery插件,alert传递进来的参数 2.插件js文件(jquery.showplugin.js) (function ($) { //定义插件中的方法 var me ...

随机推荐

  1. WP7系统托盘和应用程序栏

    (一)系统托盘和应用程序栏系统托盘(1)显示系统级别的状态信息(2)Apps能隐藏和显示系统托盘Micosoft.Phone.Shell.SystemTray.IsVisible=true;应用程序栏 ...

  2. Struts2+Spring+Hibernate(SSH)框架的搭建

    首先需要下载struts2 ,spring4,hibernate5  的资源包; struts2资源包下载路径:http://www.apache.org/spring资源包下载路径:http://p ...

  3. oracle ORA-12514: TNS: no listener 解决方案

    服务端:oracle 11g 客户端: pl/sql 问题描述: 用客户端 pl/sql 连接登录的时候,提示 "ORA-12514: TNS: no listener". 在服务 ...

  4. 我的ORM之三 -- 更新

    我的ORM索引 更新语法 var 影响行数 = dbr.表.Update(实体).Where(条件).Execute(); 实体类型: 更新的实体类型和添加的实体类型一样,有三类: 1. 任何C#类. ...

  5. Sensor(ACCELEROMETER)

    package com.example.sensor01; import java.util.List; import android.hardware.Sensor; import android. ...

  6. 【面试必备】CSS盒模型的点点滴滴

    从接触CSS布局开始,就一直在听盒模型的概念了,网上的文章有很多,深浅不一.有些人会认为盒模型很简单,不就是border.margin.padding.content嘛,一个元素所占的空间就是把它们都 ...

  7. Unity3D热更新全书-脚本(二) 两级分化

    上篇明确了我们探讨的脚本是什么:是写在文本文件里面的代码,可以作为资源加载,取得字符串再执行. 可是为什么世界上会有那么多的脚本?而其使用方法完全看起来不一样呢?这是因为每种脚本都有自己的定位,在不同 ...

  8. 据说每个大牛、小牛都应该有自己的库——JavaScript原生对象拓展

    在据说每个大牛.小牛都应该有自己的库——框架篇中我扬言要做个小牛,没想到一天没更新,小伙儿伴们就戏谑的问我,油哥是不是要太监了?其实事情是这个样子的,这不是太监的节奏,一是,关于写个自己的库的想法由来 ...

  9. Open Source Cassandra Gitbook for Developer

    Just released an open source Cassandra Gitbook for developer. http://teddymaef.github.io/learncassan ...

  10. IOS 多线程01-线程基础知识

    大部分现代操作系统,包括IOS,都支持执行线程的概念.每个进程可以包含多个线程,他们可以同时运行.如果只有一个处理器核心,操作系统将在所有执行线程之间切换,非常类似于在所有执行线程之间切换.如果拥有多 ...