使用Per.js快速开发商品信息页面
在此，我们将会使用Per.js来快速开发一个商品的信息页面。
首先，先把基础文件和文件夹创建好：
之后，我们在index.html里面把基本结构写好：
<!DOCTYPE html> <html> <head> <title>商品信息页面</title> <meta charset="UTF-8"> </head> <body> <script src="js/Per.js"></script> <script> </script> </body> </html>
写好了基本结构之后，我们在根目录下面创建一个名为JSON的文件夹。
然后，我们在JSON文件夹里面新建2个json文件，名为item1和item2。
然后在item1.json里面写入这些商品信息：
{
"name": "apple",
"price": 2,
"imgURL": "img/apple.jpg"
}在item2.json里面写入这些：
{
"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。
<div id="page1"> <ul></ul> </div> <div id="page2"> <ul></ul> </div>
然后，我们在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();
});这些代码的意思是，使用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> 相关推荐
kentrl 2020-11-10
结束数据方法的参数，该如何定义？-- 集合为自定义实体类中的结合属性，有几个实体类，改变下标就行了。<input id="add" type="button" value="新增visitor&quo
ajaxyan 2020-11-09
zndy0 2020-11-03
学留痕 2020-09-20
Richardxx 2020-11-09
learningever 2020-09-19
chongxiaocheng 2020-08-16
ajaxhe 2020-08-16
lyqdanang 2020-08-16
curiousL 2020-08-03
TONIYH 2020-07-22
时光如瑾雨微凉 2020-07-19
83510998 2020-07-18
坚持着执着 2020-07-16
jiaguoquan00 2020-07-07
李永毅 2020-07-05
坚持着执着 2020-07-05