页面伪装异步加载中...
返回首页 mail me! 订阅rss Follow me

秘密小策划

Posted in 网络琐事 @ 2011.09.08 (周四) 10:26 上午 by 一兮

最近在策划着弄一个有意思的东西出来。

嗯，眼尖人估计都能从本站发现到。

229 views With 评论

我在diigo

Posted in 工作记录 @ 2011.08.05 (周五) 4:28 下午 by 一兮

不知不觉在diigo已经快要1年了。

时间过的真快。

Tags: 610 views With 5 条评论

javascript DOMNodeInserted事件

Posted in Chrome, Firefox, javascript @ 2011.07.27 (周三) 3:21 下午 by 一兮

最近一个插件的功能需求，需要在第三方的ajax载入回来的内容中通过contentscript来插入一些我们的内容。

在什么时候去插，这是个很麻烦的问题。

因为要使插入这个动作生效，那在执行插入时，被插入的DOM部分一定是已经load完成的。之前试过第一次插入时，通过setTimeout来循环判断DOM是否已经在页面上，然后在进行插入。这个办法解决的第一次时候能够正常插入，但是在页面不刷新的情况下，又一次ajax载入的内容就不会生效了。

想到了去捕捉ajax完成后的触发某一事件，但好像并没有哪一种方法能够实现，倒是让我发现了 DOMNodeInserted 事件。

DOMNodeInserted 从字面理解比较简单，就是每次页面有DOM插入时都会触发。

运用这个事件，提到的需求就变的简单了，我只要在每次触发这个事件获取到的event.target，判断其DOM内容是否有我将要插入部分的结构特征然后来进行插入就行了。

与这个事件成对的还有一个 DOMNodeRemoved 事件。

有兴趣的话，可以在W3C中查找相关资料。当然这个时间IE是不支持的，在IE下要实现开头提到的需求，估计还是得要用setTimeout来循环监听。

Tags: 672 views With 1 Comments

Jquery中手册未提到的$.event.fix函数

Posted in javascript @ 2011.07.16 (周六) 5:17 下午 by 一兮

接手 Diigo chrome extension的项目后，最近一段时间一直都在熟悉这个项目的代码。

之前那位同事在处理事件绑定的时候用到了

1

var event = $.event.fix(event || window.event);

来处理修正事件。

$.event.fix 这是我以前没有见过的jquery用法，手册中也从未提到这个用法，看这个用法，应该是用来修正事件的。

看了下这段的jquery源码后，大概了解了是这么一个意思。

做前端开发，在调试各个浏览器的童鞋应该知道，各个浏览器对事件处理的方式是不同的，比如说IE下触发事件元素是：event.srcElement，而在firefox下又是 event.target。

而 $.event.fix 的作用就是把浏览器的事件修正为统一的jQuery.Event，这样在不同的浏览器中我们不需要考虑不同的事件触发元素。

当然如果，你如果是通过jquery来绑定DOM的事件，得到的已经是jQuery.Event，就不需要考虑这样的问题。这种一般用在那种写在DOM中的 onclick=”"这类当中。

Tags: 689 views With 4 条评论

用CSS3绘制的Diigo图标

Posted in DIV+CSS Design, 工作记录 @ 2011.07.08 (周五) 3:23 下午 by 一兮

最终效果如图：

diigo的icon比较简单，分析后一个环形+一条竖线。

绘制原理：

通过设置border-radius的值为正方形div的一半来绘制原型，以及使用background线性渐变来绘制背景。

具体实现代码如下：

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

<!-- HTML-->
<div class="back">
        <div class="wai"></div>
        <div class="nei"></div>
        <div class="shu"></div>
</div>
 
<!-- Css -->
<style>
    .back{
        width:100px;
        height:100px;
        background:-webkit-gradient(linear, left top, left bottom, from(rgb(84,185,255)), to(rgb(0,79,180)));
        background:-moz-linear-gradient( top, rgb(84,185,255), rgb(0,79,180));
        border-radius:10px;
        border:1px solid rgb(87,163,221);
        -webkit-box-shadow:inset 0 0 5px rgba(255, 255, 255,1);
        -moz-box-shadow:inset 0 0 5px rgba(255, 255, 255,1);
        position:relative;
    }
    .wai{
        width:64px;
        height:64px;
        background:#fff;
        position:absolute;
        left:18px;
        top:22px;
        border-radius:32px;
    }
    .nei{
        width:44px;
        height:44px;
        background:-webkit-gradient(linear, left top, left bottom, from(rgb(84,185,255)), to(rgb(0,79,180)));
        background:-moz-linear-gradient( top, rgb(84,185,255), rgb(0,79,180));
        border-radius:22px;
        position:absolute;
        left:28px;
        top:32px;
    }
 
    .shu{
        width:10px;
        height:54px;
        background:#fff;
        left:72px;
        top:0px;
        position:absolute;
    }  
</style>

你也可以使用一个支持CSS3的浏览器点击这里查看demo

下次有空试试绘制右边栏那个完整的Diigo Logo

Tags: 689 views With 4 条评论

Page 3 of 341234567...Last »