WebApp的前端所遇问题

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

转载于:https://www.cnblogs.com/boycelee/p/4926588.html

WebApp的前端所遇问题相关推荐

Framework7特色的HTML框架WebApp开源前端框架
Framework7混合移动前端框架,轻量级.美观中文官网地址: http://framework7.taobao.org/ 简单介绍: Framework7 是一个开源免费的框架可以用来开发混合移 ...
【大前端之前后分离01】JS前端渲染VS服务器端渲染
前言之前看了一篇文章:@Charlie.Zheng Web系统开发构架再思考-前后端的完全分离,文中论述了为何要前后分离,站在前端的角度来看,是很有必要的:但是如何说服团队使用前端渲染方案却是一个现 ...
面试官：2 年招到 18 个前端教你怎么招人
小菜前端从 2017 年 7 月到 2019 年 7 月,历经 2 年,一共招聘到 18 位前端,3 个技术专家,5 个资深,7 个中高级和 3 个校招,成果上看还算不错,但过程无比艰辛,今天就尝试从 ...
Web前端小白了解这些学习秘诀，你也能成为大神！
新手们有一个常见的错误就是犹豫于判断哪种编程语言是做好的.最该先学的.我们有很多的选择,但你不能说那种语言"最好".我们应该理解:说到底,什么语言并不重要.重要的是理解数据结构.控 ...
五分钟体验SpringBoot+Skywalking
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试文章 Skywalking是一个分布式系统的应用程序性能监视工具,专为微 ...
Eclipse+Maven+SpringMVC+Mybatis+MySql搭建总结
安装配置Maven省略新建Maven项目,选择maven-archetype-webapp,填写GroupID和ArtifactID 修改pom.xml <project xmlns=&quo ...
分布式服务追踪与调用链系统
如何构建新一代SkyWalking服务追踪框架 1.生产环境调用接口报错了,如何定位? 2.微服务服务追踪框架构设计原理 3.Sleuth+zipkin实现分布式服务追踪 4.SkyWalking超强 ...
hybrid app、web app与native app工具
1.使用过哪些工具? Webapp:ThinkPHP Mobile(TPM).Ionic Framework.JingleUI Hybridapp:Apicloud.Phonegap(稍了解Hbuil ...
zkdoctor安装部署
zkdoctor是一个ZooKeeper服务的统计.监控报警以及自动化运维平台:监控ZooKeeper集群运行状态,做到有问题及时发现.及时解决,掌握ZooKeeper整体运行情况. 准备环境 jdk ...

WebApp的前端所遇问题

WebApp的前端所遇问题相关推荐

最新文章

热门文章