面包物语H5+CSS3+jQuery Mobile的订购系统

admin 2022年1月6日00:19:59评论54 views字数 2788阅读9分17秒阅读模式

一个挺简单的纯前端的面包订购系统,此订购系统,不是完全的纯自己写的,大体框架都是书本上的一个订购系统的例子,只是在原有代码的基础上的修修改改。虽不完全是自己写的,但算也是体验了一次把html5打包成apk,在手机上展示的过程。html打包成apk用的是Hbuilder软件,挺方便的的。

附上本次课设的代码和apk以及录屏展示:
链接:https://pan.baidu.com/s/1mmwtazGNdc3nOEWvHITGTQ
提取码:q44y
面包系统界面图:

本来是没有写这篇文章的必要,但是遇到了一些问题,就在这里做做笔记。

不同html文件的页面跳转

第一个主要是关于JQuery Mobile跳转页面后css和js的加载问题。
在JQuery Mobile中,页面跳转时默认使用ajax跳转,而页面跳转时默认使用ajax跳转时,只会把在中也内容加载,而之外的代码及文件则不会加载,以致外的js和css失效。

举个栗子: 从某个页面跳转到下面这个页面 , 下面的page之外css和script将不会被加载。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta>...</meta>
<link>...</link>
<script>...</script>
<style type="text/css">

</style>
</head>
<body>
<div id="#####" data-role="page">

</div>
</body>
</html>

最简单的解决办法:
1.标签中使用data-ajax=”false”来禁用页面默认的ajax跳转或者rel=”external” ,从而使用默认的请来求方法请求页面。
2.另外的办法:我们可以设置一个全局的禁止ajax方式的跳转,代码:

1
2
3
$(document).on("mobileinit",function(){
$.mobile.ajaxEnabled=false;
});

若使用此法,需要将此代码片段放在你引入的JQuery Mobile的js文件之前(初始化的设置都需放入此处)
3.将b页面需要用到的css以及js放在div内(不建议)

同一HTML文件跳转到另一页面问题

举个栗子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
//点击跳转到百度地图api调用的页面 
<script type="text/javascript">


function getmap(longitude,latitude){
$.mobile.changePage($("#second"), {transition: 'pop', role: 'dialog' });
mapdiv=document.getElementById("allmap")
mapdiv.style.width = '500px';
mapdiv.style.height = '500px';
map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(118.089351,24.460571),13);
//map.enableScrollWheelZoom(true);
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.addControl(new BMap.MapTypeControl());
map.clearOverlays();
var new_point = new BMap.Point(longitude,latitude);
var marker = new BMap.Marker(new_point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
map.panTo(new_point);
var opts = {
width : 100, // 信息窗口宽度
height: 50, // 信息窗口高度
title : "Shop is here" // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow("Welcome to you", opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口


}
</script>



// 地图的显示区域
<div id="allmap" style="width=500px;height=500px;" ></div>

按我的理解 id=”allmap”的div都高度和宽度都已经赋值了,为什么还要我mapdiv=document.getElementById("allmap") 重新赋值一下,才会显示地图,我现在还是不太理解。

另外一个栗子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//跳转到支付页面
function getpayment(){
$.mobile.changePage($("#second"), {transition: 'pop' , role: 'dialog'});
mapdiv=document.getElementById("images")
mapdiv.style.width = '360px';
mapdiv.style.height = '363px';
if($("#payment").size()<=0){
var imgHTM="<img src='images/payment.png' id='payment' style='width:360px ;height:360px;'>" ;
$("#images").append(imgHTM);
}


}
//图片的显示区域
<div id="images" ></div>

为什么div的宽和高,还有div中加入一张图片都要js动态赋值和添加才可以显示图片。很疑惑?
感觉还是自己太菜了,才搞不懂,继续努力。

参考文章:
百度地图JavaScript API开发手册:http://lbsyun.baidu.com/index.php?title=jspopular/guide/helloworld
轻松构造APP与引动网站:https://book.douban.com/subject/26330396/
JQuery Mobile跳转页面后css和js失效:https://blog.csdn.net/rosemarrytop/article/details/52770930

FROM :blog.cfyqy.com | Author:cfyqy

  • 左青龙
  • 微信扫一扫
  • weinxin
  • 右白虎
  • 微信扫一扫
  • weinxin
admin
  • 本文由 发表于 2022年1月6日00:19:59
  • 转载请保留本文链接(CN-SEC中文网:感谢原作者辛苦付出):
                   面包物语H5+CSS3+jQuery Mobile的订购系统http://cn-sec.com/archives/720784.html

发表评论

匿名网友 填写信息