学习笔记之初识Jquery插件
发布于 分类 Jquery
20天前 有1个用户阅读过
Jquery的一些插件用得多了,就感觉插件有时候的优势挺明显的,便于扩展和维护以及复用。
想到就去尝试做,所以第一步先从网上了解一些相关的基础知识
JQuery插件开发入门http://www.cnblogs.com/FlyFive/archive/2013/06/19/2961470.html
jQuery插件开发入门
http://www.css88.com/archives/4821
深入理解jQuery插件开发
http://blog.jobbole.com/30550/
jQuery插件原来如此简单——jQuery插件的机制及实战
http://www.cnblogs.com/artwl/archive/2012/02/05/2339315.html
大致阅读后,了解到部分规范,以及类级别,对象级别的概念。似懂非懂的先搞难一点或者说复杂一点的 从对象级别入手。
从这里开始
(function ($) {
$.fn.myPlugin = function () {
//你自己的插件代码
};
})(jQuery);
依葫芦画瓢,先来设置一个标签内的文字颜色和大小,没想到很顺利的就成了。
(function ($) {
$.fn.font = function (options) {
//默认值
var defualts = {
color:"#f00",
size:'14px'
};
//最终值
var opts = $.extend({}, defualts, options);
//对象
var obj = $(this);
obj.css({
'color':opts.color,
'font-size':opts.size
});
};
})(jQuery);
$('#header').font({
color:'blue',
size:'60px'
});
然后再把一个比较常用到的页面滚动时头部置顶的js代码套了一下,也比较顺利。
//原来它是长这样的
/*$(function(){
//获取要定位元素距离浏览器顶部的距离
var navH = $("#header").offset().top;
//alert(navH);
//滚动条事件
$(window).scroll(function(){
//获取滚动条的滑动距离
var scroH = $(this).scrollTop();
//滚动条的滑动距离大于定位元素距离浏览器顶部的距离,就固定,反之就不固定
if(scroH>navH){
$("#header").addClass('fixed');
}else if(scroH<=navH){
$("#header").removeClass('fixed');
}
})
});*/
//改写后,第一种方法
(function ($) {
jQuery.scrollFixed = function (param) {
//获取要定位元素距离浏览器顶部的距离
var navH = $(param).offset().top;
//alert(navH);
//滚动条事件
$(window).scroll(function(){
//获取滚动条的滑动距离
var scroH = $(this).scrollTop();
//滚动条的滑动距离大于定位元素距离浏览器顶部的距离,就固定,反之就不固定
if(scroH>navH){
$(param).addClass('fixed');
}else if(scroH<=navH){
$(param).removeClass('fixed');
}
})
};
})(jQuery);
//用法
//jQuery.scrollFixed('#header'); //改写后,第二种方法
(function ($) {
$.fn.scrollFixed = function () {
var obj = $(this);
//获取要定位元素距离浏览器顶部的距离
var navH = obj.offset().top;
//alert(navH);
//滚动条事件
$(window).scroll(function(){
//获取滚动条的滑动距离
var scroH = $(this).scrollTop();
//滚动条的滑动距离大于定位元素距离浏览器顶部的距离,就固定,反之就不固定
if(scroH>navH){
obj.addClass('fixed');
}else if(scroH<=navH){
obj.removeClass('fixed');
}
})
};
})(jQuery);
//用法
//$('#header').scrollFixed();
DEMO和查看源码:点这里-- The End --