天生我才必有用

是不是觉得标准的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风格

AjaxForm是基于JQuery可以实现Form Ajax的提交的一个组件，而TinyMCE是另一个使用javascript来实现Rich Editor的组件。不过当你需要同时使用这两个组件时，还是有一些主意点必须小心。

TinyMCE通过对Textarea来实现Rich editor，一次也容易令人造成一个假象，觉得TinyMCE的数据就不存在text area中，可以通过取得text area的value属性值就可以获得所要的数据，可能在一般的Form提交中并没有问题，不过Ajax的提交和不同的Form提交还是有一定的区别。为了手动的同步显示和Text area中的数据，用户必须手动的调用tinyMCE.getContent()这个函数来取得。特别是在AjaxForm中，数据在调用beforeSubmit回调函数 时，数据已经保存在AjaxForm的FormData中，不能通过简单的使用以下的语句：$(‘#textarea’).value(tinyMCE.getContent())实现数据的更新。必须遍历formData，更新formData的数据才行。

让我来举例说明：

tinyMCE.init({
    mode : "textareas",
    theme : "advanced",
});
$(document).ready(function() {
    var options = {
        beforeSubmit: onSubmit,
        success: onSuccess,
        dataType: "json",
    };
    $("#form_info").ajaxForm(options);
});
function onSubmit(formData, jqForm, options){
    for (var i=0; i< formData.length; i++){
        if (formData[i].name == "content"){
            formData[i].value = tinyMCE.getContent();
        }
    }
    return true;
}

其实所有的玄机就在onSubmit中的for循环（例子中的text area的id是content，如果定义其他名字修正此处即可）