Browsing "前端"
Apr 3, 2014 - javascript, 前端    No Comments

对于移动端浏览器touch事件的研究总结(1)

最基本的4种触摸事件:

  • touchstart : 手指触摸屏幕时触发
  • touchmove : 手指在屏幕上滑动时触发
  • touchend : 手指离开屏幕时触发
  • touchcancel : 系统取消touch事件的时候触发。(例如你在浏览器里玩HTML5的游戏,这个时候你女朋友打电话进来了,就会触发touchcancel事件,游戏的作者就可以在这里做暂停游戏、自动存档等操作)

每个触摸事件都包括了三个触摸列表:

  • touches : 当前位于屏幕上的所有手指动作的列表
  • targetTouches : 位于当前 DOM 元素上的手指动作的列表
  • changedTouches : 涉及当前事件的手指动作的列表。例如,在一个 touchend 事件中,这将是移开手指

Read more »

Mar 13, 2014 - 前端    No Comments

scss2sass

首先必须用gem装好sass,单单装好compass.app可以帮你编辑sass没用的。

$ sudo gem install compass

然后进入到项目文件夹下

Screen Shot 2014-03-13 at 3.50.55 PM

在命令行运行:

sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

scss文件就会被转换成sass的语法格式了

Nov 5, 2013 - javascript    No Comments

Ext.apply详解和实际应用

首先看一下Ext.apply的源码:

Ext.apply = function(o, c, defaults){  
    // no "this" reference for friendly out of scope calls  
    if(defaults){  
        Ext.apply(o, defaults);  
    }  
    if(o && c && typeof c == 'object'){  
        for(var p in c){  
            o[p] = c[p];  
        }  
    }  
    return o;  
};

这是非常经典的对象浅复制的函数。第一个参数o是目标对象,第二个参数c是源对象,第三个是可选参数defaults,表示给目标对象o的一个默认值。整个函数就是会把源对象c和可选参数defaults的所有属性一股脑儿的复制给目标对象c。(如果遇到对象o已有的属性则会覆盖。所以会先把defaults的所有属性都复制给o,然后再把c所有的属性复制给0。)

是不是有点绕,还是来看例子简单明了。
Read more »

Oct 11, 2013 - 前端    No Comments

clearfix的前世今生

在很久很久以前,清除浮动这个问题一直困扰着我。直到我写出这样一行代码。

.auto_height { 
  height:auto !important; 
  height:100%; 
  min-height:0px; 
  overflow:hidden; 
  _overflow:inherit;
}

这行代码兼容ie6,ie7,firefox2,firefox3。那个年代还没有chrome,还没有css3。我还在用着我的iphone1。那是一个兼容ie6是理所当然的年代。

直到有一天,我遇到了drupal6,发现自己的代码虽然管用,但看上去总是那么的土鳖。那个时候clearfix还不叫clearfix,叫clear-block

/*
** Markup free clearing
** Details: http://www.positioniseverything.net/easyclearing.html
*/
.clear-block:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clear-block {
  display: inline-block;
}

/* Hides from IE-mac \*/
* html .clear-block {
  height: 1%;
}
.clear-block {
  display: block;
}
/* End hide from IE-mac */

看看人家的注释多么的高端洋气!
Read more »

May 9, 2013 - 前端    No Comments

用minify合并,压缩js和css

drupal可以把所有

<?php print $styles ?>
<?php print $scripts ?>

输出的css和js都合并压缩成一个文件以减少http request数量,但有时候项目里的某个页面是一个游离于drupal外的静态页面,js和css是不受drupal管理的,那么如果有合并压缩css和js的需求的时候,就需要用到minify
Read more »

Pages:«1234»