Recently in AJAX Category

微软在TechEd 2008上发布了Silverlight 2 Beta 2

By kevinwu on September 28, 2008 2:22 PM | No Comments | No TrackBacks
在佛罗里达州的奥兰多市举行TechEd for Developers 2008会议上，Bill Gates在他的主题发言中宣布了Silverlight 2 Beta 2的发布。

Gates先生提到这次的发布情况：

Silverlight 2 Beta 2将在本周发布，这是微软跨浏览器、跨平台和跨设备插件的最新版本，可基于.NET开发具有丰富媒体体验和交互性的下一代Web应用程序。现在，这个测试 版本已经具有商业的Go Live许可了。NBC Universal将使用Silverlight 2 Beta 2为2008北京奥运会创建具有前所未有的在线体验的报道站点。为了帮助开发人员充分利用Silverlight，微软也发布了Expression Blend 2.5的6月预览版，及Silverlight Tools beta 2 for Visual Studio 2008。

这次公告最为关键的一个方面就是向开发人员宣布的"Go Live"许可，这意味着现在人们现在就可以创建产品化的Silverlight应用程序了。下面是这次发布版本最新特性的一些详细情况：

* UI框架：Beta 2对动画的支持、错误处理和报告、自动化和可访问性的支持、键盘输入的支持和性能方面都进行了加强。这个版本也为Silverlight和WPF提供了更多的兼容性。

* 丰富的控件：Beta 2包含了一个新的名为视觉状态管理器（Visual State Manager，VSM）的模板模型，其为控件提供了更为简单的模板化功能。其他一些特性包括，TabControl的引入，TextBox支持文本换行 和滚动条，以及DataGrid添加了额外的Autosize、Reorder、Sort等功能，以及一些性能方面的提升。许多控件目前都已经合并到运行 时的安装包里，就不需要和应用程序打包在一起了。


* 网络支持：Beta 2增强了对跨域访问的支持和安全性，WebClient支持上传，以及支持双向通讯（从服务器"推送"数据给Silverlight客户端）。

* 丰富的基类库：Beta 2增强了线程处理的能力，支持LINQ to JSON，支持ADO.NET Data Services，对SOAP更好的支持，以及一些让网络和数据处理更容易的其他增强。

* Deep Zoom：Beta 2引入了针对Deep Zoom图像块基于XML的文件格式，以及一个新的MultiScaleTileSource对象来实现把现存的图片块数据库转换为Deep Zoom。更好的是，针对缩放的事件驱动提醒是Silvelight 2 Beta 2中的又一个增强。

Silverlight 2 Beta 2能在微软下载站点找到。这个测试版的文档也可以下载到，其他的信息则能在Silverlight的官方网站上找到。（开发者在线）

Ajax框架 - ZK3.5新版发布

By kevinwu on September 11, 2008 11:53 PM | No Comments | No TrackBacks

据国外媒体报道，周三ZK3.5版本发布。ZK是Ajax的框架，完全用Java语言编写。具有事件驱动、 170 +组件和标记语言，开发简便，像桌面应用程序开发和HTML /XUL页面一样。ZK支持jsf ， JSP， J2EE技术和Java ，Ruby， Groovy的脚本...

突出的新特性
Comet服务器Push可以让开发人员用新的方式创建Web应用程序。
所有ZK组件的布局升级到一个崭新的模式，更加灵活和具有强的交互性。

Grouping Grid和列表框让数据可以直观的显示。
具有更多布局组件- po rtallayout，c o lumnlayout，t a blelayout介绍，以满足不同用户界面设计要求。
一个强大的控件容器-Panel介绍了更多的功能。
Tabbox大大提高了滚动的特性和模式。
概念m oldsclass介绍了自定义的布局z k元件与安心。
Spinner和f isheyebar组件介绍。
图表支持Gannt Chart， w atermap Chart，BubbleChart，WindChart。
具有方便监察Web应用程序性能的机制。
使用URI表达式提高了事件的完成效率。
iFrame支持书签管理。
支持订阅/发布机制。
ZUML支持switch/case 和 choose/when语句 （csdn）

Ajax文章评分条

By kevinwu on September 11, 2008 11:40 PM | No Comments | No TrackBacks

主要讲解的是AJAX Rating Bars（基于php编程）的安装使用、演示、下载，以及相关说明。

效果预览：

 

数据库结构

 

使用说明：
一.请上传以下文件到您的：

_config-rating.php
_drawrating.php
db.php
rpc.php

CSS File:
  rating.css (可以放到你的自定css样式表里面)

Javascript files:
  behaviour.js
  rating.js

Image files:
  starrating.gif
  working.gif

二.安装
1.在mysql数据库中用以下语句建表（登录myphpadmin，打开指定数据库，执行sql建表语句）

CREATE TABLE `ratings` (
  `id` varchar(11) NOT NULL,
  `total_votes` int(11) NOT NULL default 0,
  `total_value` int(11) NOT NULL default 0,
  `used_ips` longtext,
  PRIMARY KEY  (`id`)
) TYPE=MyISAM AUTO_INCREMENT=3;

2.打开_config-rating.php文件修改以下数据库连接。

$dbhost        = 'localhost';
$dbuser        = '###';
$dbpass        = '###';
$dbname        = '###';
$tableName     = 'ratings';
$rating_unitwidth     = 30;

3.在您需要显示评分条的网页（php页面）顶部插入

<?php require('_drawrating.php'); ?>

4.<head></head>标签中加入对js和css的引用（请注意目录位置的修改）

<script type="text/javascript" language="javascript" src="js/behavior.js"></script>
<script type="text/javascript" language="javascript" src="js/rating.js"></script>
<link rel="stylesheet" type="text/css" href="css/rating.css" />

5.页面中需要显示此评分条的地方加入如下语句。

<?php echo rating_bar('#1','#2'); ?>

注意：#1是每个评论条的唯一性标识，需要自己设定，最好不要重复(如果重复的话相当于，多个页面调用的一个评分)，可以用1、2、3、4、a、b、c、d等代替，当然最好是用文章的id替换上面的#1。#2表示评论的总分数，为空表示10分（10个星星），如果总分设置为5分，则用5代替#2。
如果你要修改评论条的数据保存方式，你可以修改_drawrating.php文件。同时也需要修改 rpc.php文件中大概第52行的内容。

下载源码：http://www.wujianrong.com/download/ajaxstarrater_v122.zip

官方网站：http://www.masugadesign.com/the-lab/scripts/unobtrusive-ajax-star-rating-bar/

Ajax无刷新上传图片实例

By kevinwu on September 11, 2008 11:38 PM | No Comments | No TrackBacks

将index.html和upload.php文件保存到apache工作目录，例子使用安装目录D:/Program Files/Apache Software Foundation/Apache2.2/htdocs/

AJAX 客户端页面代码： index.html

<html>  
<body>  
<h1>Ajax file upload sample</h1><br/><input id="uplaod" name="btn_send" type="button" value="上传测试"/>  
<div id=result></div>  
<PRE class=js name="code"><SCRIPT LANGUAGE=JavaScript>    
// 上传函数    
function btn_send.onclick() {    
 data = ""  
 spliter = "-------7d8d733180846"  
 datadata = data + spliter + "\r\n"   
 datadata = data + "Content-Disposition: form-data; name=\"photofile\"; filename=\"C:\\a.txt\"\r\n"   
 // datadata = data + "Content-Type: image/pjpeg" + vbCrLf   
 datadata = data + "Content-Type: text/plain" + "\r\n" + "\r\n"   
 text = "My name is Wilson Lin."  
 postLength = text.length + data.length + 2 + spliter.length + 4   
 package = data + text + "\r\n" + spliter + "--\r\n"   
  
 alert(package)   
 // 把XML文档发送到Web服务器    
 var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");    
 xmlhttp.open("POST","./upload.php",false);    
 xmlhttp.setRequestHeader("Content-Type", "multipart/form-data; boundary=-----7d8d733180846");   
 xmlhttp.setRequestHeader("Content-Length", postLength);   
 xmlhttp.send(package);    
 // 显示服务器返回的信息    
 result.innerHTML=xmlhttp.ResponseText;   
}    
</SCRIPT>    
</PRE>  
 </body>  
</html> 

PHP服务器端代码： upload.php

<?php  
// $_FILES['photofile']:是获得上传图片的数组   
// $uploadfile：存放地址   
$uploadfile = "D:/Program Files/Apache Software Foundation/Apache2.2/htdocs/".$_FILES['photofile']['name'];   
copy( $_FILES['photofile']['tmp_name'], $uploadfile );   
echo "URL: <a href='http://localhost/".$_FILES['photofile']['name']."' target='_blank'>".$_FILES['photofile']['name']."</a><br/>";   
?>  
Upload successed!  

使用AJAX技术打造博客无刷新搜索引擎

By kevinwu on September 11, 2008 11:35 PM | No Comments | No TrackBacks

现在博客很流行，相信应该上网时间稍微长点的朋友都会在这或者在那的有一个自己的博客。对于一些有一定能力的 朋友，可能更喜欢自己去下载一个博客程序来架设一个自己的博客，而不是使用一些博客网站提供的服务。而大部分博客程序所带的搜索功能是提交查询关键字到搜 索页面，然后在后台生成搜索结果，再呈现给用户，这过程之中浪费了一些带宽，如博客的侧边栏。要节约这一些带宽，我们可以用AJAX来打造自己的无刷新日 志搜索。

在本篇教程中，数据库的表名和日志查看页面以L-Blog为例，因为我的博客程序是从L-Blog修改而来。

本教程中的例子已经通过实际测试，可以直接在L-Blog或FBS中使用。当然，要真正应用的话还是需要做一些美化及完善的。

在数据库中日志内容数据表名为blog_Content，其中日志ID为log_ID，日志标题为log_Title，日志查看页面为 blogview.asp，参数为日志logID。有了这些资料，就可以开始创建搜索结果的XML文档模板了。在显示搜索结果时，需要显示日志的标题，以 及日志的ID来创建到查看日志的链接。

搜索结果模板sample.xml

CODE:
<?xml version="1.0" encoding="utf-8"?>
<blogsearch>
    <!-- 每一个reslut就是一个搜索结果 -->
    <result>
        <!-- 日志的ID -->
        <logid>1</logid>
        <!-- 日志的标题 -->
        <logtitle>AJAX初体验之上手篇</logtitle>
    </result>
</blogsearch>


每个result就是一个搜索结果，为了处理没有找到相关内容的情况，我定义了当搜索结果为空时logid为#。
在完成XML文档模板之后，就可以用ASP来动态生成搜索结果需要的XML文档了。搜索的关键字采用POST方式来传递。

搜索结果输出ajaxsearch.asp

CODE:
<!-- #include file="commond.asp" -->
<!-- #include file="include/function.asp" -->
<%
' commond.asp为数据库连接文件
' function.asp中有要用到的函数CheckStr
Dim Search_Word,XML_Result,rsSearch,sqlSearch
Set rsSearch=Server.CreateObject("ADODB.RecordSet")
' 获取搜索关键字
Search_Word=CheckStr(Trim(Request.Form("searchword")))
' XML文档头
XML_Result="<?xml version=""1.0"" encoding=""utf-8""?><blogsearch>"
IF Search_Word<>Empty Then
    ' 创建查询SQL语句
    sqlSearch="SELECT log_ID,log_Title,log_Content FROM blog_Content WHERE log_Title LIKE '%"&Search_Word&"%' AND log_IsShow=True ORDER BY log_ID DESC"　
    ' 打开记录集
    rsSearch.open sqlSearch,Conn,1,1
    ' 如果没有搜索结果就产生一个结果，logid为#，标志着没有搜索结果
    IF rsSearch.BOF AND rsSearch.EOF Then XML_Result=XML_Result&"<result><logid>#</logid><logtitle /></result>"　
    ' 循环输出搜索结果
    Do While Not rsSearch.EOF
        ' 循环输出每一个结果
        XML_Result=XML_Result&"<result><logid>"&rsSearch("log_ID") &"</logid><logtitle><![CDATA["&rsSearch("log_Title") &"]]></logtitle></result>"　  
        rsSearch.MoveNext
    Loop
Else
    ' 关键字为空，则返回无搜索结果
    XML_Result=XML_Result&"<result><logid>#</logid><logtitle /></result>"
End IF
XML_Result=XML_Result&"</blogsearch>"
' 设置MIME Type为XML文档
Response.ContentType = "application/xml"
'Response.CharSet = "utf-8"
' 输出搜索结果
Response.Write(XML_Result)
%>


有了后台搜索结果输出的部分，就可以开始写前台搜索的部分了。
首先需要的是给用户输入搜索关键字及显示搜索结果的地方，我用div来分别显示这两个部分：

ajaxsearch.htm

CODE:
<!-- 要用到JavaScript，外部链入 -->
<script type="text/javascript" src="ajaxsearch.js"></script>
<!-- 用户输入部分 -->
<div>
    <!-- 因为没有用form，所以要处理input的keydown事件。在用户按下回车后搜索 -->
    <input type="text" id="searchword" onkeydown="if(event.keyCode==13) AjaxSearch();" />　
    <!-- 搜索按钮 -->
    <input type="button" onclick="AjaxSearch();" value="搜索" />
</div>
<!-- 搜索结果显示部分 -->
<div id="search_result">
    <!-- 初始时提示用户输入搜索关键字 -->
    <ul><li>请输入关键字</li></ul>
</div>

在JSP中使用jQuery的Ajax功能

By kevinwu on September 11, 2008 11:32 PM | No Comments | No TrackBacks

$(document).ready(function() {   
    $("a").click(function() {
        $("#decimal").val('这是一个例子');
        $("#inputtext").val('控制text');

    });

/*
    $("a").click(function() {
        alert("Hello world!");
    });
*/
   

});  

function convertToDecimal(){
   $.ajax({
        type: "GET",
        url: "/jqueryjsp/response",
        data: "key=" + $("#key").val(),
        dataType: "html",
        success: function(xml){
        //alert( "keypress code: " + $("key",xml).text() );
/*
        var decimal = document.getElementById('decimal');
        decimal.value = $("key",xml).text();
        //等价于上面的代码。
        $("#decimal").val($("key",xml).text());
*/
        $("#decimal").val($("key",xml).text());

        $("#rating").html("按键代码：" + $("key",xml).text());
        }   
   })
    clear();
  }

  function clear(){
    var key = document.getElementById("key");
  
    key.value="";
    // alert( "keypress code: " + $(this).html() );
  }

各种效果的jQuery UI介绍

By kevinwu on September 11, 2008 12:28 PM | No Comments | No TrackBacks
基本的鼠标互动：
拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing)

各种互动效果：
手风琴式的折叠菜单(accordions)、日历(date pickers)、对话框(dialogs)、滑动条(sliders)、表格排序(table sorters)、页签(tabs)、放大镜效果(magnifier)、阴影效果(shadow)

第一部分：鼠标交互
1.1 Draggables:拖拽
所需文件：
ui.mouse.js
ui.draggable.js
ui.draggable.ext.js

用法：文件载入后，可以拖拽class = "block"的层
$(document).ready(function(){
    $(".block").draggable();
});

draggable(options)可以跟很多选项
选项说明：http://docs.jquery.com/UI/Draggables/draggable#options
选项实例：http://dev.jquery.com/view/trunk/plugins/ui/tests/draggable.html

1.2 Droppables
所需要文件，drag drop
ui.mouse.js
ui.draggable.js
ui.draggable.ext.js
ui.droppable.js
ui.droppable.ext.js
用法：
$(document).ready(function(){
    $(".block").draggable({helper: 'clone'});
$(".drop").droppable({
   accept: ".block",
   activeClass: 'droppable-active',
   hoverClass: 'droppable-hover',
   drop: function(ev, ui) {
       $(this).append("<br>Dropped!");
   }
});
});
选项说明：http://docs.jquery.com/UI/Droppables/droppable#options
选项实例：http://dev.jquery.com/view/trunk/plugins/ui/tests/droppable.html

1.3　Sortables　排序
所需要的文件
jquery.dimensions.js
ui.mouse.js
ui.draggable.js
ui.droppable.js
ui.sortable.js
用法：
$(document).ready(function(){
    $("#myList").sortable({});
});
dimensions文档http://jquery.com/plugins/project/dimensions
选项说明：http://docs.jquery.com/UI/Sortables/sortable#options
选项实例：http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.sortable.html

1.4 Selectables 选择
所需要的文件
jquery.dimensions.js
ui.mouse.js
ui.draggable.js
ui.droppable.js
ui.selectable.js
用法：
$(document).ready(function(){
    $("#myList").selectable();
});
选项说明：http://docs.jquery.com/UI/Selectables/selectable#options
选项实例：http://dev.jquery.com/view/trunk/plugins/ui/tests/selectable.html

1.5　Resizables改变大小
所需要的文件　，此例子需要几个css文件
jquery.dimensions.js
ui.mouse.js
ui.resizable.js
用法：
$(document).ready(function(){
    $("#example").resizable();
});
CSS文件：http://dev.jquery.com/view/trunk/themes/flora/flora.all.css
选项说明：http://docs.jquery.com/UI/Resizables/resizable#options
选项实例：http://dev.jquery.com/view/trunk ... s/ui.resizable.html

第二部分：互动效果
2.1 Accordion 折叠菜单
所需要的文件:
ui.accordion.js
jquery.dimensions.js
用法：
$(document).ready(function(){
    $("#example").accordion();
});
CSS文件：http://dev.jquery.com/view/trunk/themes/flora/flora.all.css
选项说明：http://docs.jquery.com/UI/Accordion/accordion#options
选项实例：http://dev.jquery.com/view/trunk/plugins/accordion/?p=1.1.1
2.2 dialogs 对话框
所需要的文件：
jquery.dimensions.js
ui.dialog.js
ui.resizable.js
ui.mouse.js
ui.draggable.js

用法：
$(document).ready(function(){
    $("#example").dialog();
});
CSS文件：http://dev.jquery.com/view/trunk/themes/flora/flora.all.css
选项说明：http://docs.jquery.com/UI/Dialog/dialog#options
选项实例：http://dev.jquery.com/view/trunk/plugins/ui/tests/dialog.html

2.3 sliders 滑动条
所需要的文件
jquery.dimensions.js
ui.mouse.js
ui.slider.js

用法：
$(document).ready(function(){
    $("#example").slider();
});

CSS文件：http://dev.jquery.com/view/trunk/themes/flora/flora.all.css
选项说明：http://docs.jquery.com/UI/Slider/slider#options
选项实例：http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.slider.html

2.4 Tablesorter表格排序
所需要的文件
ui.tablesorter.js

用法：
$(document).ready(function(){
    $("#example").tablesorter({sortList:[[0,0],[2,1]], widgets: ['zebra']});
});

CSS文件：http://dev.jquery.com/view/trunk/themes/flora/flora.all.css
选项说明：http://docs.jquery.com/Plugins/Tablesorter/tablesorter#options
选项实例：http://tablesorter.com/docs/#Demo

2.5 tabs页签(对IE支持不是很好)
所需要的文件
ui.tabs.js
用法：
$(document).ready(function(){
    $("#example > ul").tabs();
});
CSS文件：http://dev.jquery.com/view/trunk/themes/flora/flora.all.css
选项说明：http://docs.jquery.com/UI/Tabs/tabs#initialoptions
选项实例：http://dev.jquery.com/view/trunk/plugins/ui/tests/tabs.html
tabs ext http://stilbuero.de/jquery/tabs_3/rotate.html

第三部分：效果
3.1 Shadow 阴影
实例http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.shadow.html
3.2 Magnifier 放大
实例http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.magnifier.html

jQuery - 一款优秀Javascrīpt框架

By kevinwu on September 11, 2008 12:22 PM | No Comments | No TrackBacks
jQuery是继prototype之后又一个优秀的Javascrīpt框架。对prototype我使用不多，简单了解过。但使用上 jQuery之后，马上被她的优雅吸引住了。有人使用这样的一比喻来比较prototype和jQuery：prototype就像Java，而jQuery就像ruby.实际上我比较喜欢java（少接触Ruby 罢了）但是jQuery的简单的实用的确有相当大的吸引力啊！在项目里我把 jQuery作为自已唯一的框架类包。使用其间也有一点点心得，其实这些心得，在jQuery的文档上面也可能有讲，不过还是记下来，以备忘罢。
 
一，找到你了！
还记得$()这个东西吧？prototype还是DWR都使用了这个函数代替document.getElementById()。没错，jQuery也跟风了。为达到document.getElementById()的目的，jQuery是这样写的：

代码
var someElement = $("#myId");

看起来比其他两个框架的要多了一个#，好，看看下面的用法：
代码
$("div p");(1)   
$("div.container")(2)   
$("div #msg");(3)   
$("table a",context);(4)  

在prototype里看过这样的写法吗？第一行代码得到所有<div>标签下的<p>元素。第二行代码得到class 为container的<div>元素,第三行代码得到<div>标签下面id为msg的元素。第四行代码得到context为上下文的table里面所有的连接元素。
如果你熟悉CSS，Xpath，你会觉得这些写法很眼熟！对了。正是。看出奥妙了吧。jQuery就是通过这样的方式来找到Dom对象里面的元素。跟CSS的选择器相类似。

二，jQuery对象？
jQuery提供了很多便利的函数，如each(fn)，但是使用这些函数的前提是：你使用的对象是jQuery对象。使一个Dom对象成为一个jQuery对象很简单，通过下面一些方式（只是一部分）：

代码
 
var a = $("#cid");(1)   
var b = $("<p>hello</p>");(2)   
var c = document.createElement("table"); var tb = $(c);  

三，代替body标签的onload
这个惯例，也许是除了$()之外，用得最多的地方了。下面一段代码：

代码
 
$(document).ready(function(){   
  alert("hello");   
});(1)   
   
<body onload="alert('hello');">（2） 

上面两段代码是等价的。但代码1的好处是做到表现和逻辑分离。并且可以在不同的js文件中做相同的操作，即$ (document).ready (fn)可以在一个页面中重复出现，而不会冲突。基本上jQuery的很多plugin都是利用这个特性，正因为这个特性，多个plugin共同使用起来，在初始化时不会发生冲突。
不管怎么说，这个惯例可以分离javascrīpt与HTML。推荐使用。

四，事件机制
我大量使用的事件可能就是button的onclick了。以前习惯在input 元素上写onclick = "fn()",使用jQuery可以使 javascrīpt代码与html代码分离，保持HTML的清洁，还可以很轻松地绑定事件，甚至你可以不知道"事件"这个名词。

代码
 
$(document).ready(function(){   
  $("#clear").click(function(){   
     alert("i am about to clear the table");     
   });   
  $("form[0]").submit(validate);   
});   
function validate(){   
  //do some form validation   
}

五，同一函数实现set&get

代码
 
$("#msg").html();   
$("#msg").html("hello");

上面两行代码，调用了同样的函数。但结果却差别很大。
第一行是返回指定元素的HTML值，第二行则是将hello这串字符设置到指定元素中。jQuery的函数大部分有这样的特性。
 
六，ajax
这是一个ajax横行的时代。多少人，了不了解ajax的都跟着用上一把。呵。使用jQuery实现ajax同样简单异常

代码 

$.get("search.do",{id:1},rend);   
function rend(xml){   
    alert(xml);   
} (1)   
$.post("search.do",{id:1},rend);   
function rend(xml){   
    alert(xml);   
} (2)   
   
$("#msg").ajaxStart(function(){   
   this.html("正在加载。。。。");   
});(3)   
$("#msg").ajaxSuccess(function(){   
   this.html("加载完成！");   
});(4)  

这些都是较常用的方法，get和post用法一样。第一个参数是异步请求的url，第二个为参数，第三个回调方法。
3，4的方法会在指定的Dom对象上绑定响应ajax执行的事件。当然，jQuery的AJAX相关的函数不仅是这些，有兴趣可以去研究再多。
 
七，渐入淡出

代码

$("#msg").fadeIn("fast");   
$("#msg").fadeOut("slow");

没错，上面两行代码已经分别实现了一个id为Msg的jQuery对象的渐入和淡出。做一个像Gmail一样的动态加载通知条，用jQuery就那么简单。两个函数接受的参数除了快慢等，还可以接收整型，作为渐入或淡出的完成时间，单位为MS。
 
八，plugin
这也是一个插件的时代。
jQuery插件给我的感觉清一色的清洁，简单。如Jtip，要使用它的功能，只需要在你的元素的class上加上Jtip,并引入jtip.js及其样式即可以了。其他事情插件全包。我喜欢jQuery的一个重要原因是发现她已经有了很多很好，很精彩的插件。
写得很烂。可能大家看不出jQuery的好处。嗯，光听是没用的，试用一下吧。你会发觉很有趣。
暂时告一段落吧。待有新的发现再来分享。

Jquery资源：
http://www.visualjquery.com/index.xml 很好的API查询站点
http://jquery.com/demo/thickbox/ 知道lightBox吧，看看Jquery是怎样实现相同的东西
http://www.codylindley.com/blogstuff/js/jtip/ Jtip，实用的提示工具
http://jquery.com/plugins/ 很多牛的插件。
http://15daysofjquery.com/jquery 的15天教程 （转载）

关于开发jQuery第三方插件

By kevinwu on September 11, 2008 12:20 PM | No Comments | No TrackBacks
开发第三方插件是我们提高jQuery代码经验的不错的选择，当我们的代码想要重用的时候，我们总是习惯把这些代码封装成一个插件，幸运的是在jQuery中这并不比写代码复杂多少。
添加一个新的全局函数

jQuery的全局函数也就是属于jQuery命名空间的函数，典型的例子就是$.AJAX()这个函数。将函数定义于jQuery的命名空间，我们只需要担心，它是否与其他函数存在冲突。

添加一个全局函数，我们只需如下定义：

jQuery.foo = function() { alert('This is a test. This is only a test.');};

调用的时候可以这样写：

jQuery.foo();

也可以这样写：

$.foo();

定义多个全局函数，如果我们的插件需要多个全局函数，可以如下定义

jQuery.foo = function() { alert('This is a test. This is only a test.');};jQuery.bar = function(param) { alert('This function takes a parameter, which is "' + param + '".');};

同时这两个方法我们可以如下调用

$.foo();$.bar('baz');

当然我们也可以使用$.extend()这个函数扩展来代替以上的定义

jQuery.extend({ foo: function() { alert('This is a test. This is only a test.'); }, bar: function(param) { alert('This function takes a parameter, which is "' + param +'".'); }});

以上效果是相同的，虽然在jQuery命名空间中，我们禁止使用了大量的javaScript函数名和变量名。但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突，因此我们习惯将一些方法封装到另一个自定义的命名空间。

jQuery.myPlugin = { foo: function() { alert('This is a test. This is only a test.'); }, bar: function(param) { alert('This function takes a parameter, which is "' + param + '".'); }};

当然我们仍然可以认为这些函数为全局函数，我们可以如下调用

$.myPlugin.foo();$.myPlugin.bar('baz');

通过这个技巧（使用独立的插件名），我们可以避免命名空间内函数的冲突。

自己改造jQuery

By kevinwu on September 11, 2008 12:18 PM | No Comments | No TrackBacks
在使用jQuery的过程中,发现一些地方在自己的应用上出问题.查来查去,发现问题可能出自jQuery的代码上.以前也曾经发现过jQuery的bug,不过自己英文不好,不能用英文表达出来提交bug.那就先自己自足吧.
注意:这些bug是否是真的bug还有待考证

jQuery 1.2.6版

所在:$.httpData
BUG语句:if ( xml && data.documentElement.tagName == "parsererror" )
修正:if ( xml && null==data.firstChild)
原因:浏览器兼容性问题,data.documentElement不一定存在,当然后面的也就不对了,虽然整体看还是会正确执行,但是不够严谨

所在: $.fx.step._default

BUG语句: fx.elem.style[ fx.prop ] = fx.now + fx.unit;
增加: if (fx.now<0 && fx.prop.search(/width|height/i)>=0) fx.now=0;
原因:有些插件,比如LavaLamp,会令 now < 0为负值,应该是LavaLamp的BUG,不过在这里处理的话,就一了百了了.

所在: $.browser

语句: 增加一个属性以方便switch($.browser.is)结构的操作
增加: is:(userAgent.match(/.*(webkit|opera|msie|firefox|mozilla)/) || [])[1]
原因: 适应了switch语法
« 3G | Main Index | Archives | Apollo »

站内搜索

相关归档

当前归档AJAX

上一归档：3G

下一归档：Apollo