最近的文章列表

移动端页面问题归总和规避方法(页面高度渲染错误、叠加区高亮、事件无法被触发、:active 效果不兼容)

对于前端开发者来说移动端存在更多的挑战,移动端页面开发过程中会碰到各种各样千奇百怪的问题(我们俗称BUG或坑),那么今天我为大家分享移动端页面开发过程中的一些坑和排坑技巧。

移动端页面在不同设备、不同操作系统 、不同运行环境下都可能造成各种各样的没有碰到过的的坑,相比曾经的IE6坑多了。下面先介绍一下4类具体常见的坑:

1、外观

A、页面高度渲染错误

2015/8/19 Comments:
通过userAgent是否包含MicroMessenger来判断是否在微信内置浏览器打开网页,并提示友好的引导

由于微信的种种封闭,导致在微信内置浏览器打开的页面,会把外部链接全部屏蔽掉.

所以通用的做法是,判断是微信浏览器打开的时候做一种处理方式.

非微信浏览器打开时做另外一种处理方式.

 

类似你想在微信打开页面里点击下载按钮,一定是不成功的.我们会友好的跳出一张引导图.

2015/8/17 Comments:
js实现移动HTML5页面滑动到最底部触发内容加载

今天和大家分享的是 html5 页面下拉到最底部时实现自动刷新加载新数据.

当然,也不一定是html5下适用,web页面都适用.

 

首先要清楚3个定义:

  1. 文档高度

    这是整个页面的高度

  2. 可视窗口高度

    这是你看到的浏览器可视屏幕高度

2015/8/14 Comments:
Angular.js的权威学习资源合集

基础

  1. 官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/
  2. 官方zip下载包 https://github.com/dolymood/angular-packages已增加docs服务,输入地址即可,例如:http://blog.aijc.net/angular-packages/angular-1.3.15/docs/
  3. jquery?ag? : http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background
  4. ag note:https://github.com/joeylin/angular-note
  5. angularjs book:https://github.com/shyamseshadri/angularjs-book
  6. learning-angular:https://github.com/zafarali/learning-angular 以及我的翻译版本(ing)https://github.com/dolymood/learning-angular
  7. angular和require结合方式:https://github.com/tnajdek/angular-requirejs-seed

2015/7/24 Comments:
jQuery event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

这只是一个警告:你的代码仍然有效,但可能不会在今后的工作中使用这个方法,因为它已经过时了。 可以参考这里: relevant source of Chromium 和 corresponding patch.

这个警告已经在 jQuery 1.11 里确认并且修复了。 (可以看 这里 和 这里).

可以做一个兼容处理,如下代码:
if (!event.preventDefault) {
event.preventDefault = function() {
2015/7/18 Comments:
浏览器后退、刷新、关闭相关的js方法:onbeforeunload(阻止页面的更新和关闭)与onunload事件

Onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过 window.onunload来指定或者在<body>里指定。区别在于onbeforeunload在onunload之前执行,它还可 以阻止onunload的执行。

  Onbeforeunload也是在页面刷新或关闭时调用,Onbeforeunload是正要去服务器读 取新的页面时调用,此时还没开始读取;而onunload则已经从服务器上读到了需要加载的新的页面,在即将替换掉当前页面时调用。Onunload是无 法阻止页面的更新和关闭的。而 Onbeforeunload 可以做到。
1、onbeforeunload事件:
  说明:目前三大主流浏览器中firefox和IE都支持onbeforeunload事件,opera尚未支持。
用法:
·object.onbeforeunload = handler 
·<element onbeforeunload = “handler” … ></element> 
2015/6/12 Comments:
最新10个免费的jQuery表格插件(Tabledit、 Datagrid、SlickGrid)

创建一个表格(table)并调整其规模,是一项艰难而繁琐的工作。作为一名开发者,当我向自己的项目中插入表格时,下面这些插件给我提供了很大的帮助。我决定把这些 jQuery 的表格插件分享给你们,使您的表创建体验更加轻松。这些插件不仅可以让工作变得简单,而且对用户十分友好,你不需要掌握核心的知识就能使用。如果您正在做项目,而且需要把表格添加到你的工作中,那么请参考下这些插件,其中可能就有对您有用的。

  jQuery Tabledit

  jQuery Tabledit 是 HTML 表格的 inline 编辑器,兼容 Bootstrap。它可以像电子表格那样编辑 inline,或者用按钮在编辑和视图模式之间进行切换。

2015/6/11 Comments:
获取Body实际高度,设置DIV高度 document.documentElement.clientHeight

获取Body实际高度:document.documentElement.clientHeight

DIV ID名称:divUserContainer

1:设置DIV高度为Body高度

document.getElementById('divUserContainer').style.height = (document.documentElement.clientHeight);

2015/3/13 Comments:
js操作Cookie的常用代码 setCookie、getCookie、delCookie

对于domain 和 path,请注意。只有在相同域下的,相同目录下的cookie,才能操作的。所以,种植cookie时,请注意。

可以直接使用到项目中的代码:

function setCookie(name,value)
{
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
2015/2/22 Comments:
angular scope ng-if(会创建一个子域)与ng-show的区别

angular scope ng-if

问题一:ng-model在ng-if里边 这个model的值不能反应到控制器里。

<div ng-app >
<div ng-controller="main">
Test A: {{testa}}<br />
Test B: {{testb}}<br />
Test C: {{testc}}<br />
<div>
testa (without ng-if): <input type="checkbox" ng-model="testa" />
2015/1/27 Comments: