天生我才必有用

I’ve noticed that when I use the jQuery .fadeIn() or .fade­Out() method I see ugly pix­e­lated text in Inter­net Explorer after the ani­ma­tion has com­pleted. This seems to be related to an issue with an IE spe­cific style fil­ter called clearType. To solve the prob­lem, you need to remove the clearType fil­ter after your jQuery ele­ment has faded in. There are a few ways to do this:

Pre­view / Sam­ple / Demonstration

3 Ways to Fix The Issue

1. Add a Back­ground Color

Set a back­ground color with CSS on the ele­ment that is fad­ing in or out. This is the most basic way to solve the problem.

2. Remove the clearType Filter

After fad­ing in an ele­ment you can add this sim­ple call­back func­tion to fix the bug.

1
2
3

$('#fadingElement').fadeIn(2000, function(){
    $(this).css('filter','');
});

3. Use a Cus­tom fadeIn/Out Method

This method serve’s as a replace­ment for the built-in fadeIn() & fade­Out() meth­ods for jQuery.
After you add this method to your JavaScript, change your ‘fade­Out’ to ‘cus­tom­Fade­Out’ and your ‘fadeIn’ to ‘cus­tom­FadeIn’. See a sam­ple of this method on the demo page. Thanks to Ben­jamin Novakovic for writ­ing this jQuery plugin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

(function($) {
	$.fn.customFadeIn = function(speed, callback) {
		$(this).fadeIn(speed, function() {
			if(jQuery.browser.msie)
				$(this).get(0).style.removeAttribute('filter');
			if(callback != undefined)
				callback();
		});
	};
	$.fn.customFadeOut = function(speed, callback) {
		$(this).fadeOut(speed, function() {
			if(jQuery.browser.msie)
				$(this).get(0).style.removeAttribute('filter');
			if(callback != undefined)
				callback();
		});
	};
})(jQuery);

Ugly Tran­si­tions on Ani­mated Elements

When you ani­mate any­thing in IE there is an ugly tran­si­tion effect that occurs before the fix is applied. There’s no way to pre­vent or fix clearType while the fade occurs. A work-around is to fade some­thing else, like a <div> on top that fades in, rather than your text content.

Advanced Sce­nar­ios

There are more IE related issues that peo­ple have men­tioned see­ing in advanced setups as well.

I found that the answer was to set the z-index. I have a stack of absolutely posi­tioned divs and wanted to fade between them. The only way I could get IE8 to han­dle the fades nicely was to set the z-index of the ele­ment to be faded in higher than the ele­ment to be faded out i.e.:

A demon­stra­tion for Al’s fix has been added to the demo page

原文出处：http://www.kevinleary.net/jquery-fadein-fadeout-problems-in-internet-explorer/

是不是觉得标准的HTML的Form看上去不是很舒服，今天看到一个Mootools做的Custom Form 非常的不错。http://customformelements.net/demopage.php。当然也去尝试找找是否有jQuery的类似控件，只找到了jNice Form (http://plugins.jquery.com/project/jNice)，不过和Mootools那套CSS的设计比起来可能还是差了一点。

挺迷惑的一点就是为何有这么多的Js的Framework，何时才能只需要选择一种就可以有所以的解决方案。

这个jQuery的插件不错，主要实现的类似Delicious的标签推荐的功能，个人觉得这样的功能定义比原来这个jTagging使用起来更方便。

有兴趣可访问以下地址：http://remysharp.com/2007/12/28/jquery-tag-suggestion/

同时在此人博客中还找到了一个Text Box Hint的jQuery插件。其实前几天一直在找这个功能的插件，一直没找到。看来搜索的关键字也是一门学问啊。

今天看到一篇关于JQuery Plugin的教程写的非常不错。其实JQuery中最难的可能就是这部分，也没啥文档教程讲了非常的清楚。不过这篇教程讲的挺深入浅出的，例子也比较简单。

如果你有兴趣，可以去读一下：http://net.tutsplus.com/videos/screencasts/you-still-cant-create-a-jquery-plugin/

看到一篇用JQuery做的动画效果，现在才发现原来Flash最大对手不是Silverlight，其实是Javascript。
现在一次次看到Safari和Firefox的比拼，一次次看到最终促使js运行性能的提速的消息，不得不考虑这样的问题，实现这类简单的效果有必要使用Flash，毕竟js在下载文件大小上是绝对占有优势的。

此效果的链接地址.

JQuery 真的非常的强大，个人觉得主要功能还必须归结到它的Selector的设计上，非常的灵活，完完全全可以访问页面的任何内容。

今天又再次小试牛刀，看看如何使用简单的JS语句来获得Radio Button的选择情况。

HTML 代码如下：

<inputtype=“radio” name=“type_choose” value=“1″ > Type1
<input type=“radio” name=“type_choose” value=“2″ checked=checked> Type 2

jQuery 代码如下：

var type = 0;
$("input[name='type_choose]").each(function (index){
    if (this.checked){
         type = this.value;
    }
});

我把radio button 的名称定义成了type_choose，jQuery的先定位到所有input标签，然后过滤只留下name等于type_choose的标签，其实也可以使用$(“input[type='radio']“)来找到radio button，不过这种缺点就是页面上只有一个radio button group，所以可能还是使用name更好些。

最后使用each函数来遍历找到的所有radio button，函数中的this就是radio button，如何他的checked属性为真，则表示用户选择了这个radio button，把这个radio button的值保存在type变量中。

整个算法还是挺紧凑简单的。

想找一个jQuery的autocomplete的实现，谁知道竟然有这么多，（官方也不推荐一下）。

先把这些网址记录下来，已被将来使用：

1. http://www.pengoworks.com/workshop/jquery/autocomplete.htm ：不过界面土了点。
2. http://www.dyve.net/jquery/?autocomplete UI挺不错，准备先试用这个。
3. http://plugins.jquery.com/project/jqac 这个官方网站Plugin中。
4. http://plugins.jquery.com/project/jq-autocomplete 奇怪的是官网还有另一个，晕。

不过都没使用过，有空我会再试用一下。不过中文输入法的问题，可能还有做一点修改。

TITLE : jQuery in Action (Paperback)
AUTHOR : Bear Bibeault (Author), Yehuda Katz (Author)
PUBLISHER : Manning Publications publisher
ISBN : 1933988355
EDITION : 1st
PUB DATE : February 15, 2008
LANGUAGE : English
DOWNLOAD :  emule

DESCRIPTION :

A good web development framework anticipates what you need to do and makes those tasks easier and more efficient; jQuery practically reads your mind. Developers of every stripe-hobbyists and professionals alike-fall in love with jQuery the minute they’ve reduced 20 lines of clunky JavaScript into three lines of elegant, readable code. This new, concise JavaScript library radically simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery in Action, like jQuery itself, is a concise tool designed to make you a more efficient and effective web developer. In a short 300 pages, this book introduces you to the jQuery programming model and guides you through the major features and techniques you’ll need to be productive immediately. The book anchors each new concept in the tasks you’ll tackle in day-to-day web development and offers unique lab pages where you immediately put your jQuery knowledge to work. There are dozens of JavaScript libraries available now, with major companies like Google, Yahoo and AOL open-sourcing their in-house tools. This book shows you how jQuery stacks up against other libraries and helps you navigate interaction with other tools and frameworks. jQuery in Action offers a rich investigation of the up-and-coming jQuery library for client-side JavaScript. This book covers all major features and capabilities in a manner focused on getting the reader up and running with jQuery from the very first sections. Web Developers reading this book will gain a deep understanding of how to use jQuery to simplify their pages and lives, as well as learn the philosophy behind writing jQuery-enhanced pages.

想把一些常用的Javascript功能集成到你的应用中吗？如果你是选择了JQuery，那必须试试这个interface Elements for JQuery，程序就如它介绍的那样，并不是很大，压缩后的大小还不到80K，但功能是非常的强，包括常用: autocomplete、Slider、SliderShow等等都有支持。如果80K的代码对你来说还是太大，那你可以选择需要的程序，下载独立的模块。

网站上有一些例子，不过还不是非常的详细，慢慢摸索中…。

是不是非常喜欢del.icio.us那种风格的标签？其实实现这个功能非常的简单：JQuery + JTagging (Plugin)即可。范例可参见：http://www.alcoholwang.cn/jquery/jTaggingDemo.htm

1. 示例1

最简单的例子,

Javascript:

$(document).ready(function(){
     $("#tags").jTagging("#tag_list", " ");
}

其中输入input的Id是tags，候选内容id为tag_list

2. 示例2

$(document).ready(function(){
    var tag_list = new Array($("#tags_candidate1"), $("#tags_candidate2"));
    var normalClass = { padding : "2px 1px 0 1px", textDecoration : "underline", color : "#f00", backgroundColor : "" };
    var selectedClass = { padding : "2px 1px 0 1px", textDecoration : "underline", color : "#fff", backgroundColor : "#f00"};
    var normalHoverClass = { padding : "2px 1px 0 1px", textDecoration : "none", color : "#fff", backgroundColor : "#00f"};
    $("#tags").jTagging(tag_list, " ", normalClass, selectedClass, normalHoverClass);
}

其中tag_list为多个候选标签的id数组，normalClass, Select Class, normaHoverClass为自定义的CSS风格