成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

jQuery返回定位插件的詳細(xì)介紹

本篇內(nèi)容介紹了“jQuery返回定位插件的詳細(xì)介紹”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

成都創(chuàng)新互聯(lián)成立于2013年，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元蓮花做網(wǎng)站,已為上家服務(wù),為蓮花各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220

一、jQuery 提供開發(fā)者開發(fā)插件的幾種模式

1.$.extend();    //這個(gè)方法是綁定在$上面的?？梢酝ㄟ^$直接調(diào)用

2.$.fn.方法名     //這個(gè)方法是綁定在Dom對(duì)象上面的可以通過$('').方法名();調(diào)用

3.$.widget   //通過jQuery UI 部件工廠模式創(chuàng)建。

二、插件的開發(fā)過程

1.$.extend();

這個(gè)方法其實(shí)很簡(jiǎn)單，只是像$上面添加了一個(gè)靜態(tài)的方法而已。主要用途是對(duì)插件api的擴(kuò)展.

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();對(duì)jQuery方法進(jìn)行拓展，
   其實(shí)和直接綁定到$上是一樣的效果*/

2.$.fn.方法名。   (方法名 其實(shí)就是插件名)。

a.插件結(jié)構(gòu)

<div id="app">app</div>
//$.fn.插件名字 (logText);
  (function($,factory){

    $.fn.logText = factory();
  })(jQuery,function(){
    var logText = function(){
      console.log(this.text());
      return this;
    }
    return logText;
  });
　　$("#app").logText(); //app  通過DOM元素之間調(diào)用該方法。并返回該對(duì)象。這也是jQuery實(shí)現(xiàn)鏈?zhǔn)讲僮鞯募记伞?
  var h = $("#app").logText().height(); // app
  console.log(h); //18
 //這樣就可以自定義方法了。

在jQuery插件的開發(fā)過程中，其實(shí)主要是通過第二種模式($.fn.插件名)開發(fā)的。因?yàn)閖Query的強(qiáng)大之處就是對(duì)Dom的操作.

b.一個(gè)插件的強(qiáng)大之處就是參提供周全的參數(shù)。以及方便使用者對(duì)參數(shù)進(jìn)行擴(kuò)展。

<div id="app">app</div>
   //$.fn.插件名字 (myPuglin);
  (function(global,$,factory){
    var common = factory(); //封裝插件使用到的函數(shù)。
    $.fn.myPuglin = function(opts){  //插件的名稱
      var defaults = {}; //默認(rèn)的api
      opts = $.extend(defaults,opts || {}); //對(duì)api的拓展
      /*
       *
       * 要執(zhí)行的功能
       * 
       */
      console.log(opts.hello);

      return this;
    }
  })(window,jQuery,function(){
    var common = {
      a(opt){
        return opt;
      },
    };
    return common;
  });
  $("#app").myPuglin({hello:'hello world'}); //hello world

準(zhǔn)備工作已經(jīng)完畢。那么下面會(huì)一個(gè)插件為列子，來講解

3.工作中經(jīng)常用到的列表到詳情。返回來需要保留該位置的插件。(返回定位) 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,
    div,
    dl,
    dt,
    dd,
    ul,
    ol,
    li,
    h2,
    h3,
    h4,
    h5,
    h6,
    h7,
    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>
  <div id="app">
    <ul>
      <li data-page="1" data-url="http://baidu.com?id=1">第一頁 第1個(gè)li</li>
      <li data-page="1" data-url="http://baidu.com?id=2">第一頁 第2個(gè)li</li>
      <li data-page="1" data-url="http://baidu.com?id=3">第一頁 第3個(gè)li</li>
      <li data-page="1" data-url="http://baidu.com?id=4">第一頁 第4個(gè)li</li>
      <li data-page="1" data-url="http://baidu.com?id=5">第一頁 第5個(gè)li</li>
      <li data-page="1" data-url="http://baidu.com?id=6">第一頁 第6個(gè)li</li>
      <li data-page="1" data-url="http://baidu.com?id=7">第一頁 第7個(gè)li</li>
      <li data-page="1" data-url="http://baidu.com?id=8">第一頁 第8個(gè)li</li>
      <li data-page="1" data-url="http://baidu.com?id=9">第一頁 第9個(gè)li</li>
      <li data-page="1" data-url="http://baidu.com?id=10">第一頁 第10個(gè)li</li>
      <li data-page="1" data-url="http://baidu.com?id=11">第一頁 第11個(gè)li</li>
      <li data-page="1" data-url="http://baidu.com?id=12">第一頁 第12個(gè)li</li>
      <li data-page="1" data-url="http://baidu.com?id=13">第一頁 第13個(gè)li</li>
      <li data-page="1" data-url="http://baidu.com?id=14">第一頁 第14個(gè)li</li>
      <li data-page="1" data-url="http://baidu.com?id=15">第一頁 第15個(gè)li</li>

      <li data-page="2" data-url="http://baidu.com?id=16">第二頁 第1個(gè)li</li>
      <li data-page="2" data-url="http://baidu.com?id=17">第二頁 第2個(gè)li</li>
      <li data-page="2" data-url="http://baidu.com?id=18">第二頁 第3個(gè)li</li>
      <li data-page="2" data-url="http://baidu.com?id=19">第二頁 第4個(gè)li</li>
      <li data-page="2" data-url="http://baidu.com?id=20">第二頁 第5個(gè)li</li>
      <li data-page="2" data-url="http://baidu.com?id=21">第二頁 第6個(gè)li</li>
      <li data-page="2" data-url="http://baidu.com?id=22">第二頁 第7個(gè)li</li>
      <li data-page="2" data-url="http://baidu.com?id=23">第二頁 第8個(gè)li</li>
      <li data-page="2" data-url="http://baidu.com?id=24">第二頁 第9個(gè)li</li>
      <li data-page="2" data-url="http://baidu.com?id=25">第二頁 第10個(gè)li</li>
      <li data-page="2" data-url="http://baidu.com?id=26">第二頁 第11個(gè)li</li>
      <li data-page="2" data-url="http://baidu.com?id=27">第二頁 第12個(gè)li</li>
      <li data-page="2" data-url="http://baidu.com?id=28">第二頁 第13個(gè)li</li>
      <li data-page="2" data-url="http://baidu.com?id=29">第二頁 第14個(gè)li</li>
      <li data-page="2" data-url="http://baidu.com?id=30">第二頁 第15個(gè)li</li>
    </ul>
  </div>
</body>
<script type="text/javascript">
  /*
   * 1.為什么我要返回定位呢?？隙ㄊ窃黾佑脩舻捏w驗(yàn)度。比如你剛看的那條信息挺感
   * 興趣的，點(diǎn)進(jìn)詳情看完了，回來一看，不見了，是不是很嘔心啊。
   * 2.難點(diǎn)在哪里？
   *  難點(diǎn)1：當(dāng)我們有很多的列表的時(shí)候，列表肯定是滾動(dòng)加載。于是我們直接保存滾動(dòng)條的位置
   *  的方式可以放棄了。
   *  難點(diǎn)2：我們?cè)趺创_定是從詳情返回來的?
   * 3.我們?cè)撛趺磳?shí)現(xiàn)呢？
   *  其實(shí)我們實(shí)現(xiàn)的方式跟保存滾動(dòng)條的位置差不多。但要對(duì)scrollTop的距離進(jìn)行處理。
   *  a.我們點(diǎn)擊這點(diǎn)詳情的時(shí)候，可視區(qū)域列表的條數(shù)，可以是一頁的數(shù)據(jù)，可能會(huì)是2頁數(shù)據(jù)。
   *  這種情況下我們都要把結(jié)果保留下來。
   *  b.當(dāng)我們點(diǎn)擊這條數(shù)據(jù)的時(shí)候存現(xiàn)當(dāng)前頁滾動(dòng)了多少就可以了。
   *
   *  下面具體看代碼：
   */
  (function(global,$,factory){
    var keepScrollTop = 0; //用于最后保存的滾動(dòng)條的位置
    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),  //滾動(dòng)的容器
        logo:"data-url",   // 用于計(jì)算在這個(gè)容器中的每個(gè)LI中的唯一標(biāo)識(shí)量。一般為去詳情的連接
        currentPage:"data-page",  //點(diǎn)擊當(dāng)前的li的頁碼
        pageResize:30,        //與后臺(tái)交互的每頁返回的數(shù)量。 默認(rèn)是30,
        goToDetailElement:$(".go-detail") ,  //滾動(dòng)的每個(gè)列的總對(duì)象
        nodeLi:"", //元素節(jié)點(diǎn)
        getPageNum:"getPageNum",       //1表示單頁數(shù)據(jù)，2表示雙頁數(shù)據(jù)。設(shè)置是請(qǐng)求單頁數(shù)據(jù)還是雙頁數(shù)據(jù)的標(biāo)識(shí)量。放在URL上。
        urlPageNum:"pageNum",        //用于放到URL上面的參數(shù)標(biāo)識(shí)表示當(dāng)前是幾頁. pageNum = currentPage  //返回來的時(shí)候用這個(gè)參數(shù)來判斷是不是需要滾動(dòng)
      };
      var settings = $.extend(defaults,options || {});
      dataPage = elements.attr(settings.currentPage);  //求出點(diǎn)擊對(duì)象位于哪一個(gè)頁碼
      logo = elements.attr(settings.logo);   //求出當(dāng)前對(duì)象的唯一標(biāo)識(shí)量
      containerHeight = parseInt(settings.container.outerHeight());  //容器的高度
      scrollTopDistance = parseInt(settings.container.scrollTop()); //滾動(dòng)的距離
      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);     //當(dāng)前的頁數(shù)
            tool.changeUrlPar(settings.getPageNum,2);       //獲取雙頁數(shù)據(jù)
            keepScrollTop = scrollTopDistance - prevCountPageDistance;          //請(qǐng)求雙頁數(shù)據(jù) 向上 減 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);    //點(diǎn)擊對(duì)象位于當(dāng)前的頁數(shù)
              tool.changeUrlPar(settings.getPageNum,2);        //請(qǐng)求雙頁數(shù)據(jù)
              keepScrollTop = scrollTopDistance - prevPageScrollDistance;
            }else{
              tool.changeUrlPar(settings.urlPageNum,dataPage);    //點(diǎn)擊對(duì)象位于當(dāng)前的頁數(shù)
              tool.changeUrlPar(settings.getPageNum,1);  //請(qǐng)求單頁數(shù)據(jù)
              keepScrollTop = scrollTopDistance - prevPageScrollDistance;
            };
          };
        };
      });
      tool.setSessionStorage("keepScrollTop",keepScrollTop);   //保存滾動(dòng)條的位置
      return this;
    };
    $.getSessionStorage = function(opt){
      opt = sessionStorage.getItem(opt);
      return opt;
    };
  })(window,jQuery,function(){
    var tool = {
      changeUrlPar(arg, val){  //改變URL參數(shù)
        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
     * 點(diǎn)擊玩了以后url就變成這樣了。這時(shí)候表示 返回來的時(shí)候請(qǐng)求第二頁的數(shù)據(jù)。只請(qǐng)求一次。從第二頁開始
     *
     * 2.http://localhost/index.php/Home/Web?pageNum=1&getPageNum=2
     * 這樣表示請(qǐng)求也數(shù)據(jù)。從第一頁的數(shù)據(jù)開始
     *
     */
    var _herf = $(this).attr("data-url");
    window.location.href = _herf;
  });
  //當(dāng)我們初始化的時(shí)候
  var pageNum = 1,getPageNum = 2; //這兩個(gè)數(shù)的值是從URL中獲取的。只有從詳情返回來 時(shí)候，才有

  if(!!pageNum && !!getPageNum){
    //其中還有很多判定，肯定是先獲取數(shù)據(jù)在滾動(dòng)。。。
    $(window).scrollTop($.getSessionStorage('keepScrollTop'));
  }else{

  }
</script>
</html>

這個(gè)返回定位的插件基本就開發(fā)完畢了。當(dāng)然對(duì)于實(shí)際的項(xiàng)目中，還有很多的改動(dòng)。比如返回的時(shí)候，一定要把設(shè)置的標(biāo)志參數(shù)去掉。

“jQuery返回定位插件的詳細(xì)介紹”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

網(wǎng)頁標(biāo)題：jQuery返回定位插件的詳細(xì)介紹
URL鏈接：http://jinyejixie.com/article12/ppjsgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、品牌網(wǎng)站設(shè)計(jì)、Google、網(wǎng)站內(nèi)鏈、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)