码迷,mamicode.com
首页 > 移动开发 > 详细

WebApp的前端所遇问题

时间:2015-11-01 01:36:36      阅读:269      评论:0      收藏:0      [点我收藏+]

标签:

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

 

WebApp的前端所遇问题

标签:

原文地址:http://www.cnblogs.com/boycelee/p/4926588.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!