使用Per.js快速开发商品价格计算页面 - for Per.js3.0
先预览一下全部代码： <!DOCTYPE html> <html> <head> <title>Per.js Demo</title> <meta charset="UTF-8"> </head> <body id="body"> <div id="page1"> <h1>Welcome to use this price calculation!</h1> </div> <div id="page2" style="display: none;"> <ul p-loop-in="var1"> <li>This is {{var1.name}}</li> <li>The price is: {{var1.price}}<span p-con="{{var1.price > 20}}"> - To expensive!</span></li> </ul> </div> <button id="tp1">to page1</button> <button id="tp2">to page2</button> <button id="btn-refre">Refresh</button> <script src="Per.js"></script> <script> Per.use("Per.page"); Per.page.create.pageGroup("allPage"); Per.page.create.page("allPage","#page1"); Per.page.create.page("allPage","#page2"); var app = Per("ul"); app.dom({ loop: [{name: "apple",price: 20},{name: "bread",price: 30},{name: "banana",price: 25}], callback: function(){ Per("span").dom({ con: "in" }); } },true,true); Per("#btn-refre").dom({ info: { item: [{name: "apple",price: 20},{name: "bread",price: 30},{name: "banana",price: 25}] }, click: function(){ this._super.innerHTML = "Refresh now!"; var val = parseInt(Math.random()*30+1); this.item[0].price = val; val = parseInt(Math.random()*30+1); this.item[1].price = val; val = parseInt(Math.random()*30+1); this.item[2].price = val; app.dom.loop = this.item; } }); Per("#tp1").dom({ click: function(){ Per.page.to("allPage",1); } }); Per("#tp2").dom({ click: function(){ Per.page.to("allPage",2); } }); </script> </body> </html> 然后发上一波效果图： 没错，就是这样一个页面，那么接下来我就来教大家如何制作。 先把基本页面格式写好。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Per.js Demo</title> </head> <body> </body> </html> 之后我们使用script标签来引入Per.js文件： <script src="Per.js"></script> <script> </script> 再然后，我们在body标签里面写上基本结构： <div id="page1"> <h1>Welcome to use this price calculation!</h1> </div> <div id="page2" style="display: none;"> <ul p-loop-in="var1"> <li>This is {{var1.name}}</li> <li>The price is: {{var1.price}}<span p-con="{{var1.price > 20}}"> - To expensive!</span></li> </ul> </div> <button id="tp1">to page1</button> <button id="tp2">to page2</button> <button id="btn-refre">Refresh</button> 之后在script标签里面再写js语句： Per.use("Per.page"); Per.page.create.pageGroup("allPage"); Per.page.create.page("allPage","#page1"); Per.page.create.page("allPage","#page2"); var app = Per("ul"); app.dom({ loop: [{name: "apple",price: 20},{name: "bread",price: 30},{name: "banana",price: 25}], callback: function(){ Per("span").dom({ con: "in" }); } },true,true); Per("#btn-refre").dom({ info: { item: [{name: "apple",price: 20},{name: "bread",price: 30},{name: "banana",price: 25}] }, click: function(){ this._super.innerHTML = "Refresh now!"; var val = parseInt(Math.random()*30+1); this.item[0].price = val; val = parseInt(Math.random()*30+1); this.item[1].price = val; val = parseInt(Math.random()*30+1); this.item[2].price = val; app.dom.loop = this.item; } }); Per("#tp1").dom({ click: function(){ Per.page.to("allPage",1); } }); Per("#tp2").dom({ click: function(){ Per.page.to("allPage",2); } }); 之后打开浏览器，就正常执行了！ 效果如同上方gif图一样！ 【tips：必须使用Per.js >= 3.0版本】
