doc_template
/
index.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>bluemark.js</title>
  <link href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
  <link href="http://cdn.bootcss.com/prism/9000.0.1/themes/prism.min.css" rel="stylesheet">
  <link href="http://cdn.bootcss.com/prism/1.1.0/themes/prism-coy.min.css" rel="stylesheet">
  <script src="http://cdn.bootcss.com/vue/1.0.24/vue.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
  <script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
  <script src="http://cdn.bootcss.com/prism/9000.0.1/prism.min.js"></script>
  <script src="http://cdn.bootcss.com/prism/1.1.0/components/prism-javascript.min.js"></script>
  <style>
    .ul_menu a{
      color:#AAA;
      padding:5px 20px 5px 2px;
    }
    .ul_menu a.active,.ul_menu a:hover{
      color:#000;
      text-decoration: none;
      border-bottom: #000 solid 2px;
    }
    .ul_menu>li>a{
      color:#000;
      font-size: 20px;
    }
    .ul_menu{
      list-style: none;
    }
    .ul_menu ul{
      list-style: none;
      padding-left: 20px;
    }
    body{
      background-color: #efefef;
    }
    .container{
      background-color: #fff;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="row row-offcanvas row-offcanvas-right">
      <div class="col-xs-12 col-sm-9" v-html="input | marked">

      </div>
    </div>
  </div>
  <div style="position: fixed;right:100px;top:20px;">
    <ul class="ul_menu">
      <template v-for="ac in tree">
        <li v-on:click="action=ac.value">
          <a href="javascript:void(0);" @click="setHash(ac.value,null)" :class="{active:action==ac.value}">{{ac.text}}</a>
          <ul v-if="action==ac.value" >
            <template v-for="an in ac.children">
              <li>
                <a href="javascript:void(0);" @click="setHash(ac.value,an.value)" :class="{active:anchor==an.value}">
                  {{an.text}}</a>
              </li>
            </template>
          </ul>
        </li>
      </template>
    </div>
</body>
<script>

  var target=[],hash=window.location.hash.substr(1);
  if(hash){
    target=hash.split("/");
  }else{
    window.location.hash="index";
  }
  var vm=new Vue({
    el:"body",
    data:{
      tree:[
        {text:"简介",value:"index"},
        {text:"ajax",value:"ajax",children:[
          {text:"ajaxobjrun",value:"ajaxobjrun"},
          {text:"ajaxobj",value:"ajaxobj"},
          {text:"ajaxfunc",value:"ajaxfunc"},
          {text:"runajax",value:"runajax"},
          {text:"ga",value:"ga"},
          {text:"ajax_s",value:"ajax_s"},
          {text:"AjaxTask",value:"AjaxTask"},
          {text:"AjaxTaskCenter",value:"AjaxTaskCenter"},
          {text:"taskCenter",value:"taskCenter"},
        ]},
        {text:"appAva",value:"appAva",children:[
          {text:"id",value:"id"},
          {text:"towin",value:"towin"},
          {text:"ajaxobj",value:"ajaxobj"},
          {text:"ajaxfunc",value:"ajaxfunc"},
          {text:"runajax",value:"runajax"},
        ]},
        {text:"Class",value:"Class",children:[
          {text:"appCls",value:"appCls"},
          {text:"reloadAllways",value:"reloadAllways"},
          {text:"reFresh",value:"reFresh"},
          {text:"pageGroup",value:"pageGroup"},
          {text:"setBase",value:"setBase"},
          {text:"clearBase",value:"clearBase"},
          {text:"scrolltop",value:"scrolltop"},
          {text:"scrollbottom",value:"scrollbottom"},
          {text:"rootTouch",value:"rootTouch"},
          {text:"tmp_loaded",value:"tmp_loaded"},
          {text:"tmp_rended",value:"tmp_rended"},
          {text:"ajaxload",value:"ajaxload"},
        ]},
        {text:"bluemark",value:"bluemark",children:[
          {text:"reloadAllways",value:"reloadAllways"},
          {text:"reloadAllways",value:"reloadAllways"},
          {text:"reloadAllways",value:"reloadAllways"},
          {text:"reloadAllways",value:"reloadAllways"},
        ]},
        {text:"bluemark.api",value:"bluemark.api",children:[
          {text:"reloadAllways",value:"reloadAllways"},
          {text:"reloadAllways",value:"reloadAllways"},
          {text:"reloadAllways",value:"reloadAllways"},
        ]},
        {text:"bluemark.runner",value:"bluemark.runner",children:[
          {text:"reloadAllways",value:"reloadAllways"},
          {text:"reloadAllways",value:"reloadAllways"},
          {text:"reloadAllways",value:"reloadAllways"},

        ]}
      ],
      action:target[0]||"index",
      anchor:target[1]||"",
      input:""
    },
    methods:{
      setHash:function(anchor,action){
        if(action)
          window.location.hash=anchor+"/"+action;
        else
          window.location.hash=anchor
        Vue.nextTick(function(){
          var node=$("#"+action);
          if(node.length)
            $("body").scrollTop(node.position().top);
          else{
            node=$("#"+anchor);
            if(node.length)
              $("body").scrollTop(node.position().top);
          }
        });
      }
    },
    filters:{
      marked:marked
    },
    watch:{
      action:function(val){
        $.get("doc/"+val+".md",function(text){
          vm.input=text||"";
          Vue.nextTick(function(){
            Prism.highlightAll();
          });
          if(vm.first){
            Vue.nextTick(function(){
              var node=$("#"+vm.anchor);
              if(node.length)
                $("body").scrollTop(node.position().top);
              vm.first=false;
            });
          }
        });
      },
      action:function(action){
        console.log(action);
        window.location.hash=vm.anchor+"/"+action;
      }
    }
  });
  var count=(function(){
    var counts={};
    var re=function(key,max){
      if(key in counts){
        if(counts[key]==max){
          delete counts[key];
          return true;
        }else{
          counts[key]++;
          return false;
        }
      }else{
        counts[key]=1;
        return counts[key]==max;
      }
    };
    re.clear=function(){
      counts={};
    };
    return re;
  })();
  $(window).scroll(function(){
    //页首
    if($("body").scrollTop()==0){
      if(count("top",2)){
        console.log("上一页");
      }
    //页尾
    }else if($("body").scrollTop()+$(window).height()==$("body").height()){
      if(count("bottom",2)){
        console.log("下一页");
      }
    //页中
    }else{
      var target=null;
      $("h3").each(function(){
        if($(this).position().top<=$("body").scrollTop()){
          target=this;
        };
      });
      vm.anchor=$(target).text();
    }
  })
</script>
</html>