天生我才必有用

看到一篇用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变量中。

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

  var head = document.getElementsByTagName("head").item(0);
  var script = document.createElement ("script");
  script.src = "some_javascript_code.js";
  head.appendChild (script);

通过以上代码可以实现动态的javascript代码的载人。

想找一个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，如果定义其他名字修正此处即可）