杰奇cms官方版实现笔趣阁手机端分页样式

最近在搞杰奇cms仿制一个类似笔趣阁的模板，看到它的手机端的时候，其实就知道这个分页肯定是官方版直接调用无法实现的，但是其实只要思路明确的话，利用js可以很好的实现整个效果。原理就是利用jquery根据class获取到分页的那些参数，然后一个for循环直接加进dom层。还算完美，以下是效果图（手机浏览器进入）：

这个界面是完全抓取的现成的模板，所以css样式也是现成的，就不需要自己再去写了，所以如果以后要把17mb那些的手机端，移植到杰奇的官方程序上，这篇教程是很适用的。

代码如下：

总共分为三个部分，这是全部的代码，不过记得要先引入jquery

<div class="listpage"><span class="left"><a class="before" href="javascript:;">上一页</a></span><span class="middle"><select name="pageselect" id="pageselect" onchange="self.location.href=options[selectedIndex].value">
    </select></span><span class="right"><a href="javascript:;" class="onclick">下一页</a></span></div>
    
    <div id="pageTo" style="display:none;">{?$url_jumppage?}</div>
    <script>
        $(function(){
            var first = parseInt($("#pagelink .first").text());
            var last = parseInt($("#pagelink .last").text());
            var page = parseInt($("#pagelink strong").text());
            var next;
            var prev;
            if(page > 1){
                var prev = $("#pagelink .prev").attr("href");
                $(".listpage .before").attr("href",prev);
            }
            if(page < last){
                var next = $("#pagelink .next").attr("href");
                $(".listpage .onclick").attr("href",next);
            }
            var op = "";
            for(var i = 1; i < last; i++){
                var k = (i-1)*20+1; 
                var j = i*20;
                if(i==page){
                    op += "<option value=\"/book/{?$articleid?}_"+i+"/\" selected=\"selected\">第"+k+" - "+j+"章</option>";
                }else{
                    op += "<option value=\"/book/{?$articleid?}_"+i+"/\">第"+k+" - "+j+"章</option>";
                }
                
            }
            $("#pageselect").html(op);
            //alert(op);
        });
    </script>

1.第一部分是改造原本的分页代码，比如原本的是这样，option标签一路循环下去，上一页下一页也是通过php调用出来的，但是杰奇根本做不到的。

所以，原本的代码就完全精简为如下了：

<div class="listpage"><span class="left"><a class="before" href="javascript:;">上一页</a></span><span class="middle"><select name="pageselect" id="pageselect" onchange="self.location.href=options[selectedIndex].value">
    </select></span><span class="right"><a href="javascript:;" class="onclick">下一页</a></span></div>

这样的意思是，无论是上一页，下一页，还是中间的下拉选项全部都留空了，不给任何值，因为所有的值将交给js处理，让js将杰奇原本的分页代码转进去。

2.放置杰奇的原本分页代码，但是默认隐藏起来。

<div id="pageTo" style="display:none;">{?$url_jumppage?}</div>

这句代码，在实际网页访问中，会输出所有的分页和上一页下一页那些，但是不是按照模板需要格式来的，而且二开也特别麻烦。所以默认隐藏了，不过如果看源代码视图，就会发现它的关键值都是有class的，所以完全能让js来读取。

3.利用js读取原本的分页代码关键词，然后生成html代码，渲染进分页的代码中。

    <script>
        $(function(){
            var first = parseInt($("#pagelink .first").text());
            var last = parseInt($("#pagelink .last").text());
            var page = parseInt($("#pagelink strong").text());
            var next;
            var prev;
            if(page > 1){
                var prev = $("#pagelink .prev").attr("href");
                $(".listpage .before").attr("href",prev);
            }
            if(page < last){
                var next = $("#pagelink .next").attr("href");
                $(".listpage .onclick").attr("href",next);
            }
            var op = "";
            for(var i = 1; i < last; i++){
                var k = (i-1)*20+1; 
                var j = i*20;
                if(i==page){
                    op += "<option value=\"/book/{?$articleid?}_"+i+"/\" selected=\"selected\">第"+k+" - "+j+"章</option>";
                }else{
                    op += "<option value=\"/book/{?$articleid?}_"+i+"/\">第"+k+" - "+j+"章</option>";
                }
                
            }
            $("#pageselect").html(op);
            //alert(op);
        });
    </script>

读取了第一页的数字，最后一页的数字，当前页的数字，并且知道每页输出20个，于是就可以把这些值处理后赋值到分页代码中，而被删除的option标签对，也就由js生成，一起放进select中了。有i和j这两个字段，就是显示多少章到多少章，简单的计算公式就可以实现。

是不是思路一下子就清晰了。