Web 开发 | AlloyTeam

一种简单的实现自定义事件的方法

In 未分类 on 2011年12月09日 by TAT.melody view: 4,085

4

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

var CustomEvent = {

events:{},

dispatchEvent:function(ev,data){

if(this.events[ev]){

var handlers=this.events[ev];

for(var i=0,l=handlers.length;i<l;++i){

try{

handlers[i](data);

}

catch(e){

}

},

addEventListener:function(ev,handler){

if(!this.events[ev]){

this.events[ev]=[handler];

}

else{

this.events[ev].push(handler);

}

},

removeEventListener:function(ev,handler){

if(this.events[ev]){

var handlers=this.events[ev];

for(var i=0,l=handlers.length;i<l;++i){

if(handlers[i]==handler){

handlers.splice(i);

break;

}

ie6 position fixed

In 未分类 on 2011年11月21日 by TAT.melody view: 2,507

0

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Document</title>

<style>

html, body {

margin: 0px;

padding: 0px;

_overflow:hidden;

_height:100%;

}

.lay_topfixed {

width: 100%;

height: 34px;

position: relative;

z-index: 400;

}

.lay_topfixed .lay_topfixed_inner {

left: 0px;

top: 0px;

width: 100%;

position: fixed;

_position: absolute;

background-color:#4B97BD;

color:white;

text-align:center;

height: 34px;

line-height:34px;

}

.container{

_margin-right:15px;

_overflow:auto;

_height:100%;

}

</style>

</head>

<body>

<div class="lay_topfixed_inner"> 哈哈，我一直不动~~ </div>

</div>

adfadfasdf

asdf

a

sdfasdf

sdf

asd

fa

sdf

asd

fa

sdf

asd

fsdf

sdf

as

df

</div>

</body>

</html>

Html5 音乐播放器（一）

In 未分类 on 2011年10月31日 by TAT.pel view: 9,011

1

过去在网页上播放声音一般使用 wmp（windows media player）控件，但是 wmp 控件提供的 js 接口非常有限，更致命的是 IE only。如果不想接受 wmp 的界面，又或者想要跨平台，只能借助于 flash 了。现在 html5 标准已经原生支持音频播放，并且各大浏览器都不同程度地实现了。

关于团队合作的 css 命名规范

In 未分类 on 2011年10月28日 by TAT.sheran view: 38,527

18

关于团队合作的 css 命名规范

常用的 css 命名规则：

头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column

完美实现溢出文本省略

In 未分类 on 2011年10月25日 by TAT.iAzrael view: 8,503

9

文本溢出展示省略号的需求经常都会用到，而对于新式的浏览器，这完全不是问题，因为 css3 里面已经有实现 text-overflow：ellipsis，但是最新 w3c 文档中却移除了这个属性，即使这样，也有不少浏览器实现了这个特性。其浏览器支持情况如下：

1 2	IE Firefox Opera Safari Chrome 6+ - 11.0+ 3.0+ 1.0+

可以看到，只有 firefox 和 opera11 一下的版本不支持这个浏览器，以此也可以放心大胆的用了。但是遇到要求高的产品经理时（╮(╯_╰)╭），就不得不考虑 firefox 等不支持的浏览器了，唯有使用 js 进行字符截断。

比较简单的截断方式就是按字符个数截断，以一个中文宽度等于两个英文宽度为前提，根据给定字符个数进行截取。但是字符在页面显示的时候，其宽度并不是一定的，会根据不同的字体和字体大小的不同而不同，更何况字母 i 和 A 的宽度是不一样的，存在 bug 且不够精确。

判断浏览器是否支持指定 CSS 属性和指定值

In 未分类 on 2011年10月25日 by TAT.iAzrael view: 12,567

10

现在 css3 出来了，添加了许多新特性，但由于并未全部浏览器都实现了这些特性，使用起来不太顺畅。因此，就想在使用的时候进行判断，如果有这个属性并且支持这种值，就 css 实现，否者就用 js 实现。

比较明显的例子就是 text-overflow 这个属性，text-flow：clip 是大部分浏览器都支持的，而 text-flow：ellipsis 则在 firefox 和 10.6 版本以下 opera 上工作不了，让人相当头疼。

废话少说，判断的代码如下：

1

2

3

4

5

6

7

var element = document.createElement('div');

if('textOverflow' in element.style){

element.style['textOverflow'] = 'ellipsis';

return element.style['textOverflow'] === 'ellipsis';

}else{

return false;

}

这个判断的原理是：创建一个节点，判断其的 style 属性是否含有 textOverflow 属性，有则进一步判断是否支持 ellipsis 这个值。

判断是否支持 ellipsis 值依靠的是浏览器对于非法 style 值的处理，当遇到不支持的属性值时，浏览器会直接把这个值抛弃。因此这里就可以先给 textOverflow 赋值 “ellipsis”，如果不支持，则其值肯定为空或者其它不等于 “ellipsis” 的值。因此只要判断赋值后的 textOverflow 是否等于 “ellipsis” 即可。