Javascriptで作るFC2ブログのページナビゲーション その2

前回掲載したナビゲーションプログラムのコアの使い方です。
前回の記事はコチラ

1,前回掲載したアドレスを分解するプログラム

(function(){
  /* FC2blogのアドレスを取得、分解、出力するプログラム */
  var fcacore=function(){
    /* .base .prop .page .ext */
    return new fcacore.fp.basurl(window.document.URL);
  };
  fcacore.fp=fcacore.prototype={
    basurl:function(address){
      var
      ourl=address.match(/^(http:\/\/.+?\/)(.*)/);
      this.base=ourl[1];
      this.prop="";
      this.page="";
      this.ext=".html";
      if(ourl[2]){
        this._surl=ourl[2];
        this.pagetype();
      }else{
        this.prop="page-";
        this.page=0;
      };
    },
    pagetype:function(){
      var
      address=this._surl,
      mtc;
      if(/^page-/.test(address)){
        mtc=address.match(/^page-(\d+)/);
        this.prop="page-";
        if(mtc[1]){
          this.page=mtc[1];
        }else{
          this.page=0;
        };
        return 1;
      };
      if(/category/.test(address)){
        mtc=address.match(/category-?(\d+)(?:-(\d+))?/);
        this.prop="category"+mtc[1]+"-";
        if(mtc[2]){
          this.page=mtc[2];
        }else{
          this.page=0;
        };
        return 1;
      };
      if(/^\?/.test(address)){
        this.ext='';
        mtc=address.match(/^(\?.+?=.+)\&page=(\d+)|(\?.+)/);
        if(mtc[3]){
          this.prop=mtc[3]+"&page=";
          this.page=0;
        }else{
          this.prop=mtc[1]+"&page=";
          this.page=mtc[2];
        };
        return 1;
      };
      if(/^blog-date/.test(address)){
        mtc=address.match(/^blog-date-(\d+)(?:-(\d+))?/);
        this.prop="blog-date-"+mtc[1]+"-";
        if(mtc[2]){
          this.page=mtc[2];
        }else{
          this.page=0;
        };
        return 1;
      };
      return 0;
    },
  };
  fcacore.fp.basurl.prototype=fcacore.fp;
  window.fcadress=fcacore;
})();

2,分解したアドレスを元に出力するプログラム

var
pagebangou=function(totalpage){
  var
  totalpage=totalpage;
  if(totalpage>0){
    var
    oyabox=window.document.getElementById("bangouBox"),//スクリプトの親要素を取得
    //アドレスの変換
    fc=fcadress(),
    base=fc.base,
    prop=fc.prop,
    page=fc.page,
    ext=fc.ext,
    showpage=3,
    shiki,
    i=0;
    
    var
    memori;
    for(;i=0&&shiki<=totalpage){
        memori=window.document.createElement("a");
        memori.href=base+prop+shiki+ext;
        memori.appendChild(document.createTextNode(shiki));
        oyabox.appendChild(memori);
        memori=0;
      };
    };
  };
};

3,HTML上に設置するためのタグ


<div id="bangouBox">
<script type="text/javascript">//<!--
pagebangou("<%total_pages>");
//--></script>
</div>

1と2はそのままHTMLのヘッダ内や外部Javascriptに設置してください。
3はHTMLのbody内。ボタンを表示させたい箇所に設置してください。
2の部分を改造することで様々なタイプのボタンを作ることができます。
今回のプログラムは、閲覧中のページ番号を中心に前後3ページが出力されます。前後にページが存在しない場合はスキップされます。

Category: プログラム Tag: JavaScriptナビプログラム

コメント

コメントの投稿

トラックバック