欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

大家都應該上過淘寶的吧，沒有上過淘寶的同學估計也沒幾個了，但是我相信大多數(shù)的人都是在淘寶上面買完東西就下線，很少有人會關注淘寶上的設計這類的，但是對于普通人這樣還行，但是對于一個程序員這樣就可不行了，因為博主本人是從事前端方面的工作，所以就通過仿照淘寶的設計樣式，以求在技能上面能夠有一個大的突破

一、淘寶分頁控件了解

先上一張?zhí)詫毜姆猪搱D片：

根據(jù)上圖中對淘寶分頁控件的分析，我們大致上可以將淘寶分頁控件分成兩部分，一部分是核心部分，這一部分主要就是一個分頁的核心功能，這個功能同時也是也是不可或缺的，還有一部分是拓展部分，這一部分是相當于增加一些功能來增強和改善用戶體驗的，但是在很多現(xiàn)成的分頁控件是沒有實現(xiàn)的(這個也是一個自己造輪子的理由之一)。但是依據(jù)我對淘寶分頁控件的理解再結(jié)合工作上面的需求分析，我認為淘寶的分頁控件要改成具有普適性的業(yè)務功能控件還需要有這些改動：

1、比如拓展部分感覺比較偏小了一點，以我個人的體驗上來說不是挺好

2、由于淘寶的寶貝比較多，所以只需要顯示到一百頁就行了，但是在實際的項目中我們可能沒有100頁，所以我們需要顯示到最后一頁的頁數(shù)就行了

3、由于拓展部分不是必須的，只是可以增強用戶體驗，但是有些時候頁面給分頁預留的位置不夠，這個時候我們就可以通過設置來除去這一部分

二、基于bootstrap的仿淘寶分頁控件輸入?yún)?shù)設定

想一想，對于普通的分頁控件，我們需要什么元素：pageNo(當前頁)，pageSize(每頁渲染個數(shù))，count(總數(shù)),這幾個控件是必不可少的，pageNo主要是用來標識要渲染第幾頁為當前頁，pageSize和count主要是用來計算出要渲染的頁數(shù)(pageCount)，pageCount的實現(xiàn)邏輯如下：

var pageCount=0;
if(count%pageSize==0){
    pageCount=count/pageSize;
}esle{
    pageCount=count/pageSize+1;
}

這樣我們就能保證了pageCount為我們所要渲染的最終的頁數(shù)，除了這個基礎配置還有一些其他的配置我認為也是需要增加的

1、增加對最后一個確定按鈕的名稱修改，這個可能在我們的業(yè)務中不叫確定而叫修改之類的名稱，所以如果有一個可以修改的功能，那么也方便了業(yè)務的拓展（default:"確定"）

2、主色調(diào)修改，我們知道像淘寶的分頁控件采用的是橙黃色的主色調(diào)，然后如果是按照經(jīng)典的bootstrap的配色方案來看，是采用淺藍色的，所以這個也要支持修改(default:lightblue)

3、支持showNum的配置，showNum指的是當pageNo=1的時候要顯示的頁數(shù)，例如淘寶的分頁控件顯示的是1到5頁外加一個省略號。所以showNum=5，表示顯示5頁;(default:6)

4、支持skipPart，這一部分指的就是分頁控件的拓展部分，這部分我們應該要按照需求來決定是否顯示（default:true）

 * 括號內(nèi)為參數(shù)的默認值

三、基于bootstrap仿淘寶插件設計思路

 根據(jù)對淘寶網(wǎng)站的觀察，以及對對其設計上面的思考，我認為大致上的插件設計思路如下：

第一步，接收用戶的傳入?yún)?shù)

第二步，將用戶的部分傳入?yún)?shù)傳遞給一個分頁算法，然后通過分頁算法將一些最終要渲染的結(jié)果通過JSON的形式返回出來

第三步，對JSON數(shù)據(jù)進行渲染使其最終生成分頁控件

這樣的設計主要是符合軟件工程的高內(nèi)聚、低耦合的設計思想，通過這個設計即使分頁算法的實現(xiàn)相對的困難，但是我們卻把分頁的渲染與算法的實現(xiàn)分離開來，有利于后期功能的拓展，提高了組件的可維護性。

四、分頁算法的設計

 其實這一塊的分頁算法頁說不上設計，純粹的就是模仿吧，模范淘寶的分頁規(guī)則，在默認的情況下，我們會分成這樣的四種情況(以淘寶為例)

1、pageNo為1-5頁的時候，將pageNo的當前頁改變?yōu)辄c擊的頁數(shù)

2、當pageNo為6,7頁的時候，增加渲染1到當前頁+1，例如選的是6頁的話，那么我們就渲染1~7頁

3、接著我們判斷pageNo是否大于等于pageCount(當前頁)-showNum，如果是的話，也就是說明到了最后的那幾頁了，那么我們這個時候就要直接渲染最后的showNum頁，并把pageNo點亮

4、最后的一種情況：除了上面提到的這些情況，剩下的我們都是通過渲染pageNo的前2頁和pagNo的后兩頁，還有就是渲染第一頁和第二頁。

接下來就來分享一下我在分頁算法上面的設計：

//分頁算法邏輯，主要對分頁進行邏輯運算，不做渲染，返回值為JSON
        function PageAlgorithm(pageNo,pageSize,count,showNum){
            var data="";
            if(pageNo==1){
                data='{"algorithm":[{"text":"上一頁","num":0,"status":"disabled"}';
            }else{
                data='{"algorithm":[{"text":"上一頁","num":"'+(pageNo-1)+'","status":"abled"}';
            }
            //判斷分頁類型
            if(count>showNum){
                if(pageNo<=showNum+2){
                    //判斷pageNo是否在要初始化顯示的頁碼內(nèi)
                    if(pageNo<=showNum){
                        for(var i=1;i<=showNum;i++){
                            if(pageNo==i){
                                data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}';
                                
                            }else{
                                data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}';
                            }    
                        }
                        if(pageNo==showNum){
                            data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}';
                        }
                    }else{
                        for(var i=1;i<=pageNo;i++){


                            if(i==pageNo){
                                data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}';
                            }else{
                                data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}';
                            }
                        }
                        if(pageNo!=count){
                            data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}';
                        }
                    }
                    //選中最后一頁時，將省略號隱藏
                    if(pageNo!=count){
                        if(pageNo!=(count-1)){
                            data+=',{"text":"…","num":"more","status":""}';
                        }
                        
                    }
                    
                }else if(pageNo>count-showNum){
                    data+=',{"text":"1","num":"1","status":"abled"}';
                    data+=',{"text":"2","num":"2","status":"abled"}';
                    data+=',{"text":"…","num":"more","status":"disabled"}';
                    for(var i=count-showNum+1;i<=count;i++){
                        if(pageNo==i){
                            data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}';
                        }else{
                            data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}';
                        }
                    }
                }
                else{
                    data+=',{"text":"1","num":"1","status":"abled"}';
                    data+=',{"text":"2","num":"2","status":"abled"}';
                    data+=',{"text":"…","num":"more","status":"disabled"}';
                    for(var i=pageNo-2;i<=pageNo+2;i++){
                        if(i==pageNo){
                            data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}';
                        }else{
                            data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}';
                        }
                    }
                    data+=',{"text":"…","num":"more","status":"disabled"}';
                }
            }else{                
                for(var i=1;i<=count;i++){
                    if(pageNo==i){
                        data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}';
                    }else{
                        data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}';
                    }


                }
                
            }
            if(pageNo==count){
                data+=',{"text":"下一頁","num":"'+(pageNo+1)+'","status":"disabled"}]}';
            }else{
                data+=',{"text":"下一頁","num":"'+(pageNo+1)+'","status":"abled"}]}';
            }
            var json_return = JSON.parse(data);
            return json_return;


        }

注：不必關注里面的JSON最終要呈現(xiàn)的格式，主要的原因是這些參數(shù)最終是要傳遞到下一個方法中去渲染分頁控件，而這些相當于是在兩個方法中約定的，我們主要要關注的是怎樣對分頁控件進行類型上的區(qū)別，從而渲染出不同的JSON數(shù)據(jù)

五、jPage.js插件說明

 這一款插件就是本次教程的一個最終的產(chǎn)物，這一款插件在實現(xiàn)方案上面是仿照淘寶的邏輯，但是由于公司的主營業(yè)務與淘寶的業(yè)務上面有些區(qū)別，所以樣式風格不太一致。但是也是能夠很好的滿足一般業(yè)務上面常見的需求。

具體怎么使用，我們來舉個例子

我們要得到這樣的一個分頁控件，總數(shù)據(jù)為70條，每頁顯示3條數(shù)據(jù)，并且要顯示拓展部分，我們只需要如下這樣去調(diào)用就行了。 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
</head>
<body>
    <div id="test"></div>
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
    <script type="text/javascript" src="jPage.js"></script>
    <script type="text/javascript">
        $("#test").page({count:70,pageSize:3,skipPart:true});
        
    </script>
</body>
</html>

最終的效果如下：

下載地址

轉(zhuǎn)自https://www.cnblogs.com/st-leslie/p/6029804.html 作者熱衷理財?shù)募夹g(shù)渣渣