使用Per.js快速开发商品信息页面
2018-09-12 12:33
567 查看
在此,我们将会使用Per.js来快速开发一个商品的信息页面。
首先,先把基础文件和文件夹创建好:
之后,我们在index.html里面把基本结构写好:
写好了基本结构之后,我们在根目录下面创建一个名为JSON的文件夹。
然后,我们在JSON文件夹里面新建2个json文件,名为item1和item2。
然后在item1.json里面写入这些商品信息:
在item2.json里面写入这些:
然后,我们在index.html文件里面的body标签里面写入2对div标签,id为page1和page2。
写完了之后,我们分别在2个div里面写上一对ul。
然后,我们在script标签里面写入下列代码:
这些代码的意思是,使用Per.ajax和Per.page模块,并用Per.ajax模块的ajax方法分别加载item1和item2文件,并调用一个函数叫loadComplete。
之后,我们把loadComplete函数添上:
再然后,我们在id为page1的div里面添加一个参数,为p-for-in,把它的值设置为var,并在page2里面也添加一个,然后再在这两个div里面添加一个参数,为p-html,值随便
然后,我们分别在两个div里面的ul标签中间添加这样一段内容:
之后,我们打开浏览器,会发现这些都已经显示出来了:
之后,我们再在id为page2的div的下面写上2对button标签,里面分别写上“第一页”和“第二页”,并将它们的id分别设置为"toPage1"和"toPage2"。
写完了之后,我们再script标签里面写上这样一段代码:
然后我们再回到body标签里面,在page2这个div里面添加一个style参数,把他的display设置为none。
然后,打开浏览器,我们会发现已经可以自如的切换了!
全部代码:
首先,先把基础文件和文件夹创建好:
之后,我们在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>
相关文章推荐
- 使用Safe.js绑定联动快速开发用户信息页面
- 使用Safe.js进行快速开发搜索引擎页面实践
- 使用COCOS2D-X JSB开发,在js页面中设置iOS键盘模式
- 使用MVVM框架(avalonJS)进行快速开发
- 基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
- JS模块化开发:使用SeaJs高效构建页面
- android开发基础:Intent与Bundle的使用,实现页面跳转及信息传递
- 使用 video.js 开发 HTML5 视频页面
- 使用Fullpage插件快速开发整屏翻页的页面
- 常用JS调试工具使用方法,帮你快速定位问题(Firebug+ IE“开发人员工具”)
- html+css+angularjs 实现商品库存信息管理页面 可删除/批量删除/可模糊查询/可升序降序
- [工具配置]使用requirejs模块化开发多页面一个入口js的使用方式
- 使用 Grails 快速开发 Web 应用程序--定制页面
- 在企业级应用开发中,使用全局jsp变量为所有jsp页面配置信息
- 使用Vue快速开发单页应用-登录页面
- 基于MVC4+EasyUI的Web开发框架经验总结(16)--使用云打印控件C-Lodop打印页面或套打报关运单信息
- 使用Sencha Designer来快速开发web用户界面 -- 页面布局
- 使用struts 怎么才能在执行完js校验页面的信息,发现不全的情况下,不让页面提交到Action中
- 使用nodejs+livereload页面开发自动刷新
- 使用COCOS2D-X JSB开发,在js页面中设置iOS键盘模式