乐居两年我做过的一些东西—搜索框生成系统

发表于 由
回复

总结两年做过的东西里面，这个搜索框生成系统是我最喜欢的，那时代码还很乱，还很稚嫩，可我喜欢我的设计，喜欢我的理念，可视化设计的理念。

代码中写了很多插件，也成了后来我插件思想的坚实基础，这里面有拖动，有缩放，还有我最喜欢的仿dw的属性框，双击控件就能出来哦，还有彩蛋。。。

由于跟后台关联比较大，这里的demo去掉了很多功能，但不影响。谨此纪念我在乐居的岁月吧。

demo地址：http://www.zhangsuoyong.com/demo/seachboxdesigner/testindex.html


截图：

【PPT】jQuery插件开发

发表于 由
回复

这或许是最后一次技术分享了~ 要开启新的征程了！


jQuery插件开发

View more presentations from zhangsuoyong.
对应代码：

mouseover和mouseout的BUG

发表于 由
4

描述：

javascript的mouseover和mouseout事件，在绑定元素内部有子元素的情况下，

经过绑定元素时会多次触发mouseover和mouseout事件。

原因：

当鼠标经过或离开子元素的时候，浏览器认为这样也触发了mouseover和mouseout事件

例子：

 

 

over:0次
out:0次



解决办法:：

原生javascript：

(修改自jquery)

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

    var handler = document.getElementById("test2");
    handler.onmouseover = function(e){
            if(checkFather(this,e)){
                console.debug("over");
            }
    }
    handler.onmouseout = function(e){
            if(checkFather(this,e)){
                console.debug("out");
            }
    }
    function checkFather(that,e){
        var parent = e.relatedTarget;
         try {
            while ( parent && parent !== that ) {
                parent = parent.parentNode; 
            }
            return (parent !== that);
        } catch(e) { }
    }

效果:

over:0次
out:0次

原理是判断离开的元素（mouseover时）或者进入的元素（mouseout进入的元素）是不是事件绑定对象本身或者子元素

jquery解决办法:

jquery的mouseenter和mouseleave方法已经修复了这个问题，可以直接用来替代mouseover和mouseout

不过有个mouseenter和mouseleave有个小问题是，让鼠标从文档外直接进入绑定事件的元素时，mouseenter不生效

暂时解决办法是，别让绑定事件的元素靠浏览器边缘，尽量留出至少1px间距。


另外，jquery的hover()方法,相当于使用了mouseenter和mouseleave。也能解决mouseover和mouseout的问题。

windows下，靠谱的ANT安装方法

发表于 由
2

我的电脑->属性->高级->环境变量

1、设置JAVA环境变量

JAVA_HOME = C:\Program Files\Java\jdk1.6.0_10

PATH变量应该有，后面加上

 

加完后我的是这样：

PATH = ;%SystemRoot%\system32;%SystemRoot%;
%SystemRoot%\System32\Wbem;%JAVA_HOME%\bin;%JAVA_HOME%\bin;

CLASSPATH也有，我的是这样

CLASSPATH = .\;%JAVA_HOME%\lib\tools.jar;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\jre\lib\rt.jar

2、ANT环境变量设置

 

ANT_HOME = D:\apache_ant_1.7.0

将%ANT_HOME%\bin;%ANT_HOME%\lib;

添加到环境变量的path中。

我的设置是

PATH = ;%SystemRoot%\system32;%SystemRoot%;%SystemRoot%\System32\Wbem;
%JAVA_HOME%\bin;%JAVA_HOME%\bin;%ANT_HOME%\bin;%ANT_HOME%\lib;

设置完成后，关闭所有命令行窗口，新打开命令行，输入ant -version验证是否安装成功

以上设置可解决部分机器输入ant 得到命令语法不正确的情况

微博&家居-多账户切换脚本【油猴脚本】

发表于 由
23

为了油猴（greasemonkey）教学，写了这样一个小脚本，可以在微博(weibo.com)和家居就(jiaju.com)上，方便的切换账户。

一、主要特点

  • 1、可添加任意多账户，点击直接切换
  • 2、数据保存在本地，不会过期、不会丢失

二、特别说明

  • 1、使用环境：firefox
  • 2、需要油猴(greasemonkey)插件,安装方法见下文
  • 3、同步登陆：微博(weibo.com)和家居就(jiaju.com)账户通用，但基于接口特点和使用习惯，同步登陆规则为：在家居就上能同步登陆微博，在微博上不能同步登陆家居就

三、安装方法

油猴安装：
火狐（firefox）浏览器 》 附加组件中搜索”greasemonkey” 》 安装

老版本firefox

新版本firefox

脚本安装：

脚本安装地址：
http://userscripts.org/scripts/show/116547

四、使用方法


五、停用卸载

1、停用油猴：直接点击猴子小图标，猴子变暗即被停用

2、禁用脚本：

lazydom.js一个轻巧的DOM延时加载渲染插件

发表于 由
36

一、插件简介

现在很多网站都在使用DOM延时加载技术，确实能很有效的降低页面压力，提升整个页面的渲染速度，其实原理很简单，把非首屏的内容放在textarea或者注释、javascript字符串或者其他能保证内容不被渲染的地方，监测scroll 、resize、load事件，当即将滚动至待渲染容器时，从textarea或者其他中取出内容，放入容器渲染即可。

项目需要，自己写了个DOM延时渲染插件，特点是轻巧，插件几乎只负责监测页面视口位置，通知哪个容器该渲染，而具体如何渲染的工作交给用户，你可以选择自己喜欢的方式，比如放到textarea里面或者注释里面，至于你用什么方式取出内容，如何放到容器里面，以及内容和容器的关系维护，都由用户来做，本插件不负责。

当然，为了照顾部分用户，插件里面默认加入了textarea的方式，使用方式很简单，如下

?View Code HTML
1
2
3
4
5
6
7
8

<!-- 原HTML结构 -->
<div id="1">id=1的容器</div>
<div id="2">id=2的容器</div>
... 
<!-- 现HTML结构 -->
<div id="1"><textarea>id=1的容器</textarea></div>
<div id="2"><textarea>id=2的容器</textarea></div>
...
?View Code CSS
1
2
3

/* css部分 */
div { height:200px;} /* 外部容器必须固定高度 */
textarea { display:none;}
?View Code JAVASCRIPT
1
2
3
4

// javascript部分
$.lazydom({
    items : $("div")
});

如上配置后，插件默认将以如下方式渲染，用户不必再做配置：

?View Code JAVASCRIPT
1
2
3
4
5
6
7

// 默认渲染方式
function (){
    var textarea = this.children('textarea');
    if(textarea.length>0){
        this.html(textarea.val());
    }
}

当然，更懒一点化，上面 items : $(“div”)  这个也不用写，只要在需要延时加载的容器上加上一个 “lazydom”样式名即可。

二、使用方法

基本使用方式有两种一种扩展到了jquery对象下，适用于根据整个页面滚动判断加载的情况，适用于大部分需求;另一种扩展到了jquery.fn下，用于根据某一容器滚动条判断加载的情况，具体参数配置如下：

?View Code JAVASCRIPT
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

//根据整个页面（window）的滚动判断加载,推荐此方式
$.lazydom({
        items : null,  //需要延时的DOM集合,传入数组或表达式。默认$(".lazydom")
        render : function(){
                var textarea = this.children('textarea');
                if(textarea.length&gt;0){
                    this.html(textarea.val());
                }
            }, //渲染处理 ,默认处理函数为提前item中textarea值
        direction : "y", //方向 x,y,xy，默认y
        delay : 0, //延时响应时间，压力比较大时，可设置scroll时多少时间响应一次
        before : 100 //提前量，即可设置提前多少像素加载
});
 
//在某一容器内根据容器滚动条判断加载，配置同上
$(obj).lazydom({
        items : null,  //需要延时的DOM集合,传入数组或表达式。默认$(".lazydom")
        render : function(){
                var textarea = this.children('textarea');
                if(textarea.length&gt;0){
                    this.html(textarea.val());
                }
            }, //渲染处理 ,默认处理函数为提前item中textarea值
        direction : "y", //方向 x,y,xy，默认y
        delay : 0, //延时响应时间，压力比较大时，可设置scroll时多少时间响应一次
        before : 100 //提前量，即可设置提前多少像素加载
});

特别说明：
1、本插件为了轻巧和大多数项目需求，需要延时渲染的容器必须要在css中固定宽高（目前多数网站只是在首页使用延时加载技术，首页一般各个区域大小都固定），容器不固定宽高的方式笔者正在考虑中，兼容更多需求必然以牺牲轻巧性能为代价。
2、本插件支持横向，纵向，横纵同时三种加载方式，但为适应大多数需求，加载方式均为从上往下，或者从左往右的方式，不支持从下往上和从右往左
3、为提升效率，加载顺序为上述顺序，如果用户传入自定义items集合的化，也请按照从上往下或者从右往左的自然顺序排序
4、如果使用第二种方式，调用对象如果为$(document)或者$(“body”)情况，判断将不准确，此类情况请使用第一种方式

待改进问题：
1、jquery $(window).scrollTop()或者$(document).scrollTop()在IE下值为0，原因是jquery检测页面启用了怪癖模式
这里解决办法没有采用新的获取scrollTop的方法，我是先更改了jQuery.support.boxModel值，取完scrollTop再更改回去,这投机取巧方法肯定有不合理之处，但懒得重新写一个方法，暂时先用着

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10

	if(isWindow && !jQuery.support.boxModel){
	    //hack for jquery $(window).scrollTop() bug in IE
	    jQuery.support.boxModel = true;
	    var obj = {
		top : self.scrollTop()+self.height(),
		left : self.scrollLeft()+self.width()
	    };
	    jQuery.support.boxModel = false;
	    return obj;
        ...

四、实例

实例一：纵向加载


第1个框
第2个框
第3个框
第4个框
第5个框
第6个框
第7个框
第8个框
第9个框
第10个框




代码如下：

?View Code HTML
1
2
3
4
5
6
7
8
9
10
11
12

<div id="ex1">
<div>第1个框<textarea>第1个框已加载</textarea></div>
<div>第2个框<textarea>第2个框已加载</textarea></div>
<div>第3个框<textarea>第3个框已加载</textarea></div>
<div>第4个框<textarea>第4个框已加载</textarea></div>
<div>第5个框<textarea>第5个框已加载</textarea></div>
<div>第6个框<textarea>第6个框已加载</textarea></div>
<div>第7个框<textarea>第7个框已加载</textarea></div>
<div>第8个框<textarea>第8个框已加载</textarea></div>
<div>第9个框<textarea>第9个框已加载</textarea></div>
<div>第10个框<textarea>第10个框已加载</textarea></div>
</div>
?View Code CSS
1
2
3

#ex1 { width:400px;height:300px;overflow:scroll;border:1px solid #ccc; }
#ex1 div { width:398px;height:196px;border:1px solid blue;background-color:#b5b5b5;text-align:center;float:left;}
#ex1 div textarea {display:none;}
?View Code JAVASCRIPT
1

$('#ex1').lazydom({items : $('#ex1>div')});



实例二：横向加载


第1个框
第2个框
第3个框
第4个框
第5个框
第6个框
第7个框
第8个框
第9个框
第10个框




代码如下：

?View Code HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div id="ex2">
<div class="container">
<div>第1个框<textarea>第1个框已加载</textarea></div>
<div>第2个框<textarea>第2个框已加载</textarea></div>
<div>第3个框<textarea>第3个框已加载</textarea></div>
<div>第4个框<textarea>第4个框已加载</textarea></div>
<div>第5个框<textarea>第5个框已加载</textarea></div>
<div>第6个框<textarea>第6个框已加载</textarea></div>
<div>第7个框<textarea>第7个框已加载</textarea></div>
<div>第8个框<textarea>第8个框已加载</textarea></div>
<div>第9个框<textarea>第9个框已加载</textarea></div>
<div>第10个框<textarea>第10个框已加载</textarea></div>
</div>
</div>
?View Code CSS
1
2
3
4

#ex2 {width:398px;height:196px;overflow:scroll;border:1px solid #ccc;}
#ex2 .container { width:4000px;height:200px;overflow:visible; }
#ex2 .container div { width:398px;height:196px;border:1px solid blue;background-color:#b5b5b5;text-align:center;float:left;}
#ex2 .container div textarea {display:none;}
?View Code JAVASCRIPT
1
2
3
4

$('#ex2').lazydom({
    items : $('#ex2>.container>div'),
    direction :'x'
});



实例三，根据整个页面（window）的滚动判断加载

点击查看demo

如果您有建议，欢迎留言