jQuery リターン位置決めプラグインのサンプル チュートリアル
本文主要介绍了jQuery返回定位插件的相关知识，具有很好的参考价值。下面跟着小编一起来看下吧，希望能帮助到大家。
一、jQuery 提供开发者开发插件的几种模式
1.$.extend(); //这个方法是绑定在$上面的。可以通过$直接调用
2.$.fn.方法名 //这个方法是绑定在Dom对象上面的可以通过$('').方法名();调用
3.$.widget //通过jQuery UI 部件工厂模式创建。
二、插件的开发过程
1.$.extend();
这个方法其实很简单，只是像$上面添加了一个静态的方法而已。主要用途是对插件api的扩展.
eg:
//$.extend();为了防止，变量和方法之间的相互污染，我们采用闭包的模式。
(function($,factory){
var obj = factory();
$.extend({
sayHelloWorld:obj.firstApply,
})
$.secondApply = obj.secondApply;
})(jQuery,function(){
var obj = {
firstApply(){
console.log('hello world');
},
secondApply(){
console.log('直接绑定到$上');
},
};
return obj;
});
$.sayHelloWorld();//hello world
$.secondApply(); //直接绑定到$上
/*从上面的2种绑定方式可以看出用$.extend();对jQuery方法进行拓展，
其实和直接绑定到$上是一样的效果*/2.$.fn.方法名。 (方法名 其实就是插件名)。
a.插件结构
<p id="app">app</p>
//$.fn.插件名字 (logText);
(function($,factory){
$.fn.logText = factory();
})(jQuery,function(){
var logText = function(){
console.log(this.text());
return this;
}
return logText;
});
$("#app").logText(); //app 通过DOM元素之间调用该方法。并返回该对象。这也是jQuery实现链式操作的技巧。
var h = $("#app").logText().height(); // app
console.log(h); //18
//这样就可以自定义方法了。在jQuery插件的开发过程中，其实主要是通过第二种模式($.fn.插件名)开发的。因为jQuery的强大之处就是对Dom的操作.
b.一个插件的强大之处就是参提供周全的参数。以及方便使用者对参数进行扩展。
<p id="app">app</p>
//$.fn.插件名字 (myPuglin);
(function(global,$,factory){
var common = factory(); //封装插件使用到的函数。
$.fn.myPuglin = function(opts){ //插件的名称
var defaults = {}; //默认的api
opts = $.extend(defaults,opts || {}); //对api的拓展
/*
*
* 要执行的功能
*
*/
console.log(opts.hello);
return this;
}
})(window,jQuery,function(){
var common = {
a(opt){
return opt;
},
};
return common;
});
$("#app").myPuglin({hello:'hello world'}); //hello world准备工作已经完毕。那么下面会一个插件为列子，来讲解
3.工作中经常用到的列表到详情。返回来需要保留该位置的插件。(返回定位) savePositon(); $.fn.savePosition
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>Title</title>
<style>
@media screen and (max-width: 319px) {
html {
font-size: 85.33333px; } }
@media screen and (min-width: 320px) and (max-width: 359px) {
html {
font-size: 85.33333px; } }
@media screen and (min-width: 360px) and (max-width: 374px) {
html {
font-size: 96px; } }
@media screen and (min-width: 375px) and (max-width: 383px) {
html {
font-size: 100px; } }
@media screen and (min-width: 384px) and (max-width: 399px) {
html {
font-size: 102.4px; } }
@media screen and (min-width: 400px) and (max-width: 413px) {
html {
font-size: 106.66667px; } }
@media screen and (min-width: 414px) {
html {
font-size: 110.4px; } }
/*CSS Reset*/
body,
p,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td,
header,
hgroup,
nav,
section,
article,
aside,
footer,
figure,
figcaption,
menu,
button {
margin: 0;
padding: 0; }
li{
list-style: none;
}
#app{
width: 100%;
max-width: 640px;
}
li {
height: 1.2rem;
width: 100%;
border-bottom: 1px solid #cccccc;
text-align: center;
line-height: 1.2rem;
font-size: 20px;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<p id="app">
<ul>
<li data-page="1" data-url="http://baidu.com?id=1">第一页 第1个li</li>
<li data-page="1" data-url="http://baidu.com?id=2">第一页 第2个li</li>
<li data-page="1" data-url="http://baidu.com?id=3">第一页 第3个li</li>
<li data-page="1" data-url="http://baidu.com?id=4">第一页 第4个li</li>
<li data-page="1" data-url="http://baidu.com?id=5">第一页 第5个li</li>
<li data-page="1" data-url="http://baidu.com?id=6">第一页 第6个li</li>
<li data-page="1" data-url="http://baidu.com?id=7">第一页 第7个li</li>
<li data-page="1" data-url="http://baidu.com?id=8">第一页 第8个li</li>
<li data-page="1" data-url="http://baidu.com?id=9">第一页 第9个li</li>
<li data-page="1" data-url="http://baidu.com?id=10">第一页 第10个li</li>
<li data-page="1" data-url="http://baidu.com?id=11">第一页 第11个li</li>
<li data-page="1" data-url="http://baidu.com?id=12">第一页 第12个li</li>
<li data-page="1" data-url="http://baidu.com?id=13">第一页 第13个li</li>
<li data-page="1" data-url="http://baidu.com?id=14">第一页 第14个li</li>
<li data-page="1" data-url="http://baidu.com?id=15">第一页 第15个li</li>
<li data-page="2" data-url="http://baidu.com?id=16">第二页 第1个li</li>
<li data-page="2" data-url="http://baidu.com?id=17">第二页 第2个li</li>
<li data-page="2" data-url="http://baidu.com?id=18">第二页 第3个li</li>
<li data-page="2" data-url="http://baidu.com?id=19">第二页 第4个li</li>
<li data-page="2" data-url="http://baidu.com?id=20">第二页 第5个li</li>
<li data-page="2" data-url="http://baidu.com?id=21">第二页 第6个li</li>
<li data-page="2" data-url="http://baidu.com?id=22">第二页 第7个li</li>
<li data-page="2" data-url="http://baidu.com?id=23">第二页 第8个li</li>
<li data-page="2" data-url="http://baidu.com?id=24">第二页 第9个li</li>
<li data-page="2" data-url="http://baidu.com?id=25">第二页 第10个li</li>
<li data-page="2" data-url="http://baidu.com?id=26">第二页 第11个li</li>
<li data-page="2" data-url="http://baidu.com?id=27">第二页 第12个li</li>
<li data-page="2" data-url="http://baidu.com?id=28">第二页 第13个li</li>
<li data-page="2" data-url="http://baidu.com?id=29">第二页 第14个li</li>
<li data-page="2" data-url="http://baidu.com?id=30">第二页 第15个li</li>
</ul>
</p>
</body>
<script type="text/javascript">
/*
* 1.为什么我要返回定位呢。肯定是增加用户的体验度。比如你刚看的那条信息挺感
* 兴趣的，点进详情看完了，回来一看，不见了，是不是很呕心啊。
* 2.难点在哪里？
* 难点1：当我们有很多的列表的时候，列表肯定是滚动加载。于是我们直接保存滚动条的位置
* 的方式可以放弃了。
* 难点2：我们怎么确定是从详情返回来的?
* 3.我们该怎么实现呢？
* 其实我们实现的方式跟保存滚动条的位置差不多。但要对scrollTop的距离进行处理。
* a.我们点击这点详情的时候，可视区域列表的条数，可以是一页的数据，可能会是2页数据。
* 这种情况下我们都要把结果保留下来。
* b.当我们点击这条数据的时候存现当前页滚动了多少就可以了。
*
* 下面具体看代码：
*/
(function(global,$,factory){
var keepScrollTop = 0; //用于最后保存的滚动条的位置
var tool =factory();
$.fn.savePosition = function(options){
var dataPage,logo,objLogo,prevNum,containerHeight = 0,scrollTopDistance = 0,elIndex = 0,
prevHeight = 0,prevCountPage = 0,prevCountPageDistance = 0,prevDistance = 0,
prevPageScrollDistance = 0;
var elements = this;
var defaults = {
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 //返回来的时候用这个参数来判断是不是需要滚动
};
var settings = $.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(scrollTopDistance < prevHeight){
elements.parent().children().each(function(index,target){
if(prevCountPage > 0 ){
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); //保存滚动条的位置
return this;
};
$.getSessionStorage = function(opt){
opt = sessionStorage.getItem(opt);
return opt;
};
})(window,jQuery,function(){
var tool = {
changeUrlPar(arg, val){ //改变URL参数
function changeU(destiny, par, par_value) {
var pattern = par+'=([^&]*)';
var replaceText = par+'='+par_value;
if (destiny.match(pattern))
{
var tmp = '/\\'+par+'=[^&]*/';
tmp = destiny.replace(eval(tmp), replaceText);
return (tmp);
}
else {
if (destiny.match('[\?]'))
{
return destiny+'&'+ replaceText;
}
else
{
return destiny+'?'+replaceText;
}
}
return destiny+'\n'+par+'\n'+par_value;
}
var hash = window.location.hash;
history.replaceState(null,'',location.pathname+location.search);
url = window.location.href;
var newUrl = changeU(url,arg,val) + hash;
history.replaceState(null,'',newUrl);
return false;
},
removeUrlPar(options){
history.replaceState(null,'',location.pathname+location.search);
var newParamStr = "";
var quotes = window.location.href.indexOf("?");
if(quotes != -1){
var webUrl = window.location.href.split("?")[0];
var paramsStr = window.location.href.split("?")[1].toString();
if(paramsStr.indexOf("&") != -1){
var pageIndex = paramsStr.indexOf(options);
if(pageIndex != -1){
var pageArr = paramsStr.split("&");
for(var i = 0; i < pageArr.length; i++){
if(pageArr[i].match(options)){
pageArr.splice(i,1);
};
};
newParamStr = pageArr.join("&");
}else{
newParamStr = paramsStr;
} ;
}else{
if(paramsStr.match(options)){
newParamStr = "";
}else {
newParamStr = paramsStr;
};
};
history.replaceState(null,'',webUrl + "?" + newParamStr);
}else{
history.replaceState(null,'',w.location.href);
}
},
getDistance(obj,maxNum){
var h = 0;
obj.each(function(index,target){
if(index < maxNum){
h += parseInt($(target).outerHeight());
}
});
return h;
},
setSessionStorage(keyName,opt){
sessionStorage.setItem(keyName,opt);
console.log(opt)
},
}
return tool;
})
$("li").on("click",function(){
$(this).savePosition({pageResize:15});
/*
* 1.http://localhost/index.php/Home/Web?pageNum=2&getPageNum=1
* 点击玩了以后url就变成这样了。这时候表示 返回来的时候请求第二页的数据。只请求一次。从第二页开始
*
* 2.http://localhost/index.php/Home/Web?pageNum=1&getPageNum=2
* 这样表示请求也数据。从第一页的数据开始
*
*/
var _herf = $(this).attr("data-url");
window.location.href = _herf;
});
//当我们初始化的时候
var pageNum = 1,getPageNum = 2; //这两个数的值是从URL中获取的。只有从详情返回来 时候，才有
if(!!pageNum && !!getPageNum){
//其中还有很多判定，肯定是先获取数据在滚动。。。
$(window).scrollTop($.getSessionStorage('keepScrollTop'));
}else{
}
</script>
</html>这个返回定位的插件基本就开发完毕了。当然对于实际的项目中，还有很多的改动。比如返回的时候，一定要把设置的标志参数去掉。
相关推荐：
jQuery scrollFix滚动定位插件_javascript技巧
以上がjQuery リターン位置決めプラグインのサンプル チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7526
15
1378
52
81
11
21
74
Chrome プラグイン拡張機能のインストール ディレクトリとは何ですか?
Mar 08, 2024 am 08:55 AM
Chrome プラグイン拡張機能のインストール ディレクトリとは何ですか?通常の状況では、Chrome プラグイン拡張機能のデフォルトのインストール ディレクトリは次のとおりです。 1. WindowsXP での Chrome プラグインのデフォルトのインストール ディレクトリの場所: C:\DocumentsandSettings\username\LocalSettings\ApplicationData\Google\Chrome\UserData\ Default\Extensions2. Windows7 の chrome プラグインのデフォルトのインストール ディレクトリの場所: C:\Users\username\AppData\Local\Google\Chrome\User
Edge ブラウザがこのプラグインをサポートしない理由に対する 3 つの解決策を共有します
Mar 13, 2024 pm 04:34 PM
ユーザーが Edge ブラウザを使用する場合、より多くのニーズを満たすためにいくつかのプラグインを追加する場合があります。しかし、プラグインを追加すると、このプラグインはサポートされていないと表示されます。この問題を解決するにはどうすればよいですか?今日は編集者が 3 つの解決策を紹介しますので、ぜひ試してみてください。方法 1: 別のブラウザを使用してみてください。方法 2: ブラウザ上の Flash Player が古いか見つからないため、プラグインがサポートされていない可能性があり、公式 Web サイトから最新バージョンをダウンロードできます。方法3：「Ctrl+Shift+Delete」キーを同時に押します。 「データを消去」をクリックしてブラウザを再度開きます。
jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか?
Feb 28, 2024 pm 03:12 PM
jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQuery で PUT リクエストを送信する方法は、他のタイプのリクエストを送信する方法と似ていますが、いくつかの詳細とパラメータ設定に注意する必要があります。 PUT リクエストは通常、データベース内のデータの更新やサーバー上のファイルの更新など、リソースを更新するために使用されます。以下は、jQuery の PUT リクエスト メソッドを使用した具体的なコード例です。まず、jQuery ライブラリ ファイルが含まれていることを確認してから、$.ajax({u
jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する
Feb 28, 2024 pm 09:06 PM
タイトル: jQuery ヒント: ページ上のすべての a タグのテキストをすばやく変更する Web 開発では、ページ上の要素を変更したり操作したりする必要がよくあります。 jQuery を使用する場合、ページ内のすべての a タグのテキスト コンテンツを一度に変更する必要がある場合があります。これにより、時間と労力を節約できます。以下では、jQuery を使用してページ上のすべての a タグのテキストをすばやく変更する方法と、具体的なコード例を紹介します。まず、jQuery ライブラリ ファイルを導入し、次のコードがページに導入されていることを確認する必要があります: <
jQuery を使用してすべての a タグのテキスト コンテンツを変更する
Feb 28, 2024 pm 05:42 PM
タイトル: jQuery を使用して、すべての a タグのテキスト コンテンツを変更します。 jQuery は、DOM 操作を処理するために広く使用されている人気のある JavaScript ライブラリです。 Web 開発では、ページ上のリンク タグ (タグ) のテキスト コンテンツを変更する必要が生じることがよくあります。この記事では、この目標を達成するために jQuery を使用する方法を説明し、具体的なコード例を示します。まず、jQuery ライブラリをページに導入する必要があります。 HTML ファイルに次のコードを追加します。
Google Chrome でアニメーション プラグインを実行できる仕組み
Mar 28, 2024 am 08:01 AM
Google Chrome ではどのようにしてアニメーション プラグインを実行できるようになりますか? Google Chrome は非常に強力です。多くの友人はビデオ アニメーションを見るためにこのブラウザを使用するのが好きです。ただし、さまざまなアニメーション ビデオを見たい場合は、ブラウザにアニメーション プラグインをインストールする必要があります。多くの友人は Google Chrome を使用しています。アニメーションプラグインを入れても動画が見れないのですが、どうすればいいでしょうか？次に、アニメーション プラグインを Google Chrome で実行できるようにするための具体的な手順をエディターに示します。興味のある友人は、見に来てください。 Google Chrome でアニメーション プラグインの実行を許可する具体的な手順: 1. まず、コンピュータで Google Chrome を実行し、ホームページの右上隅にあるメイン メニュー ボタンをクリックします (図を参照)。 2. メイン メニューを開いた後、下の「設定」オプションを選択します (図を参照)。 3. 設定で
Google Chromeプラグインのブロックを解除する方法
Apr 01, 2024 pm 01:41 PM
Google Chrome プラグインのブロックを解除するにはどうすればよいですか? Google Chrome を使用する際、豊富な機能やサービスを提供し、作業効率を向上させるために、さまざまな便利なプラグインをインストールするユーザーは多いですが、一部のユーザーは、Google Chrome にプラグインをインストールすると、プラグインが機能しなくなるという意見を持っています。常に表示されます。がブロックされています。この状況が発生した後、どうすればプラグインのブロックを解除できますか?次に、エディターが Google Chrome のプラグインのブロックを解除する手順を説明します。必要な友達は、見に来てください。 Google Chrome でプラグインのブロックを解除する方法 ステップ 1. ブロックされたプロンプトが表示されたら、「コントロール バー」をクリックし、「ActiveX コントロールのインストール」を選択します。 2. 次に、ブラウザの「ツール」メニューを開き、「インターネット オプション」をクリックします。 3.
jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか?
Feb 29, 2024 am 09:03 AM
jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? jQuery を使用して DOM 要素を操作する場合、要素に特定の属性があるかどうかを判断する必要がある状況がよく発生します。この場合、jQuery が提供するメソッドを使用してこの関数を簡単に実装できます。以下では、jQuery 要素が特定の属性を持つかどうかを判断するために一般的に使用される 2 つの方法を紹介し、具体的なコード例を添付します。方法 1: attr() メソッドと typeof 演算子 // を使用して、要素に特定の属性があるかどうかを判断します
