jQuery UI 1.5b4 发布

原文:
http://jquery.com/blog/2008/05/05/jquery-ui-15b4-featuring-effects-and-a-new-home/

近日1.5的b4发布了,看发布日志来看,貌似先发布了b3,结果发现恶性bug,于是没几个小时又发布了b4,跳过了b3了。
据声称,已经修复了50多个bug,还剩下5个主要的bug修复就好了。这个版本将是最后的测试版了,再过几天就能发布正式版了。

还有,jQuery Enchant 也会成为jQuery UI的一部分,提供了很多新的动画特效。据说要提供15种特效,包括了script.aculo.us中的一些(blind,bounce,drop,fold,slide …),还有些新的(transfer, explode. clip, scale)

同时,http://ui.jquery.com的页面也重新做过了。果然是比以前好看了不少,(虽然以前也不错)。不过,jQuery UI依然感觉不是很好用。。。而且也不是很漂亮。。。唉。。。。难道真的要用ext去么。。。

下载地址:http://code.google.com/p/jqueryjs/downloads/detail?name=jquery.ui-1.5b4.zip

jQuery的浏览器兼容性策略

之前写过一篇日志(http://shawphy.com/article.asp?id=34),说FF没有cancelBubble,所以要做兼容,其实多虑了,JQ已经为我们做好兼容性了。
也就是说,要阻止冒泡,直接使用
$("a").click(function(e) {
e.stopPropagation();
})
这样即可。
她还修正了preventDefault ,target ,relatedTarget,pageX/Y,event.which(确定按了键盘或者鼠标上的哪个按键。)

多的不说,大家自己看代码吧(jQuery 1.2.3 /line:2093-2149)

[quote] fix: function(event) {
// store a copy of the original event object
// and clone to set read-only properties
var originalEvent = event;
event = jQuery.extend({}, originalEvent);

// add preventDefault and stopPropagation since
// they will not work on the clone
event.preventDefault = function() {
// if preventDefault exists run it on the original event
if (originalEvent.preventDefault)
originalEvent.preventDefault();
// otherwise set the returnValue property of the original event to false (IE)
originalEvent.returnValue = false;
};
event.stopPropagation = function() {
// if stopPropagation exists run it on the original event
if (originalEvent.stopPropagation)
originalEvent.stopPropagation();
// otherwise set the cancelBubble property of the original event to true (IE)
originalEvent.cancelBubble = true;
};

// Fix target property, if necessary
if ( !event.target )
event.target = event.srcElement || document; // Fixes #1925 where srcElement might not be defined either

// check if target is a textnode (safari)
if ( event.target.nodeType == 3 )
event.target = originalEvent.target.parentNode;

// Add relatedTarget, if necessary
if ( !event.relatedTarget && event.fromElement )
event.relatedTarget = event.fromElement == event.target ? event.toElement : event.fromElement;

// Calculate pageX/Y if missing and clientX/Y available
if ( event.pageX == null && event.clientX != null ) {
var doc = document.documentElement, body = document.body;
event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) – (doc.clientLeft || 0);
event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) – (doc.clientTop || 0);
}

// Add which for key events
if ( !event.which && ((event.charCode || event.charCode === 0) ? event.charCode : event.keyCode) )
event.which = event.charCode || event.keyCode;

// Add metaKey to non-Mac browsers (use ctrl for PC's and Meta for Macs)
if ( !event.metaKey && event.ctrlKey )
event.metaKey = event.ctrlKey;

// Add which for click: 1 == left; 2 == middle; 3 == right
// Note: button is not normalized, so don't use it
if ( !event.which && event.button )
event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) ));

return event;
},
[/quote]

多行正则替换子目录中HTML注释中的内容

在虚拟机里的XP里写的,用于替换当前目录的子目录中HTML文件中特定的一段,用注释包起来的。
最近做个项目菜单导航很麻烦,页面非常多,但又是纯静态的,超麻烦。所以写个来以后批量改菜单导航。当然也是因为我不喜欢用DW,而拼死用EP手工写代码的“恶果”。DW有模板的……

这个东西用了我当年写大ass2str的样式~
正则用了JS,文件读写用VBS,请用文本编辑器保存为wsf后双击执行(windows scripting file)
for win only。Linux达人我就对不住了。

[quote]



*之间的内容都将被替换成 *当前文件夹下menu.txt文件的内容 * *注:要求所有文件为utf-8编码 * */ ]]>





[/quote]
JS写正则就是爽啊,VBS写文件读写也很爽~上面那个wsf文件还符合xml标准呢~

今日Ubuntu

昨日下载下来,急忙装下,今天一天都在整这玩意
用下来不得不说比之前其他大几个发行版好很多。apt-get超级方便阿~~~
感谢世界各地提供的源

用到最后不得不说,我这搞前台的没办法用LINUX,为啥,因为里边没IE……
我费了好大的劲给安了个ies4linux,结果运行速度实在不令人满意,毕竟基于wine的啊……
不过基本大功能都能实现了,网银啊,支付宝都恩用了。

心不死,干脆按个虚拟机玩,就按出了个virtualbox。小有波折,不过还是可以了,
居然跟scim冲突,努力就卸载了,现在用fcitx呢。

有了WINXP,自然有了IE6/7,还有我钟爱的EDITPLUS阿……
写前台的总不能就窝在LINUX的FF下过日子吧,肯定没多久被炒鱿鱼了……

基本上更多的一时也没法体会,暂时就写到这里。

button元素比起input的优势

实际上button和input两个都可以用来做按钮,而且格式非常相似

但是,button比起input来说可以提供更加丰富的内容
因为里边是可以包含HTML标签的
这样就可以做到如下的效果

怎么样,用传统的input做不到吧

但是务必注意,type在FF下,是必须的。否则如果一旦这个button出现在form中(ASPX常常会这样)而未加上type=”button”的话,就会提交表单的!

他支持submit/reset/button
当然也有value属性~
更多参数可以参考

总之强烈推荐用button代替input,更符合语义,即,这里我想要一个按钮,而不是一个什么“输入”的东西
英文:
http://www.w3schools.com/tags/tag_button.asp
中文:
http://www.w3school.com.cn/tags/tag_button.asp

标准化布局与实时切换CSS

今天花了点时间,彻底的写了一个两栏布局,IE6/7和FF下彻底完全一样了,另外两个OP和SF暂时不高兴管了。

同时写了一个切换CSS,即网站换肤功能。最近很流行的,一写才发现果然非常简单。
两三行搞定的。主要思想就是给link元素设定ID,然后用getElementId来获取后改变href值。超EASY
具体可以看这里的DEMO

http://shawphy.com/demo/changecss/changecss.html

唯一的缺憾是FF下对于未加载的样式会闪一下,当然他是对的……
因为我已经改变了样式,那老的自然应该消失,而新的没载入完,那自然还没呈现,所以有瞬间的闪一下。
不过虽然很正确,可惜少了点人性化……

 下次有空再测试IE8吧~

P.S. 今天更新一下,用了jQuery的读写Cookie的插件,现在可以保存设置到Cookie里了~本功能就此打住,不再更新


jQuery(function() {

	//读取cookie
	$("#changecss").attr("href","css/"+$.cookie("style")+".css");
	$("#sidebar>ul>li>a").click(function() {

		//设置link元素的href属性
		$("#changecss").attr("href","css/"+$.trim($(this).text())+".css");
		$("#headerMain").html($(this).text());

		//写入cookie,1年过期
		$.cookie("style",$.trim($(this).text()),{ expires: 365})

		//去除a上难看的虚线框
		this.blur();

		//不触发默认鼠标事件
		return false;
	}).css({"width":"220px","display":"block"});
});

button 背景图片IE下不认

今日出现个离奇的问题
IE下设置了button 如下css
button{border: none;background-image: url(button_gray_4.gif);}

结果发现IE下按钮始终是系统默认样式,并非我设定的样式。

捣鼓了半天,发现如果这样设
button{border: none;background: url(button_gray_4.gif);}

就又离奇的行了。真是莫名的……
同时也发现,这个跟最开始的dtd声明有关,如果去除了顶部的

,也就有效了。。。无语啊。。。

而如果对button 的border先设一个的话,也会有效:比如
border: 1px;border:none;background-image: url(button_gray_4.gif);

但如果图片不存早的话,表现效果也不相同……










jQuery 再度大修

之前有过些小修小补的,今天抽空统一再校对一下,修正如下

全文替换1.1遗留下的@符号
jQuery(callback)  未翻译的翻译一下
slice(start,[end])  未翻译的翻译一下
parent(expr)   例子中删除个body
append(content)   C要
css(name)   删除多余的<hr />
unbind([type],[data])  代码注释翻译
change(fn)   未翻译的翻译一下
click(fn)   常用的事件->几个事件的顺序
dblclick(fn)   未翻译的翻译一下
focus()    未翻译的翻译一下
scroll(fn   修正
submit(fn)   select->submit
toggle()   删除多余的<hr />
stop()    代码注释翻译

 

朋友可以再次下载一下离线版。
现在基本上注释也都翻译了。少量实在2B的就不翻了……