微客导航 » 文章资讯 » jQuery返回定位插件详解

jQuery返回定位插件详解

2024-02-23 19:11:06 277

一、jQuery提供开发者开发插件的几种模式

1.$.extend(); //这个方法是绑定在$上面的。可以通过$直接调用

2.$.fn.方法名 //这个方法是绑定在Dom对象上面的可以通过$('').方法名();调用

3.$.widget //通过jQueryUI部件工厂模式创建。

二、插件的开发过程

1.$.extend();

这个方法其实很简单，只是像$上面添加了一个静态的方法而已。主要用途是对插件api的扩展.

eg:

//$.extend();为了防止，变量和方法之间的相互污染，我们采用闭包的模式。
(function($,factory){
varobj=factory();
$.extend({
sayHelloWorld:obj.firstApply,
})
$.secondApply=obj.secondApply;
})(jQuery,function(){
varobj={
firstApply(){
console.log('helloworld');
},
secondApply(){
console.log('直接绑定到$上');
},
};
returnobj;
});
$.sayHelloWorld();//helloworld
$.secondApply();//直接绑定到$上
/*从上面的2种绑定方式可以看出用$.extend();对jQuery方法进行拓展，
其实和直接绑定到$上是一样的效果*/

2.$.fn.方法名。 (方法名其实就是插件名)。

a.插件结构

app

//$.fn.插件名字(logText); (function($,factory){ $.fn.logText=factory(); })(jQuery,function(){ varlogText=function(){ console.log(this.text()); returnthis; } returnlogText; }); $("#app").logText();//app通过DOM元素之间调用该方法。并返回该对象。这也是jQuery实现链式操作的技巧。 varh=$("#app").logText().height();//app console.log(h);//18 //这样就可以自定义方法了。

在jQuery插件的开发过程中，其实主要是通过第二种模式($.fn.插件名)开发的。因为jQuery的强大之处就是对Dom的操作.

b.一个插件的强大之处就是参提供周全的参数。以及方便使用者对参数进行扩展。

app

//$.fn.插件名字(myPuglin); (function(global,$,factory){ varcommon=factory();//封装插件使用到的函数。 $.fn.myPuglin=function(opts){//插件的名称 vardefaults={};//默认的api opts=$.extend(defaults,opts||{});//对api的拓展 /* * *要执行的功能 * */ console.log(opts.hello); returnthis; } })(window,jQuery,function(){ varcommon={ a(opt){ returnopt; }, }; returncommon; }); $("#app").myPuglin({hello:'helloworld'});//helloworld

准备工作已经完毕。那么下面会一个插件为列子，来讲解

3.工作中经常用到的列表到详情。返回来需要保留该位置的插件。(返回定位)savePositon(); $.fn.savePosition






Title







第一页第1个li
第一页第2个li
第一页第3个li
第一页第4个li
第一页第5个li
第一页第6个li
第一页第7个li
第一页第8个li
第一页第9个li
第一页第10个li
第一页第11个li
第一页第12个li
第一页第13个li
第一页第14个li
第一页第15个li

第二页第1个li
第二页第2个li
第二页第3个li
第二页第4个li
第二页第5个li
第二页第6个li
第二页第7个li
第二页第8个li
第二页第9个li
第二页第10个li
第二页第11个li
第二页第12个li
第二页第13个li
第二页第14个li
第二页第15个li

/* *1.为什么我要返回定位呢。肯定是增加用户的体验度。比如你刚看的那条信息挺感 *兴趣的，点进详情看完了，回来一看，不见了，是不是很呕心啊。 *2.难点在哪里？ *难点1：当我们有很多的列表的时候，列表肯定是滚动加载。于是我们直接保存滚动条的位置 *的方式可以放弃了。 *难点2：我们怎么确定是从详情返回来的? *3.我们该怎么实现呢？ *其实我们实现的方式跟保存滚动条的位置差不多。但要对scrollTop的距离进行处理。 *a.我们点击这点详情的时候，可视区域列表的条数，可以是一页的数据，可能会是2页数据。 *这种情况下我们都要把结果保留下来。 *b.当我们点击这条数据的时候存现当前页滚动了多少就可以了。 * *下面具体看代码： */ (function(global,$,factory){ varkeepScrollTop=0;//用于最后保存的滚动条的位置 vartool=factory(); $.fn.savePosition=function(options){ vardataPage,logo,objLogo,prevNum,containerHeight=0,scrollTopDistance=0,elIndex=0, prevHeight=0,prevCountPage=0,prevCountPageDistance=0,prevDistance=0, prevPageScrollDistance=0; varelements=this; vardefaults={ container:$(window),//滚动的容器 logo:"data-url",//用于计算在这个容器中的每个LI中的唯一标识量。一般为去详情的连接 currentPage:"data-page",//点击当前的li的页码 pageResize:30,//与后台交互的每页返回的数量。默认是30, goToDetailElement:$(".go-detail"),//滚动的每个列的总对象 nodeLi:"",//元素节点 getPageNum:"getPageNum",//1表示单页数据，2表示双页数据。设置是请求单页数据还是双页数据的标识量。放在URL上。 urlPageNum:"pageNum",//用于放到URL上面的参数标识表示当前是几页.pageNum=currentPage//返回来的时候用这个参数来判断是不是需要滚动 }; varsettings=$.extend(defaults,options||{}); dataPage=elements.attr(settings.currentPage);//求出点击对象位于哪一个页码 logo=elements.attr(settings.logo);//求出当前对象的唯一标识量 containerHeight=parseInt(settings.container.outerHeight());//容器的高度 scrollTopDistance=parseInt(settings.container.scrollTop());//滚动的距离 elements.parent().find(""+settings.nodeLi+"["+settings.currentPage+"="+dataPage+"]").each(function(index,obj){ objLogo=$(obj).attr(settings.logo); elIndex=index; if(logo==objLogo){ prevNum=elements.prevAll().length; prevHeight=tool.getDistance(elements.parent().children(),prevNum-elIndex); prevCountPage=parseInt(prevNum/settings.pageResize); if(scrollTopDistance0){ if(index<(prevCountPage-1)*settings.pageResize){ prevCountPageDistance+=parseInt($(target).outerHeight()); }; }; }); tool.changeUrlPar(settings.urlPageNum,dataPage-1);//当前的页数 tool.changeUrlPar(settings.getPageNum,2);//获取双页数据 keepScrollTop=scrollTopDistance-prevCountPageDistance;//请求双页数据向上减1; }else{ prevDistance=tool.getDistance(elements.parent().children(),(prevCountPage+1)*settings.pageResize); prevPageScrollDistance=tool.getDistance(elements.parent().children(),prevCountPage*settings.pageResize); if(prevDistance<(scrollTopDistance+containerHeight)){ tool.changeUrlPar(settings.urlPageNum,dataPage);//点击对象位于当前的页数 tool.changeUrlPar(settings.getPageNum,2);//请求双页数据 keepScrollTop=scrollTopDistance-prevPageScrollDistance; }else{ tool.changeUrlPar(settings.urlPageNum,dataPage);//点击对象位于当前的页数 tool.changeUrlPar(settings.getPageNum,1);//请求单页数据 keepScrollTop=scrollTopDistance-prevPageScrollDistance; }; }; }; }); tool.setSessionStorage("keepScrollTop",keepScrollTop);//保存滚动条的位置 returnthis; }; $.getSessionStorage=function(opt){ opt=sessionStorage.getItem(opt); returnopt; }; })(window,jQuery,function(){ vartool={ changeUrlPar(arg,val){//改变URL参数 functionchangeU(destiny,par,par_value){ varpattern=par+'=([^&]*)'; varreplaceText=par+'='+par_value; if(destiny.match(pattern)) { vartmp='/\\'+par+'=[^&]*/'; tmp=destiny.replace(eval(tmp),replaceText); return(tmp); } else{ if(destiny.match('[\?]')) { returndestiny+'&'+replaceText; } else { returndestiny+'?'+replaceText; } } returndestiny+'\n'+par+'\n'+par_value; } varhash=window.location.hash; history.replaceState(null,'',location.pathname+location.search); url=window.location.href; varnewUrl=changeU(url,arg,val)+hash; history.replaceState(null,'',newUrl); returnfalse; }, removeUrlPar(options){ history.replaceState(null,'',location.pathname+location.search); varnewParamStr=""; varquotes=window.location.href.indexOf("?"); if(quotes!=-1){ varwebUrl=window.location.href.split("?")[0]; varparamsStr=window.location.href.split("?")[1].toString(); if(paramsStr.indexOf("&")!=-1){ varpageIndex=paramsStr.indexOf(options); if(pageIndex!=-1){ varpageArr=paramsStr.split("&"); for(vari=0;i

这个返回定位的插件基本就开发完毕了。当然对于实际的项目中，还有很多的改动。比如返回的时候，一定要把设置的标志参数去掉。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！

返回顶部
3162201930
czq8825@qq.com

jQuery返回定位插件详解

热门推荐

随机推荐