WEB前端开发

前几天网上看到一个Twitter Search的jQuery插件。

比如我们要列出Twitter上的关于“jQuery”的条目我们可以使用：

$(‘#id’).twitterSearch(‘jQuery’);

当然你还可以设置一些参数，比如：

$('#twitter-jQuery').twitterSearch({

term:'jQuery',

title:'jQuery Chatter',

titleLink:'http://www.jquery.com',

birdLink:'http://twitter.com/jquery',

css:{

img: {width: '30px', height: '30px' }

}
});

还可以设置设置一些动画等效果：

$('#twitter3').twitterSearch({
term:   'Butler basketball',
// no fade
animOut: { opacity: 1 },
avatar:  false,
anchors: false,
bird:    false,
colorExterior: '#ddd',
colorInterior: 'white',
pause:   true,
time:    false,
timeout: 2000
});

demo：http://www.css88.com/demo/jquery_twitter/

官方网站：http://jquery.malsup.com/twitter/

js获取可见元素的尺寸还是比较方便的，这个可以直接使用这个方法：

function getDefaultStyle(obj,attribute){ //  返回最终样式函数，兼容IE和DOM，设置参数：元素对象、样式特性
return  obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];
}

具体可以查看：http://www.css88.com/archives/625

但是如果这个元素是隐藏(display:none)的，尺寸又是未知自适应的，哪有上面的方法就不行了！因为display:none的元素是没有物理尺寸的！ 悲剧就这样发生了！

幸好css中还有visibility:hidden，不可见属性，他和display:none最大的区别就是visibility:hidden有物理尺寸。有物理尺寸就可以通过上面的方法获取尺寸，但是将display:none改成visibility:hidden后页面就有一块空白在那里，即使在你获取尺寸后在马上将visibility:hidden改成display:none页面那部分还是会抖动一下。那么最好的办法就是将这个隐藏的元素移出屏幕或者脱离文档流（ position: absolute）。这样似乎非常完美了，但是悲剧又发生了，如果你要再显示这个元素的时侯这个元素是不可见的，位置也不对，因为这是这个元素visibility:hidden;position: absolute。所以在获取尺寸后还要将样式还原回去。就是将position和visibility属性设回原来的样式。 继续阅读：js获取隐藏元素(display:none)的尺寸»

差不多一年没碰jQ了，由于公司现在都用jQ，所以这几天重温了一下jQ，写了一个简单的用户引导效果,写的不好欢迎拍砖。

用户引导效果简单的谁就是将一些重要功能提示给用户，比如你注册到某个网站，第一次进入就将重要的功能或板块高亮提示给你。才疏学浅真不知用文字怎么表达，之间看简陋到不能再简陋的效果吧：

点击查看demo：http://www.css88.com/demo/UGuide/index.html

这个效果可能你也看到过，在163邮箱新注册的会员就有这个效果。

总是想着优化一下这个效果，除了table外我还想到了用border找半透明的遮罩层，这样就只用一个容器了，jq操作方便了许多

点击查看demo：http://www.css88.com/demo/UGuide/index2.html

可惜这个效果在ie8下有bug出现了横向滚动条，在ie6,ie7下更加离谱了（请看第3步和第4步），到现在还没想出解决方案，如果您知道欢迎留言告知，谢谢！

1、Dom Ready

真不知道这个标题该怎么取，暂时就先凑活着用了。

用jQ的人很多人都是这么开始写脚本的：

$(function(){

// do something

});

其实这个就是jq ready()的简写，他等价于：

$(document).ready(function(){
//do something
})
//或者下面这个方法，jQuer的默认参数是：“document”；
$().ready(function(){
//do something
})

这个就是jq ready()的方法就是Dom Ready，他的作用或者意义就是:在DOM加载完成后就可以可以对DOM进行操作。

一般情况先一个页面响应加载的顺序是，域名解析-加载html-加载js和css-加载图片等其他信息。

那么Dom Ready应该在“加载js和css”和“加载图片等其他信息”之间，就可以操作Dom了。

2、Dom Load

用原生的js的时候我们通常用onload时间来做一些事情，比如：

window.onload=function(){
//do something
}
//或者经常用到的图片，假设这个
document.getElementById("imgID").onload=function(){
//do something
}

项目应用：当一项操作完成后，肯能会给某个图片，音乐打分，或者积分增加，平淡的将数值改变用户一点没什么直观的感觉，当然要突出这个加分效果有很多，我这里只是实现了一种：

数字会放大且半透明显示，当放大到最大尺寸时，数值加上分值，然后，数字执行还原的动画，大小透明度均复原。

点此查看demo：http://www.css88.com/demo/awarded_marks/awarded_marks.html

昨天由于项目需要做一个iframe自动撑高的问题，结果碰到一个奇怪的问题，IE，safari，opera浏览器都支持的一个iframe自动撑高js代码，FF却不支持，更加奇怪的是同样的这段js代码，在以前的项目中也一直在用，打开老项目，FF也能运行，这就晕了。翻来覆去搞了几十遍，还是不行，彻底的崩溃，无果后睡觉，今天起来大早又高这个问题，突然想到了会不会是目录结构的问题，奇迹发生了，果然Firefox中iframe的src的目录有问题。

Firefox中iframe的src不能出现“../”向上层目录查找的文件的路径，经过服务器上测试后更加神奇的事情发生了，那就是在服务器上“../”向上层目录查找的文件的路径在FF中能正常执行，OMG。最后的结论是Firefox在本地iframe中的src不能出现“../”向上层目录查找的文件的路径，除非本地建站点。

看第一个demo：http://www.css88.com/demo/iframe/iframe/ff-iframe.html

这个就demo都正常的，但是你可以下载这个demo到本地，在ff中运行一下就知道这段js在不能运行了，firebug也调试不出是什么问题，我这里显示的是红色的乱码。晕翻。

注：该问题仅限这段JS，其他没有测试。

该封装在Liner的基础修改了一些，主要修改的是获取的数据。

接口：
  get, post 常用普通接口。
  e_handler 出错处理句柄，可选。
  _object 创建浏览器兼容XHR的包装。
 
参数：
 @type:        “xml”,”html”,”javascript”,”json”数据类型；
 @url:      请求的响应页面；
 @sdata:  POST的数据；
 @callback: 处理响应数据的回调函数；

 以下参数可选
@fdata:  传递给回调函数的数据，默认null；
@asyn:  是否异步，默认true。
 
返回值：
如果是异步，返回异步请求对象；否则不返回。
 
  回调函数有两个参数：(req, data)
  @req:  异步请求对象（XMLHttpRequest 或 ActiveXObject）
  @data:  传入的附加数据。 继续阅读：一个简易的ajax封装»

在淘宝的列表页上有个列表排序的工具条，这个工具条默认显示是正常的，如图

，当滚动条往下拖动到该工具条的时候，改工具条就会始终固定在浏览器的顶部，就是position:fixed效果。

如图：

在当滚动条往上拖动的时候就会恢复原样，（可能表述不清楚，大家上淘宝自己去看吧。）

以前很讨厌这个效果，不习惯。最近感觉这样的工具条效果还真不错。所以今天尝试的自己弄了一个效果。

主要实现思路：在拖动滚动条的时候比较滚动条卷掉的高度和该工具条元素的Y坐标的值，如果滚动条卷掉的高度大于该工具条元素的Y坐标的值，那么将该工具条元素设置成position:fixed。 继续阅读：一个类似淘宝固定工具条的效果»

上接http://www.css88.com/archives/1910
这里新加了一个extend方法.

function extend(des, src) {
if (!des) {
des = {};
}
if (src) {
for (var i in src) {
des[i] = src[i];
}
}
return des;
}
function MagicColor(elem,colors,interTime){
this.elements=elem||[];
this.colors=colors||["#CC0000","#CC6D00","#CCCC00","#00CC00","#0000CC","#00CCCC","#CC00CC"];
this.indexColors=0;
this.interTime=interTime;
}
extend(MagicColor.prototype,{
timerCall:function (){
var elem=this.elements;
var color=this.colors[(this.indexColors++)%this.colors.length];
for(var i=0;i<elem.length;i++){
elem[i].style.color=color;
}
},
reset : function(){
if(this.timer){
clearInterval(this.timer);
delete this.timer;
}
},
start:function(){
this.reset();
var self=this;
this.timer= setInterval( function(){
self.timerCall();
},this.interTime||100);
}
});

调用还是：

function $(id){return document.getElementById(id)}
var effect = new MagicColor([$("comment1"),$("comment2"),$("comment3")],["#000000","#CC0000","#C00000","#00CC00","#0000CC","#00CCCC","#CC00CC"],500);
effect.start();