使用Per.js快速開發商品信息頁面

時間 2019-11-13

原文原文鏈接

在此，咱們將會使用Per.js來快速開發一個商品的信息頁面。javascript

首先，先把基礎文件和文件夾建立好：html

以後，咱們在index.html裏面把基本結構寫好：java

<!DOCTYPE html>
<html>
    <head>
        <title>商品信息頁面</title>
        <meta charset="UTF-8">
    </head>
    <body>
        
        <script src="js/Per.js"></script>
        <script>
            
        </script>
    </body>
</html>

寫好了基本結構以後，咱們在根目錄下面建立一個名爲JSON的文件夾。ajax

而後，咱們在JSON文件夾裏面新建2個json文件，名爲item1和item2。json

而後在item1.json裏面寫入這些商品信息：瀏覽器

{
    "name": "apple",
    "price": 2,
    "imgURL": "img/apple.jpg"
}

在item2.json裏面寫入這些：app

{
    "name": "banana",
    "price": 3,
    "imgURL": "img/banana.jpg"
}

而後，咱們在index.html文件裏面的body標籤裏面寫入2對div標籤，id爲page1和page2。函數

<div id="page1"></div>
<div id="page2"></div>

寫完了以後，咱們分別在2個div裏面寫上一對ul。code

<div id="page1">
    <ul></ul>
</div>
<div id="page2">
    <ul></ul>
</div>

而後，咱們在script標籤裏面寫入下列代碼：htm

Per().use(["Per.ajax","Per.page"]);
var allJSONLoadCount = 0;
var item1JSON;
var item2JSON;
Per().ajax("GET","JSON/item1.json","",true,function(val){
    item1JSON = JSON.parse(val);
    allJSONLoadCount++;
    loadComplete();
});
Per().ajax("GET","JSON/item2.json","",true,function(val){
    item2JSON = JSON.parse(val);
    allJSONLoadCount++;
    loadComplete();
});

這些代碼的意思是，使用Per.ajax和Per.page模塊，並用Per.ajax模塊的ajax方法分別加載item1和item2文件，並調用一個函數叫loadComplete。

以後，咱們把loadComplete函數添上：

function loadComplete(){
    if(allJSONLoadCount == 2){
        Per().page().create.pageGroup("item");
        Per().page().create.page("item","#page1");
        Per().page().create.page("item","#page2");
        Per("#page1").do({
            for: [item1JSON]
        });
        Per("#page2").do({
            for: [item2JSON]
        });
    }
}

再而後，咱們在id爲page1的div裏面添加一個參數，爲p-for-in，把它的值設置爲var，並在page2裏面也添加一個，而後再在這兩個div裏面添加一個參數，爲p-html，值隨便

<div id="page1" p-html p-for-in="var">
    <ul></ul>
</div>
<div id="page2" p-html p-for-in="var">
    <ul></ul>
</div>

而後，咱們分別在兩個div裏面的ul標籤中間添加這樣一段內容：

<li>{{var.name}}</li>
<li>價格：{{var.price}}</li>
<li><img src="{{var.imgURL}}" height="50px"></li>

以後，咱們打開瀏覽器，會發現這些都已經顯示出來了：

以後，咱們再在id爲page2的div的下面寫上2對button標籤，裏面分別寫上「第一頁」和「第二頁」，並將它們的id分別設置爲"toPage1"和"toPage2"。

寫完了以後，咱們再script標籤裏面寫上這樣一段代碼：

Per("#toPage1").do({
    click: function(){
        Per().page().to("item",1);
    }
})
Per("#toPage2").do({
    click: function(){
        Per().page().to("item",2);
    }
})

而後咱們再回到body標籤裏面，在page2這個div裏面添加一個style參數，把他的display設置爲none。

而後，打開瀏覽器，咱們會發現已經能夠自如的切換了！

所有代碼：

<!DOCTYPE html>
<html>
    <head>
        <title>商品信息頁面</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <div id="page1" p-html p-for-in="var">
            <ul>
                <li>{{var.name}}</li>
                <li>價格：{{var.price}}</li>
                <li><img src="{{var.imgURL}}" height="50px"></li>
            </ul>
        </div>
        <div style="display: none" id="page2" p-html p-for-in="var">
            <ul>
                <li>{{var.name}}</li>
                <li>價格：{{var.price}}</li>
                <li><img src="{{var.imgURL}}" height="50px"></li>
            </ul>
        </div>
        <button id="toPage1">第一頁</button>
        <button id="toPage2">第二頁</button>
        <script src="js/Per.js"></script>
        <script>
            Per().use(["Per.ajax","Per.page"]);
            var allJSONLoadCount = 0;
            var item1JSON;
            var item2JSON;
            Per().ajax("GET","JSON/item1.json","",true,function(val){
                item1JSON = JSON.parse(val);
                allJSONLoadCount++;
                loadComplete();
            });
            Per().ajax("GET","JSON/item2.json","",true,function(val){
                item2JSON = JSON.parse(val);
                allJSONLoadCount++;
                loadComplete();
            });
            function loadComplete(){
                if(allJSONLoadCount == 2){
                    Per().page().create.pageGroup("item");
                    Per().page().create.page("item","#page1");
                    Per().page().create.page("item","#page2");
                    Per("#page1").do({
                        for: [item1JSON]
                    });
                    Per("#page2").do({
                        for: [item2JSON]
                    });
                }
            }
            Per("#toPage1").do({
                click: function(){
                    Per().page().to("item",1);
                }
            })
            Per("#toPage2").do({
                click: function(){
                    Per().page().to("item",2);
                }
            })
        </script>
    </body>
</html>