Jan 06
作者鼓励大家使用 Google AJAX Libraries 来加载jQuery这样的JS包。
以前的
<script type="text/javascript" src="/js/jQuery.min.js"></script>
改成这样，方法一
<script type="text/javascript"
src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// You may specify partial version numbers, such as "1" or "1.2",
// with the same result. Doing so will automatically load the
// latest version matching that partial revision pattern
// (i.e. both 1 and 1.2 would load 1.2.6 today).
google.load("jquery", "1.2.6");
google.setOnLoadCallback(function() {
// Place init code here instead of $(document).ready()
});
</script>
方法二（推荐）
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// This is more like it!
});
</script>
Read the rest of this entry »
Jan 04
基于jQuery的鼠标手势支持，由于使用了canvas所以对IE 支持不好。
// initialize the engine, inactive by default and set the trace color to red
$.gestures.init({active:false,color:‘#ff0000′});
// adds a new gesture : Down
$.gestures.register(‘D’, function() {
alert(‘down !’);
});
// a more complex gesture : Down, Left, Up, Right
$.gestures.register(‘DLUR’, function() {
alert(‘this is a rectangle, no ?’);
});
// you can log unknown gestures :
$.gestures.error(function(gesture) {
alert(“oops, I don’t understand what \”“+gesture+“\” means”);
});
// useful keyboard tricks :
$(window).keydown(function(e) {
if ($.gestures.active() && e.which==27) {
// disable capture when user presses ESC
$.gestures.disable();
} else if (!$.gestures.active() && e.which==17) {
// enable capture when CTRL is pressed
$.gestures.enable();
}
});
$(window).keyup(function(e) {
// disable capture when CTRL is not pressed
if ($.gestures.active() && e.which==17) {
$.gestures.disable();
}
});
从上面的代码中可以看出，一开始初始化gestures，然后通过register注册鼠标手势，后面几个keyup通过判断是否按下CTRL或ESC启用或禁用全局鼠标手势。
Link: jQuery Gestures
Demo: jQuery-gestures- Image gallery
Download: jquery.gestures.js
Jan 04
XML/SWF Charts is a simple, yet powerful tool to create attractive charts and graphs from XML data.
通过XML和SWF生成图表，由于使用了Flash所以效果很酷的说。
但是生成数据时要按它的格式生成XML格式觉得很是繁琐，人个还是比较喜欢Open Flash Chart这类，支持JSON数据的。与生成XML比起来JSON生成起来就简单多了，而且现在流行的编程语言对JSON格式支持已经很完善了（或者通过第三方的包）。
Jan 04
FireUnit provides a simple JavaScript API for doing simple test logging and viewing within a new tab of Firebug.
// Simple true-like/false-like testing
fireunit.
ok( true,
“I’m going to pass!” );
fireunit.
ok( false,
“I’m going to fail!” );
// Compare two strings – shows a diff of the
// results if they’re different
fireunit.
compare(
“The lazy fox jumped over the log.”,
“The lazy brown fox jumped the log.”,
“Are these two strings the same?”
);
// Compare a string using a regular expression
fireunit.reCompare(
/The .* fox jumped the log./,
“The lazy brown fox jumped the log.”,
“Compare a string using a RegExp.”
);
// Display the total results
fireunit.testDone();
安装好Fireunit这个扩展之后，当你调用API，运行类似于上面的unit test后，结果就会出现在Firebug中的Test Tab页中。
安装需要Firefox 3+ 和 Firebug 1.2+。
如果你还使用了Qunit，使用下面方法，可以把Fireunit和它结合起来。
if ( typeof fireunit === “object” ) {
QUnit.log = fireunit.ok;
QUnit.done = fireunit.testDone;
}
这样结果会同时反应到Fireunit中。
Link: Fireunit
Install: Install Extension
Jan 04
By adding a single line of javascript to your site, you can automatically enhance your casual links to look and work better.
功能很简单就是让你网站上的链接变得更Cool一点。
使用也比较简单
导入JS文件
<script type="text/javascript" src="http://oopstudios.com/dlink/dlink.js"></script>
要使用的该效果的链接class加上dlink，不想使用的链接上加上class=”no_dlink”
<div class="dlink">
your <a href="#">link filled</a> content...
</div>
最后还可以定义不同类型链接的样式
a.internal {color: #D47700;}
a.external {color: #0074D4;}
a.subdomain {color: #D43500;}
a.email {color: #00B235;}
Link: Dlink
Download: Dlink v 0.9.7
Recent Comments