2015年10月1日至10月25日,两个本科生和一位研究生以及一位老师组成四人团队,开发某教育前端项目
所遇问题总结以及分享:
一、主要应用软件:sublime_text HBuilder
初学者可以在JQuery mobile的Demo中寻找代码(可以看图找代码仿写)
1.回退按钮设置: <a href="javascript:history.back(-1);" style="background:none;box-shadow:none;border:none;" data-ajax="false"><img src="img/arrow.png" id="img_arrow"></a>
效果图:
加上style的属性即可,去掉加载图片的背景颜色,前提是PS时将图片设置成透明背景
遇到分隔线的情况:
可以类似,使用两个div去分隔开,比使用margin-top或直接加入图片的方法更为简单
<div class="ui-grid-c" >
<div class="ui-block-a"><span></span>
<br><span >超越全校学生</span></div>
<div class="ui-block-b"><span></span>
<br><span >超越全市学生</span></div>
<div class="ui-block-c"><span ></span>
<br><span></span></div>
<div class="ui-block-d"><span> </span>
<br><span></span></div>
</div>
2.文字缩放问题:</html>之后加上
加上jQuery.fontFlex.js文件
头部加上:
<script src="js/jQuery.fontFlex.js"></script>
</html>之后加上 :
<script type="text/javascript">
$(function() {
// All elements
$('body').fontFlex(10, 18, 30);
$('#img_arrow').fontFlex(10 , 30, 70);
// H1 only
$('h1').fontFlex(15, 40, 60); });
</script>
加上javascript的脚本即可解决文字随浏览器大小自动改变
3.ExamCompare中绘图多次渲染解决方案
网址:
http://www.4byte.cn/question/455962/android-webview-html5-canvas-error.html
4.页面跳转问题加上data-ajax="false"
<a href="javascript:history.back(-1);" style="background:none;box-shadow:none;border:none;" data-ajax="false">
网址:
http://zhidao.baidu.com/link?url=GgSKh384-vVFvUDrL3UlPiL7OmVdLo5rOAQBwiyzabn4WhtogYFoNRHTMbrdcak_qFO6izpYADo5D9_DalxWP7RHy5Qr2Uqbf5mnaB7Lujy
页面跳转时应该加上data-ajax="false",否则计算机上浏览器可以完美返回,到手机端着无法实现返回功能
5.alert在手机中改为无法被识别必须改为confirmJQM
JS文件夹中加入JQuery.Alert.js文件
<head>中加上:
<script src="js/JQuery.Alert.js"></script>
附件为用jquery写的提示框代码,请将此JS文件放入到js文件夹,并在head部分声明引用。
其后即可将每个javascript中出现的alert 替换为confirmJQM即可。
alert只能在计算机中实现,到在手机端中必须将alert改为confirmJQM