天生我才必有用

想找一个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 奇怪的是官网还有另一个，晕。

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

著名的所见即所得编辑器 TinyMCE 终于发布了 3.0 正式版。

TinyMCE 是一个平台独立基于Web的Javascript HTML WYSIWYG编辑器，采用JavaScript/ECMAScript开发。

它的主要特性包括：

1. 主题/模板支持，多语言支持(包括简体中文)
2. 支持通过插 件的方式进行扩展。
3. 可工作在Mozilla Firefox和MSIE、Safari上。

很多网站系统都采用了 TinyMCE，其中包括 ：Wordpress、Joomla等等。同时在官方的Wiki中也包含了丰富的示例，非常容易学习。自己的第一次接触还是使用Joomla的时候。

为何需要使用Object? 其实这个不仅仅是为了赶潮流，由于ajax的流行，javascript的代码也变得越来越多的，这样必然会找出定义变量名称的重复，为了让自己撰写的代码有自己的名称的空间，最方便就是把代码包装到Object对象中。

var ajax_json_form = {
    onSubmit : function(formData, jqForm, options){    },
    onSuccess: function (responseText, statusText){    },
    processJson: function (data) {
         $('.errField').removeClass('errField');
         if (data.action == "success"){
               $("#" + data.id).html(data.message).addClass("message");
               $('#' + data.form_name).clearForm();
               for (var next = 0 ; next < data.params.length ; next ++){
                    $("#" + data.params[next].id).html(data.params[next].value);
               }
         }
         else {
               var msg = "<ul>";
               for (var next = 0 ; next < data.errors.length ; next ++){
                    msg = msg + "<li>" + data.errors[next].message + "</li>";
                    $("#" + data.errors[next].id).addClass("errField");
               }
               msg = msg + "</ul>";
         }
     }
}

这样写的代码其实有些类似其他语言中的Static函数，你不用初始化这个对象，因为它是静态对象，所以如需调用processJson，只需要使用ajax_json_form.processJson即可。

$(function() {
    var options = {
         beforeSubmit:  ajax_json_form.onSubmit,  // pre-submit callback
         success: ajax_json_form.processJson,        // post-submit callback
         dataType: "json"
    };
    $('#ajax_form').ajaxForm(options);
});

以上的代码就可以实现对JQuery的Ajax_form的使用，同时相关的callback函数都封装到ajax_json_form对象中，所以你也不用担心processJson的名称会和其它函数冲突了

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

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

今天在IBM的Developer Work上的一篇文章中，看到一套未接触过Javascript的库 – Rico ，链接到他的官方网站查看了一下。和其它Javascript库相比，功能也非常的类似，包括: Ajax、Animation等等。当前的版本已经2.0了，看来也有一段时间了。它有个非常不错的优点就是，在官方的Forum中有个Wish List，你可以把需要的功能提交给开发团队。

看了几个Demo，做了非常不错。但官网上的说明还不是太多，同时也无相关的书籍学习。看来流行还有一定的难度，有空学习一下，不过现在还是继续支持JQuery 。

对此有兴趣的可以参考IBM DeveloperWork上的文章。

是不是非常喜欢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，如果定义其他名字修正此处即可）

今天开始准备放弃Prototype开始学习JQuery，原因非常简单：

1. JQuery 和Prototype不是非常兼容，主要就是在那个$函数的功能定义上。（奇怪为何两套如此优秀的Javascript Framework竟然会涉及成不兼容） 。
2. JQuery的架构设计上可能比Prototype更加出色，也可能两者设计目标的不同，JQuery设计成更利于扩充；而Prototype的设计理念就是实现一些基础功能，不考虑其他复杂的实现。如果有一套JS完整解决方案，相信你也会选择这种方案，那JQuery就是这种完整的解决方案。它可以实现Prototype + script.aculo.us的功能，那我们何必去学多套框架呢。
3. JQuery的Extension都提供一些基础的CSS设定，这样对我们这些CSS菜鸟来说就轻松了很多。同时这些CSS还都做了挺漂亮的。:)

以下的功能可能就是JQuery更讨人喜欢的原因：

• Leverage knowledge of CSS
• Support extensions. （这个是我最欣赏它的优点）
• Abstract away browser quirks.
• Always work with sets.
• Allow multiple actions in one line.

今天看到几个非常不错的基于Javascript UI控件，不过是基于JQuery库的，自己对这套库不是非常熟悉。

它包括以下的功能：

• UI Datepicker （一个非常不错的日期选择器）。
• Beyond Flash （一个Pop消息的特效）。
• Clean Form Validation （Form校验)。
• Ajax Message
  1. Insert, update and add new messages automagically.
  2. Clicking on a message automagically changes into an editable textbox!
• Clean Calendar （允许用户选择日期后，添入Text文本框中）。
• Fisheye Menu (一个类似Mac OSX的菜单选择)

所有代码可以在http://marcgrabanski.com下载。