分类目录归档:Javascript

Javascript、jQuery相关的技术文章

jquery ajax 示例演示

demo.html


	
		jQuery Ajax实例演示
		
		
		
	
	
	
		
		

输入姓名:

输入年龄:

输入性别:

输入工作:

demo.php


	

jQuery Ajax 全解析

jQuery Ajax 全解析

http://www.cnblogs.com/qleelulu/archive/2008/04/21/1163021.html

jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯。

废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到).

1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中。

url (String) : 请求的HTML页的URL地址。

data (Map) : (可选参数) 发送至服务器的 key/value 数据。

callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。

这个方法默认使用 GET 方式来传递的,如果[data]参数有传递数据进去,就会自动转换为POST方式的。jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码。语法形如 “url #some > selector”。

这个方法可以很方便的动态加载一些HTML文件,例如表单。

示例代码:

$(".ajax.load").load("http://www.cnblogs.com/QLeelulu/archive/2008/03/30/1130270.html .post",
		function (responseText, textStatus, XMLHttpRequest){
		this;//在这里this指向的是当前的DOM对象,即$(".ajax.load")[0]
		//alert(responseText);//请求返回的内容
		//alert(textStatus);//请求状态:success,error
		//alert(XMLHttpRequest);//XMLHttpRequest对象
});
这里将显示结果。

注:不知道为什么URL写绝对路径在FF下会出错,知道的麻烦告诉下。下面的get()和post()示例使用的是绝对路径,所以在FF下你将会出错并不会看到返回结果。还有get()和post()示例都是跨域调用的,发现传上来后没办法获取结果,所以把运行按钮去掉了。

2. jQuery.get( url, [data], [callback] ):使用GET方式来进行异步请求

参数:

url (String) :  发送请求的URL地址.

data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示,会做为QueryString附加到请求URL中。

callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。示例代码:

		$.get("./Ajax.aspx", {Action:"get",Name:"lulu"}, function (data, textStatus){
				//返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等.
				this; // 在这里this指向的是Ajax请求的选项配置信息,请参考下图
				alert(data);
				//alert(textStatus);//请求状态:success,error等等。
                                  当然这里捕捉不到error,因为error的时候根本不会运行该回调函数
				//alert(this);
		});

点击发送请求:

jQuery.get()回调函数里面的 this ,指向的是Ajax请求的选项配置信息:

image

3. jQuery.post( url, [data], [callback], [type] ) :使用POST方式来进行异步请求

参数:

url (String) : 发送请求的URL地址.

data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示。

callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

type (String) : (可选)官方的说明是:Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)

这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。示例代码:

Ajax.aspx:

Response.ContentType = "application/json";
Response.Write("{result: '" + Request["Name"] + ",你好!(这消息来自服务器)'}");

jQuery 代码:

$.post("Ajax.aspx", { Action: "post", Name: "lulu" },
		function (data, textStatus){
			// data 可以是 xmlDoc, jsonObj, html, text, 等等.
			//this; // 这个Ajax请求的选项配置信息,请参考jQuery.get()说到的this
			alert(data.result);
		}, "json");

点击提交:

这里设置了请求的格式为”json”:

image

如果你设置了请求的格式为”json”,此时你没有设置Response回来的ContentType 为:Response.ContentType = “application/json”; 那么你将无法捕捉到返回的数据。

注意一下,alert(data.result); 由于设置了Accept报头为“json”,这里返回的data就是一个对象,并不需要用eval()来转换为对象。

4. jQuery.getScript( url, [callback] ) : 通过 GET 方式请求载入并执行一个 JavaScript 文件。

参数

url (String) : 待载入 JS 文件地址。

callback (Function) : (可选) 成功载入后回调函数。

jQuery 1.2 版本之前,getScript 只能调用同域 JS 文件。 1.2中,您可以跨域调用 JavaScript 文件。注意:Safari 2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getScript 加入脚本,请加入延时函数。

这个方法可以用在例如当只有编辑器focus()的时候才去加载编辑器需要的JS文件.下面看一些示例代码:

加载并执行 test.js。

jQuery 代码:

$.getScript(“test.js”);


加载并执行 AjaxEvent.js ,成功后显示信息。

jQuery 代码:

$.getScript("AjaxEvent.js", function(){
		alert("AjaxEvent.js 加载完成并执行完成.你再点击上面的Get或Post按钮看看有什么不同?");
});

加载完后请重新点击一下上面的 Load 请求看看有什么不同。

jQuery Ajax 事件

Ajax请求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们的逻辑。在jQuery这里有两种Ajax事件:局部事件 和 全局事件。

局部事件就是在每次的Ajax请求时在方法内定义的,例如:

 $.ajax({
   beforeSend: function(){
     // Handle the beforeSend event
   },
   complete: function(){
     // Handle the complete event
   }
   // ...
 });

全局事件是每次的Ajax请求都会触发的,它会向DOM中的所有元素广播,在上面 getScript() 示例中加载的脚本就是全局Ajax事件。全局事件可以如下定义:

 $("#loading").bind("ajaxSend", function(){
   $(this).show();
 }).bind("ajaxComplete", function(){
   $(this).hide();
 });

或者:

 $("#loading").ajaxStart(function(){
   $(this).show();
 });

我们可以在特定的请求将全局事件禁用,只要设置下 global 选项就可以了:

 $.ajax({
   url: "test.html",
   global: false,// 禁用全局Ajax事件.
   // ...
 });

下面是jQuery官方给出的完整的Ajax事件列表:

  • ajaxStart (Global Event)
    This event is broadcast if an Ajax request is started and no other Ajax requests are currently running.

    • beforeSend (Local Event)
      This event, which is triggered before an Ajax request is started, allows you to modify the XMLHttpRequest object (setting additional headers, if need be.)
    • ajaxSend (Global Event)
      This global event is also triggered before the request is run.
    • success (Local Event)
      This event is only called if the request was successful (no errors from the server, no errors with the data).
    • ajaxSuccess (Global Event)
      This event is also only called if the request was successful.
    • error (Local Event)
      This event is only called if an error occurred with the request (you can never have both an error and a success callback with a request).
    • ajaxError (Global Event)
      This global event behaves the same as the local error event.
    • complete (Local Event)
      This event is called regardless of if the request was successful, or not. You will always receive a complete callback, even for synchronous requests.
    • ajaxComplete (Global Event)
      This event behaves the same as the complete event and will be triggered every time an Ajax request finishes.
  • ajaxStop (Global Event)
    This global event is triggered if there are no more Ajax requests being processed.具体的全局事件请参考API文档。
    好了,下面开始说jQuery里面功能最强的Ajax请求方法 $.ajax();

    jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据

    这个是jQuery 的底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。

    $.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求。

    注意: 如果你指定了 dataType 选项,请确保服务器返回正确的 MIME 信息,(如 xml 返回 “text/xml”)。错误的 MIME 类型可能导致不可预知的错误。见 Specifying the Data Type for AJAX Requests
    当设置 datatype 类型为 ‘script’ 的时候,所有的远程(不在同一个域中)POST请求都回转换为GET方式。

    $.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息。详细参数选项见下。

    jQuery 1.2 中,您可以跨域加载 JSON 数据,使用时需将数据类型设置为 JSONP。使用 JSONP 形式调用函数时,如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。数据类型设置为 “jsonp” 时,jQuery 将自动调用回调函数。(这个我不是很懂)

    参数列表:

    参数名 类型 描述
    url String (默认: 当前页地址) 发送请求的地址。
    type String (默认: “GET”) 请求方式 (“POST” 或 “GET”), 默认为 “GET”。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。
    timeout Number 设置请求超时时间(毫秒)。此设置将覆盖全局设置。
    async Boolean (默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
    beforeSend Function 发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。

    function (XMLHttpRequest) {
      this; // the options for this ajax request
    }
    cache Boolean (默认: true) jQuery 1.2 新功能,设置为 false 将不会从浏览器缓存中加载请求信息。
    complete Function 请求完成后回调函数 (请求成功或失败时均调用)。参数: XMLHttpRequest 对象,成功信息字符串。

    function (XMLHttpRequest, textStatus) {
      this; // the options for this ajax request
    }
    contentType String (默认: “application/x-www-form-urlencoded”) 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
    data Object,
    String
    发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:[“bar1”, “bar2”]} 转换为 ‘&foo=bar1&foo=bar2’。
    dataType String 预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText,并作为回调函数参数传递,可用值:

    “xml”: 返回 XML 文档,可用 jQuery 处理。

    “html”: 返回纯文本 HTML 信息;包含 script 元素。

    “script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。

    “json”: 返回 JSON 数据 。

    “jsonp”: JSONP 格式。使用 JSONP 形式调用函数时,如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。

    error Function (默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数:XMLHttpRequest 对象,错误信息,(可能)捕获的错误对象。

    function (XMLHttpRequest, textStatus, errorThrown) {
      // 通常情况下textStatus和errorThown只有其中一个有值
      this; // the options for this ajax request
    }
    global Boolean (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件
    ifModified Boolean (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。
    processData Boolean (默认: true) 默认情况下,发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 “application/x-www-form-urlencoded”。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。
    success Function 请求成功后回调函数。这个方法有两个参数:服务器返回数据,返回状态

    function (data, textStatus) {
      // data could be xmlDoc, jsonObj, html, text, etc...
      this; // the options for this ajax request
    }

    这里有几个Ajax事件参数:beforeSend success complete ,error 。我们可以定义这些事件来很好的处理我们的每一次的Ajax请求。注意一下,这些Ajax事件里面的 this 都是指向Ajax请求的选项信息的(请参考说 get() 方法时的this的图片)。
    请认真阅读上面的参数列表,如果你要用jQuery来进行Ajax开发,那么这些参数你都必需熟知的。

    示例代码,获取博客园首页的文章题目:

    $.ajax({
    		type: "get",
    		url: "http://www.cnblogs.com/rss",
    		beforeSend: function(XMLHttpRequest){
    			//ShowLoading();
    		},
    		success: function(data, textStatus){
    			$(".ajax.ajaxResult").html("");
    			$("item",data).each(function(i, domEle){
    				$(".ajax.ajaxResult").append("<li>"+$(domEle).children("title").text()+"</li>");
    			});
    		},
    		complete: function(XMLHttpRequest, textStatus){
    			//HideLoading();
    		},
    		error: function(){
    			//请求出错处理
    		}
    });

    这里将显示首页文章列表。

    其他

    jQuery.ajaxSetup( options ) : 设置全局 AJAX 默认选项。

    设置 AJAX 请求默认地址为 “/xmlhttp/”,禁止触发全局 AJAX 事件,用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数。

    jQuery 代码:

    $.ajaxSetup({
      url: "/xmlhttp/",
      global: false,
      type: "POST"
    });
    $.ajax({ data: myData });

    serialize() 与 serializeArray()

    serialize() : 序列表表格内容为字符串。

    serializeArray() : 序列化表格元素 (类似 ‘.serialize()’ 方法) 返回 JSON 数据结构数据。

    示例:

    HTML代码:

    <p id="results"><b>Results: </b> </p>
    <form>
      <select name="single">
        <option>Single</option>
        <option>Single2</option>
      </select>
      <select name="multiple" multiple="multiple">
        <option selected="selected">Multiple</option>
        <option>Multiple2</option>
        <option selected="selected">Multiple3</option>
      </select><br/>
      <input type="checkbox" name="check" value="check1"/> check1
      <input type="checkbox" name="check" value="check2"
    checked="checked"/> check2
      <input type="radio" name="radio" value="radio1"
    checked="checked"/> radio1
      <input type="radio" name="radio" value="radio2"/> radio2
    </form>

    image

    serializeArray() 结果为:

    image

    一些资源

    一个jQuery的Ajax Form表单插件:http://www.malsup.com/jquery/form/

    一个专门生成Loading图片的站点:http://ajaxload.info/ 大家觉得那些Loading比较炫的可以在这里跟帖晒一下,方便大家取用,嘎嘎

  • jQuery入门简介

    jQuery入门简介

    http://www.blueidea.com/tech/web/2007/4993.asp

    jQuery是最近比较火的一个JavaScript库,从del.icio.us/上相关的收藏可见一斑。

    到目前为之jQuery已经发布到1.2.1版本,而在这之前的一个星期他们刚发布1.2版本,看看他的各个版本的 发布时间 ,不难发现他的飞速发展,每个月都在更新版本;而且不断有人开发出新的 jQuery插件 ,最近又推出了 jQuery UI 库。

    jQuery于2006年一月十四号在BarCamp NYC (New York City)面世。主将 John Resig ,写有《Pro JavaScript Techniques》一书,因为效力于mozolla,据说firefox 3将包含Jquery,现在的 Jquery团队 有主要开发人员,推广人员,UI,插件开发,网站设计维护,其中3个主要开发人员分别是:两个美国人John Resig/Brandon Aaron,一个德国人Jorn Zaefferer)

    下面简单介绍一下jQuery的一些特性和用法:

    1.精准简单的选择对象(dom):

    $(‘#element’);// 相当于document.getElementById(“element”)

    $(‘.element’);//Class
    $(‘p’);//html标签
    $(“form > input”);//子对象
    $(“div,span,p.myClass”);//同时选择多种对象
    $(“tr:odd”).css(“background-color”, “#bbbbff”);//表格的隔行背景
    $(“:input”);//表单对象
    $(“input[name=’newsletter’]”);//特定的表单对象

    2.对象函数的应用简单和不限制:

    element.function(par);

    $(”p.surprise”).addClass(”ohmy”).show(”slow”)…

    3.对已选择对象的操作(包括样式):

    $(“#element”).addClass(“selected”);//给对象添加样式
    $(‘#element’).css({ “background-color”:”yellow”, “font-weight”:”bolder” });//改变对象样式
    $(“p”).text(“Some new text.”);//改变对象文本
    $(“img”).attr({ src: “test.jpg”, alt: “Test Image” });//改变对象文本
    $(“p”).add(“span”);//给对象增加标签
    $(“p”).find(“span”);//查找对象内部的对应元素
    $(“p”).parent();//对象的父级元素
    $(“p”).append(“<b>Hello</b>”);//给对象添加内容

    4.支持aJax,支持文件格式:xml/html/script/json/jsonp

    $(“#feeds”).load(“feeds.html”);//相应区域导入静态页内容
    $(“#feeds”).load(“feeds.php”, {limit: 25}, function(){alert(“The last 25 entries in the feed have been loaded”);});//导入动态内容

    4.对事件的支持:

    $(“p”).hover(function () {
    $(this).addClass(“hilite”);//鼠标放上去时
    }, function () {
    $(this).removeClass(“hilite”);//移开鼠标
    });//鼠标放上去和移开的不同效果(自动循环所有p对象

    5.动画:

    $(“p”).show(“slow”);//隐藏对象(慢速渐变)
    $(“#go”).click(function(){
    $(“#block”).animate({
    width: “90%”,
    height: “100%”,
    fontSize: “10em”
    }, 1000 );
    });//鼠标点击后宽、高、字体的动态变化

    6.扩展:

    $.fn.background = function(bg){
    return this.css(‘background’, bg);
    };
    $(#element).background(“red”);

    如果要为每一个jQuery 对象添加一个函数,必须把该函数指派给 $.fn,同时这个函数必须要返回一个 this(jQuery 对象)

    jQuery相关

    1. 《Learning jQuery:Better Interaction Design and Web Development with Simple JavaScript Techniques》第一本由jQuery的开发人员写的关于如何学习jQuery的书已经于七月面世,同时还有三本相关的书在问世当中。
    2. jQueryCamp 2007,一个jQuery开发人员的见面会也将于10月27日在Boston召开。
    3. VisualJquery是一个Jquery的学习和查询网站,也跟着更新到了1.1.2版本。

    jQuery官网介绍翻译:

    jQuery是一个以前未曾有过的JavaScript库。
    他快速、简洁,能够很轻易地处理HTML文档、控制事件、给页面添加动画和Ajax效果。

    jQuery是为了改变JavaScript的编写方式而设计的。

    • 他适合所有人:设计师、开发人员、极客、商业应用…
    • 体积小:26.5KB(1.2.1压缩版),45.3KB(1.2.1精简版),78.6KB(1.2.1完整版)…20.7KB(1.1.2压缩版),57.9KB(1.1.2完整版)
    • 兼容性:支持CSS 1-3和基本的XPath
    • 跨浏览器:IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+(向后兼容)

    jQuery插件

    Ajax (25)/Animation and Effects (26)/Browser Tweaks (6)/Data (17)/DOM (21)/Drag-and-Drop (6)/Events (19)/Forms (39)/Integration (12)/JavaScript (20)/jQuery Extensions (37)/Layout (23)/Media (13)/Menus (13)/Navigation (23)/Tables (11)/User Interface (84)/Utilities (27)/Widgets (41)/Windows and Overlays (4)

    jQueryUI库

    基本的鼠标互动:拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing)
    各 种互动效果:手风琴式的折叠菜单(accordions)、日历(date pickers)、对话框(dialogs)、滑动条(sliders)、表格排序(table sorters)、页签(tabs)、放大镜效果(magnifier)、阴影效果(shadow)

    本文链接:http://www.blueidea.com/tech/web/2007/4993.asp

    JavaScript案例精解(五)

    JavaScript案例精解(五)

    http://hi.baidu.com/grayworm/blog/item/27f705c27fb56530e4dd3be1.html

    日历
    运行效果:

    思路:
    这个例子的思路总体有两个难点:
    1、计算任意月份的第一天是星期几,即日历显示时,当前月份对应星期几
    2、日历窗口的层(<div>、<span>)的构造,及其相应的事件(点击日期号填写当前的日期,点击年份选择年份,点击月份选择月份)。
    在解决第一个问题时:我们选确定好1900-1-1是星期一,然后累计计算任意年份月份的第一天是第几天,然后模7,得出的结果就是当前月份第一天是星期几。这个问题充份考查我们的逻辑推导能力。
    至于第二个问题,我感觉没有什么复杂的逻辑。取而代之的是javascript语法对样式表及层对象的灵活控制。

    所以说javascript制作日历是个不错的例子,下面我们一一解析代码:

    HTML代码:
    在HTML代码中,为了追求日历代码的独立性,我们在HTML代码中并未涉及日历所需要的层(<div>),所有日历所需要的层都是由Javascript代码动态创建的。
    所以这里的HTML代码只有一个文本框和一个按钮,在该按钮的onclientclick事件中我们调用日历代码中的calendar(‘TextBox1’)函数。calendar函数的实参传入的是接收选中日期的文本框。
    <form id=”form1″ runat=”server”>
    <div>
    出生日期:<asp:TextBox ID=”TextBox1″ runat=”server”></asp:TextBox>
    <asp:Button ID=”Button1″ OnClientClick=”return calendar(‘TextBox1’)” runat=”server” Text=”Button” />
    </div>
    </form>

    Javascript代码:
    由于时间的关系,代码编写仓促,未经过充份测试。这里的代码量有点大,感兴趣的朋友可以进行研究与改进,当然也可以直接复制进行使用。
    <script>
    //日历的边框线的颜色(车延禄)
    var bordcolor=”blue”;
    //日历的背景色
    var backcolor=”#ccaaff”;
    //月份和年份标题栏的背景颜色
    var titlecolor=”#ffccaa”;
    //星期行的背景色
    var weekcolor=”yellow”;
    //当前日期的背景色
    var todaycolor = “red”;
    //日历的字体的大小
    var fontsize = “12px”;
    //日历中前景色
    var fontcolor=”black”;
    //日历的宽雅
    var width=210;

    //为HTML文档的BODY标记动态添加onclick事件,当在页面任意处单击鼠标时,将会隐藏日历。
    document.body.onclick = function()
    {
    var calendar = document.getElementById(“calendar”);
    if(calendar != null)
    {
    calendar.style.display=”none”;
    }
    }
    function pit(e) //对象的绝对位置
    {
    var t = {x:e.offsetLeft,y:e.offsetTop};
    if(e=e.offsetParent)
    {
    var r = pit(e);
    t.x+=r.x;
    t.y+=r.y;
    }
    return t;
    }

    //日历控件的主函数,它调用其它函数来实现日历的构建,形参target是目标控件的ID,日历控件会在ID是target控件下显示,并把选中的日期值填充到ID是target的控件中去。
    function calendar(target)
    {
    //查找ID是calendar的日历对象,如果未找到就创建该创建该日历,如果找到了就显示该日历对象
    var datepane = document.getElementById(“calendar”);
    if(datepane == null)
    {
    //datepane是日历控件的最外层的div,其它所有的div或span都在该div内部显示。
    datepane = document.createElement(“div”);
    //下面是设置该DIV的各个属性
    datepane.id=”calendar”;
    datepane.style.backgroundColor=backcolor;
    datepane.style.width=width;
    datepane.style.display = “block”;
    datepane.style.position = “absolute”; //此属性必须要设置,束则日历控件无法浮动定位显示
    datepane.style.borderColor=bordcolor;
    datepane.style.borderWidth=1;
    datepane.style.borderStyle=”solid”;
    //日历控件单击事件处理代码
    datepane.onclick = function()
    {
    //取消事件冒泡
    window.event.cancelBubble = true;
    //在日历中单击,清除年份选择列表
    var selyear = document.getElementById(“ddSelYear”);
    if(selyear != null)
    {
    selyear.outerHTML = “”;
    }
    //在日历中单击,清除月份选择列表
    var selmonth = document.getElementById(“ddSelMonth”);
    if(selmonth != null)
    {
    selmonth.outerHTML = “”;
    }
    }
    var txt = document.getElementById(target);
    //设置日历控件的左边位置,这里注意目标控件用的是offsetLeft属性。
    datepane.style.left = txt.offsetLeft+document.body.offsetLeft;
    //设置日历控件的右边位置
    var e = pit(event.srcElement.parentNode);
    datepane.style.top = e.y+txt.offsetHeight;
    //datepane.style.top = txt.offsetTop + txt.offsetHeight+document.body.offsetTop;
    document.body.appendChild(datepane);
    }
    else
    {
    datepane.style.display = “block”;
    }
    //清空日历控件的内容
    datepane.innerHTML = “”;
    //调用createTitle函数添加年份、月份所在的标题栏
    datepane.appendChild(createTitle(target));
    //调用createWeek函数添加星期栏
    datepane.appendChild(createWeek());
    //调用createDate函数添加日期
    datepane.appendChild(createDate(target));
    //取消事件冒泡
    window.event.cancelBubble=true;
    //阻止按钮的提交
    return false;
    }
    //当点击年份标签时,调用该函数显示年份列表
    function selectYear(target)

    {
    //创建ddSelYear层,该层中包含好多个div(即yearitem),每个div中包函一个年份。
    var div = document.createElement(“div”);
    div.id=”ddSelYear”;
    div.style.width=50;
    div.style.height=100;
    div.style.zIndex=5; //此值宜大些,以便在日历控件最顶层显示该层,以便用户选择年份
    div.style.display=”block”;
    div.style.position=”absolute”; //使期绝对定位浮动显示
    div.style.backgroundColor=”#ccffcc”;    //设置期背景色
    div.style.fontSize = 12;
    div.style.overflow = “auto”; //当超出高度时自动产生滚动条

    for(var i=1900;i<=2100;i++)
    {
    //ddSelYear年份列表层中的每一年份项。
    var yearitem = document.createElement(“div”);
    yearitem.style.cursor = “hand”;
    yearitem.innerHTML = i;
    //当该年份被点击时触发的代码
    yearitem.onclick = function()
    {
    //将日历控件中的当前年份设为选中的年份
    document.getElementById(“ddyear”).innerHTML = this.innerHTML;
    //调用createDate()方法刷新当前选中年月份中的日期结构
    createDate(target);
    }
    div.appendChild(yearitem);
    }
    //返回该年份列表的层
    return div;
    }

    //当点击月份时调用该函数,显示月份列表,此函数中属性的值的设置与selectYear函数中的内容类似,在此不一一注释
    function selectMonth(target)
    {
    var div = document.createElement(“div”);
    div.id=”ddSelMonth”;
    div.style.width=50;
    div.style.height=100;
    div.style.zIndex=5;
    div.style.display=”block”;
    div.style.position=”absolute”;

    div.style.backgroundColor=”#ccffcc”;
    div.style.fontSize = 12;
    div.style.overflow = “auto”;

    for(var i=1;i<=12;i++)
    {(车延禄)
    var monthitem = document.createElement(“div”);
    monthitem.style.cursor = “hand”;
    monthitem.innerHTML = i;
    monthitem.onclick = function()
    {
    document.getElementById(“ddmonth”).innerHTML = this.innerHTML;
    createDate(target);
    }

    div.appendChild(monthitem);
    }
    return div;
    }

    //创建年月份标题函数
    function createTitle(target)
    {
    //标题栏容器div
    var title = document.createElement(“div”);
    title.style.backgroundColor = titlecolor;
    title.style.width = width;
    title.style.textAlign=”center”;

    //取出当前日期,以便下面并把年份div内默认设为当前年份,月份div内默认设为当前月份
    var now = new Date();

    //创建年份div,设定默认值
    var spanyear = document.createElement(“span”);
    spanyear.id=”ddyear”;
    spanyear.style.cursor = “hand”;
    spanyear.innerHTML = now.getFullYear();

    //为该年份div设置单击事件处理程序
    spanyear.onclick = function()
    {
    //调用上面的selectYear函数,显示年份选择列表,以供用户选择,改变年份
    var selyear = selectYear(target);
    document.getElementById(“calendar”).appendChild(selyear);
    selyear.style.top = this.offsetTop; //年份列表的顶部位置与年份div的顶部对齐
    selyear.style.left = this.offsetLeft; //年份列表的左边与年份div的左边对齐
    window.event.cancelBubble=true; //取消事件冒泡,这里一定要加上
    }

    //创建月份div,设定默认值
    var spanmonth = document.createElement(“span”);
    spanmonth.id=”ddmonth”;
    spanmonth.style.cursor = “hand”;
    spanmonth.innerHTML = now.getMonth()+1;
    //为该月份div设置单击事件处理程序
    spanmonth.onclick=function()
    {
    //调用上面的selectMonth函数,显示月份选择列表,以供用户选择,改变月份
    var selmonth = selectMonth(target);
    document.getElementById(“calendar”).appendChild(selmonth);
    selmonth.style.top = this.offsetTop;
    selmonth.style.left = this.offsetLeft;
    window.event.cancelBubble=true;
    }
    //加上“年”“月”两个汉字
    var txtyear = document.createElement(“span”);
    txtyear.innerHTML = “年”;
    var txtmonth = document.createElement(“span”);
    txtmonth.innerHTML = “月”;

    title.appendChild(spanyear);
    title.appendChild(txtyear);
    title.appendChild(spanmonth);
    title.appendChild(txtmonth);

    //返回标题栏对象
    return title;
    }

    //创建星期栏的函数
    function createWeek()
    {
    //星期栏对象容器,其中容纳周一至周日七个span标签
    var week = document.createElement(“div”);
    week.style.width=width;
    week.style.backgroundColor=weekcolor;
    week.style.fontSize = 12;(车延禄)
    week.style.textAlign=”center”;

    //创建“星期一”的标签
    var td1 = document.createElement(“span”);
    //设置标签的显示方式,一定要设置为inline-block,否则span标记的style.width=30不会起作用的。
    td1.style.display = “inline-block”;
    td1.style.width=30;
    td1.innerHTML =”一”;
    //以下的标签与上面类似
    var td2 = document.createElement(“span”);
    td2.style.display = “inline-block”;
    td2.style.width=30;
    td2.innerHTML =”二”;
    var td3 = document.createElement(“span”);
    td3.style.display = “inline-block”;
    td3.style.width=30;
    td3.innerHTML =”三”;
    var td4 = document.createElement(“span”);
    td4.style.display = “inline-block”;
    td4.style.width=30;
    td4.innerHTML =”四”;
    var td5 = document.createElement(“span”);
    td5.style.display = “inline-block”;
    td5.style.width=30;
    td5.innerHTML =”五”;
    var td6 = document.createElement(“span”);
    td6.style.display = “inline-block”;
    td6.style.width=30;
    td6.innerHTML =”六”;
    var td7 = document.createElement(“span”);
    td7.style.display = “inline-block”;
    td7.style.width=30;
    td7.innerHTML =”日”;
    //将周日作为一周中的第一天,这样编码更方便。
    week.appendChild(td7);
    week.appendChild(td1);
    week.appendChild(td2);
    week.appendChild(td3);
    week.appendChild(td4);
    week.appendChild(td5);
    week.appendChild(td6);
    //返回星期栏对象
    return week;
    }

    //创建日期项的函数
    function createDate(target)
    {
    //如果已存在日期栏容器,则将其内容清空,以便下面重新填充
    //如果不存在日期栏容器,则创建之
    var datediv;
    if(document.getElementById(“showdate”)!=null)
    {
    datediv = document.getElementById(“showdate”);
    datediv.innerHTML = “”;
    }
    else
    {
    datediv = document.createElement(“div”);
    }
    //取出当前要显示的年份
    var year = document.getElementById(“ddyear”).innerHTML;
    //取出当前要显示的月份
    var month = document.getElementById(“ddmonth”).innerHTML;
    //日期容器div的ID
    datediv.id=”showdate”;
    //调用getDateOfWeek函数,计算当前月份中的第一天是星期几,以便决定从哪个位置开始填写本月第一天。
    var weekday = getDateOfWeek(year,month,1);
    //计算当前月份的天数,以决定在日期栏容器中填写多少天,它是填写循环结束的条件
    var daycount = 31;//当前月中的日期的天数
    if(month==4||month==6||month==9||month==11)
    {
    daycount = 30;
    }
    else if(month == 2)
    {
    if(i%400==0||(i%4==0&&i%100!=0))
    {
    daycount = 29;
    }
    else
    {
    daycount = 28;
    }
    }

    var daynum = 1;//要填写的日期,从当前月份的1号开始
    var over=false; //是否达到本月最大天数,即当前月份中的日期是否创建完成
    //循环日期行
    for(var i=0;i<10;i++)
    //循环日历中的日期行,这里的i<10无实际意义,可以设得更大一些
    {
    //创建该日历行的容器,第i周的容器
    var row = document.createElement(“div”);
    row.style.width = width;    //设置期宽雅与日历控件同宽
    row.style.height = 25; //行高
    row.style.verticalAlign=”middle”;
    //在当前日历行中逐一创建每一天(span),并设置日期和事件
    for(var j=0;j<7;j++)
    {
    //如果这个月的第一天不是星期天,则在里面添加空的span标记,并进入下次循环,
    if(i==0 && j<weekday)
    {

    var cell = document.createElement(“span”);
    cell.style.display = “inline-block”;
    cell.style.width = 30;
    cell.style.textAlign=”center”;
    row.appendChild(cell);
    continue;   //进行下次循环(车延禄)
    }
    //创建日期显示span,显示当前日期行中的每一天
    var cell = document.createElement(“span”);
    cell.style.display = “inline-block”;//此属性必须设置
    cell.style.width = 30;
    cell.style.cursor = “hand”;
    cell.style.textAlign=”center”;
    cell.style.fontSize=”12″;
    //如果该span是今天,则将设置期红色背景
    var d = new Date();
    if(d.getFullYear() == parseInt(year)&&d.getMonth()+1==parseInt(month)&&d.getDate()==parseInt(daynum))
    {
    cell.style.backgroundColor=todaycolor;
    }
    //设置日期span中的文本
    cell.innerHTML = daynum++;
    //设置自定义属性value(yyyy-MM-dd),以便在单击该span时将其值写入文本框
    cell.value = year+”-“+month+”-“+cell.innerHTML;
    //当该日期被单击时要执行的处理代码
    cell.onclick = function()
    {
    // 把当前span标签中的 value值取出来送到target所指定的文本框中。
    var tar = document.getElementById(target);
    tar.value = this.value;
    document.getElementById(“calendar”).style.display=”none”;
    }
    //把当前日期span添加到当前的日期行中去。
    row.appendChild(cell);
    //如果达到月底的话就结束循环
    if(daynum > daycount)
    {
    over=true;
    break;
    }
    }
    datediv.appendChild(row);
    //如果达到月底的话就结束循环
    if(over == true)
    {
    break;
    }
    }
    return datediv;
    }

    //计算指定的年、月、日是星期几
    function getDateOfWeek(year,month,day)
    {
    var days = 0;//记录从1900-1-1至指定日期的累计总天数
    //累加1900-1-1至year-1-1的天数
    for(var i=1900;i<year;i++)
    {
    //闰年与平年
    if(i%400==0||(i%4==0&&i%100!=0))
    {
    days += 366;
    }
    else
    {
    days += 365;
    }
    }
    //累加从year-1-1至year-month-1这几个月中的天数
    for(var j=1;j<month;j++)
    {
    switch(parseInt(j))
    {
    case 1:
    days += 31;break;
    case 2:
    if(year%400==0||(year%4==0&&year%100!=0))
    {
    days += 29;
    }
    else
    {
    days += 28;
    }
    break;
    case 3:
    days += 31;break;

    case 4:
    days += 30;break;
    case 5:
    days += 31;break;
    case 6:
    days += 30;break;
    case 7:
    days += 31;break;
    case 8:
    days += 31;break;
    case 9:
    days += 30;break;
    case 10:
    days += 31;break;
    case 11:
    days += 30;break;
    case 12:
    days += 31;break;
    }
    }
    //再累加从year-month-1至year-month-day的天数
    days += day;
    //总天数模上7就是星期几(车延禄)
    return days%7;
    }
    </script>

    JavaScript案例精解(四)

    JavaScript案例精解(四)

    http://hi.baidu.com/grayworm/blog/item/0cd98080e82ed3d29123d9a0.html

    属性页
    效果图

    思路:用span标签制作页标题,用div标签制作内容页面,通过span标签的click事件来控制相应div的显示与隐藏。

    HTML代码:
    <style type=”text/css”>
    /*标题标签及间隔标签的样式*/
    span{ display:inline-block; font-size:12px;}
    /*标题标签的样式*/
    .tab{ background-image:url(images/titlebg.gif); width:60px; text-align:center; cursor:hand}
    /*间隔标签的样式*/
    .spliter{ width:10px;}(车延禄)
    /*内容页面的样式*/
    .con{ text-align:left; display:none; font-size:12px; background-color:#ffeeee; border-color:pink; border-width:1px; border-style:solid; width:300px; height:100px;}
    </style>
    <body>
    <form id=”form1″ runat=”server”>
    <div id=”dd”>
    <!–标题标签与间隔标签–>
    <div id=”titles”>
    <span id=”news” style=” background-image:url(images/titlebg1.gif)” onclick=”sel(this)”>新闻</span>
    <span id=”Span1″></span>
    <span id=”car” onclick=”sel(this)”>汽车</span>
    <span id=”Span2″></span>
    <span id=”sport” onclick=”sel(this)”>体育</span>
    <span id=”Span3″></span>
    <span id=”girl” onclick=”sel(this)”>女性</span>
    </div>
    <!–内容页面–>
    <div id=”contents”>
    <div id=”divnews” style=”display:block;”>
    ……
    </div>
    <div id=”divcar”>
    ……
    </div>
    <div id=”divsport”>
    ……
    </div>
    <div id=”divgirl”>
    ……
    </div>
    </div>
    </div>
    </form>
    </body>

    Javascript代码:
    <script language=”javascript”>
    //当点击标题标签时触发
    function sel(t)
    {
    resettitle();   //重置标题标签
    resetcontent(); //隐藏内容页面

    t.style.backgroundImage=”url(images/titlebg1.gif)”;
    var c = document.getElementById(“div”+t.id);
    c.style.display = “block”;
    }

    //隐藏所有的内容页面
    function resetcontent()
    {
    document.getElementById(“divnews”).style.display=”none”;
    document.getElementById(“divcar”).style.display=”none”;
    document.getElementById(“divsport”).style.display=”none”;
    document.getElementById(“divgirl”).style.display=”none”;
    }
    (车延禄)
    //重置所有的标题标签的样式
    function resettitle()
    {
    document.getElementById(“news”).style.backgroundImage=”url(images/titlebg.gif)”;
    document.getElementById(“car”).style.backgroundImage=”url(images/titlebg.gif)”;
    document.getElementById(“sport”).style.backgroundImage=”url(images/titlebg.gif)”;
    document.getElementById(“girl”).style.backgroundImage=”url(images/titlebg.gif)”;
    }
    </script>

    QQ面版
    效果图

    思路:在XML中配置QQ面版中的标题与内容,然后用javascript读取XML加载相应内容。
    每个QQ面版包含两个面版:标题面版和内容面版。
    在点击标题面版的时候,先把所有面版的内容面版收缩,再显示被点击标题的内容面版。

    XML代码
    <?xml version=”1.0″ encoding=”utf-8″ ?>
    <panes>
    <pane id=”p1″ title=”个人文件夹1″ titlebackcolor=”green” contentbackcolor=”yellow” titlebackimage=”” contentbackimage=”” borderwidth=”1″ bordercolor=”blue”>
    <content id=”pc11″ image=”images/qq/p1.gif” text=”我的文档1″ url=”#”></content>
    <content id=”pc12″ image=”images/qq/p2.gif” text=”我的视频1″ url=”#”></content>
    <content id=”pc13″ image=”images/qq/p3.gif” text=”我的图片1″ url=”#”></content>
    </pane>
    <pane id=”p2″ title=”个人文件夹2″ titlebackcolor=”green” contentbackcolor=”yellow” titlebackimage=”” contentbackimage=”” borderwidth=”1″ bordercolor=”blue”>
    <content id=”pc11″ image=”images/qq/p4.gif” text=”我的文档2″ url=”#”></content>
    <content id=”pc12″ image=”images/qq/p5.gif” text=”我的视频2″ url=”#”></content>
    <content id=”pc13″ image=”images/qq/p6.gif” text=”我的图片2″ url=”#”></content>
    </pane>
    <pane id=”p3″ title=”个人文件夹3″ titlebackcolor=”green” contentbackcolor=”yellow” titlebackimage=”” contentbackimage=”” borderwidth=”1″ bordercolor=”blue”>
    <content id=”pc11″ image=”images/qq/p7.gif” text=”我的文档3″ url=”#”></content>
    <content id=”pc12″ image=”images/qq/p8.gif” text=”我的视频3″ url=”#”></content>
    <content id=”pc13″ image=”images/qq/p9.gif” text=”我的图片3″ url=”#”></content>
    </pane>
    <pane id=”p4″ title=”个人文件夹4″ titlebackcolor=”green” contentbackcolor=”yellow” titlebackimage=”” contentbackimage=”” borderwidth=”1″ bordercolor=”blue”>
    <content id=”pc11″ image=”images/qq/p1.gif” text=”我的文档4″ url=”#”></content>
    <content id=”pc12″ image=”images/qq/p3.gif” text=”我的视频4″ url=”#”></content>
    <content id=”pc13″ image=”images/qq/p5.gif” text=”我的图片4″ url=”#”></content>
    </pane>
    </panes>

    id:面版的编号
    title:标题面版的文字(车延禄)
    titlebackcolor:标题面版的背景色
    contentbackcolor:内容面版的背景色
    titlebackimage:标题面版的背景图片
    contentbackimage:内容面版的背景图片
    borderwidth:QQ面版的边框宽度
    bordercolor:QQ面版的边框颜色

    image:内容面版中每一项图片的的地址
    text:内容面版中每一项文字
    url:内容面版中每一项被点击时要导航去的地址

    HTML代码:
    <body>
    <form id=”form1″ runat=”server”>
    <div id=dd>
    <script>ShowQQ(“dd”);</script>
    </div>
    </form>
    </body>

    JavaScript 代码:
    <script language=”javascript”>
    var width=200;
    var contentheight = 300;

    var xmldoc = new ActiveXObject(“Microsoft.XMLDOM”);
    xmldoc.async = false;
    xmldoc.load(“QQPane.xml”);
    var root = xmldoc.documentElement;
    //控制QQ面版显示的主函数,形参接收的是父对象的ID,即要在哪个HTML元素内显示QQ面版
    function ShowQQ(parentid)
    {
    var toppane = document.createElement(“div”);// 最外层的div
    toppane.id = “QQPane”;
    toppane.style.fontSize = 12;
    toppane.style.width = width;
    toppane.style.borderWidth = 1;
    toppane.style.borderStyle = “solid”;
    toppane.style.borderColor = “blue”;
    //根据XML文件的配置来创建QQ面版(标题面版和内容面版)
    createPane(toppane);
    //将最外层的DIV加到窗体中
    document.getElementById(parentid).appendChild(toppane);
    }

    //创建标题面版(车延禄)
    function createTitle(node)
    {
    var titlepane = document.createElement(“div”);
    titlepane.id = “title”+node.attributes[0].text;
    titlepane.style.textAlign = “center”;
    titlepane.style.cursor = “hand”;
    titlepane.style.borderStyle = “outset”;
    titlepane.style.borderWidth = 1;
    titlepane.style.borderColor=”#00ffff”;
    titlepane.innerHTML = node.attributes[1].text;
    titlepane.style.backgroundColor = node.attributes[2].text;
    titlepane.style.backgroundImage = node.attributes[4].text;
    //添加标题面版被点击的事件,先隐藏所有的内容面版,再显示该标题面版对应的内容面版
    titlepane.onclick = function()
    {
    var itempane = document.getElementById(“QQPane”);
    for(var i=0;i<itempane.childNodes.length;i++)
    {
    itempane.childNodes[i].childNodes[1].style.display = “none”;
    }
    //显示当前标题面版下的内空面版
    var showid = “item”+node.attributes[0].text;
    var showpane = document.getElementById(showid);
    showpane.childNodes[1].style.height = contentheight;
    showpane.childNodes[1].style.display = “block”;

    };
    return titlepane;
    }

    //创建内容面版
    function createContent(node,islast)
    {
    var contentpane = document.createElement(“div”);
    contentpane.id = “content”+node.attributes[0].text;
    contentpane.style.backgroundColor = node.attributes[3].text;
    contentpane.style.backgroundImage = node.attributes[5].text;
    contentpane.style.height = contentheight;
    contentpane.style.overflow = “auto”;
    contentpane.style.textAlign= “center”;
    contentpane.style.cursor = “default”;
    //如果不是最后一个内容面版,则把内容面版设为高度为0,即不可见
    if(!islast)
    {
    contentpane.style.height = 0;
    }
    return contentpane;
    }

    //创建内容面版中的每个图标和文本,形参parent代表的上一级元素对象(即所在内容面版的对象)
    //形参paneNode是代表在XML文件中上一级元素节点
    function createContentItem(parent,paneNode)
    {
    //添加分隔条
    var spliter = document.createElement(“div”);
    spliter.style.height=10;
    parent.appendChild(spliter);
    //循环XML中当前元素下的所有子元素,并根据XML配置生成图标与文本
    for(var j=0;j<paneNode.childNodes.length;j++)
    {
    //图标文本标签包含image和文本的显示
    var contentitem = document.createElement(“div”);
    contentitem.style.cursor = “hand”;
    contentitem.style.height = 50;
    //contentitem.style.width = 50;
    contentitem.style.textAlign = “center”;
    //contentitem.style.backgroundColor=”red”;

    //显示图标的img 标签
    var contentimage = document.createElement(“img”);
    contentimage.src = paneNode.childNodes[j].attributes[1].text;
    contentimage.width=40;
    contentimage.height=40;
    contentimage.style.textAlign=”center”;

    //显示文本的DIV标签
    var contenttext = document.createElement(“div”);
    contenttext.innerHTML = paneNode.childNodes[j].attributes[2].text;

    contentitem.appendChild(contentimage);
    contentitem.appendChild(contenttext);

    //在每一个图标之间添加分隔条
    parent.appendChild(contentitem);
    var spliter = document.createElement(“div”);
    spliter.style.height=10;
    parent.appendChild(spliter);
    }
    }
    function createPane(toppane)
    {
    //循环根元素下的第一级子元素
    for(var i=0;i<root.childNodes.length;i++)
    {
    var itempane = document.createElement(“div”);//每一大项的div
    itempane.id = “item” + root.childNodes[i].attributes[0].text;

    //创建标题面版
    var titlepane = createTitle(root.childNodes[i]);
    //创建内容面版,其中第二个形参代表该内容面版是不是最后一个内容面版。
    var contentpane = createContent(root.childNodes[i],(i==root.childNodes.length-1?true:false));

    //创建内容面版中的每一个图标和文本
    createContentItem(contentpane,root.childNodes[i]);

    itempane.appendChild(titlepane);
    itempane.appendChild(contentpane);
    toppane.appendChild(itempane);
    }
    }(车延禄)
    </script>

    JavaScript案例精解(三)

    JavaScript案例精解(三)

    http://hi.baidu.com/grayworm/blog/item/3abf7c7aec6f96e82f73b3ed.html

    灯片效果是很常见的,它通常每隔一定的时间切换一次新闻图片与新闻文本的显示,其中大部分是以Flash制作的。但我们可以用JavaScript和XML文件结合起来实现这种效果。
    运行效果:

    实现思路:用JavaScript和XML文件结合起来取出要轮转的幻灯片的信息,然后用setTime()函数使其每隔一段时间就调用函数一次,切换幻灯图片

    XML代码:
    <?xml version=”1.0″ encoding=”utf-8″ ?>
    <newslist>
    <news text=”欧锦赛:西班牙1:0击败德国44年后再成欧洲王者” image=”images/news1.jpg” url=”#”></news>
    <news text=”陕西“周老虎”以“行政疏忽”结案” image=”images/news2.jpg” url=”#”></news>
    <news text=”赖斯赞扬中国地震救援和重建工作” image=”images/news3.jpg” url=”#”></news>
    </newslist>

    text:新闻幻灯显示的文本。
    image:新闻幻灯显示的图片。
    url:点击新闻图片要转去的URL地址

    HTML代码:
    <div>
    <!–新闻幻灯片的容器–>
    <div id=”newsshow” style=”width:300px;”>
    <!–新闻幻灯片要显示的图片超链接信息–>
    <a id=”hp” href=”#”><img border=0 style=”width;300px; height:200px;” id=”hpimg” src=”” /></a>
    <!–新闻幻灯片的下面的索引号–>
    <div id=”newsindex” style=”text-align:right;”></div>
    <!–新闻幻灯片下的新闻文本–>
    <div id=”newstext” style=”text-align:center;”></div>
    </div>
    </div>

    JavaScript代码:
    <script language=”javascript”>
    var hyperlink = document.getElementById(“hp”); //超链接对象
    var hyperimage = document.getElementById(“hpimg”); //图片对象
    var newsindex = document.getElementById(“newsindex”);   //新闻索引号的容器对象
    var newstext = document.getElementById(“newstext”); //显示新闻内容的对象
    var xmldoc = new ActiveXObject(“Microsoft.XMLDOM”);
    xmldoc.async=false;
    xmldoc.load(“News.xml”);
    var root = xmldoc.documentElement;
    //XML文件中的新闻条数
    var newscount = root.childNodes.length;
    //setTime所返回的对象,将来在鼠标点击的时候停止幻灯交替。
    var timeout;
    if(newscount > 0)
    {
    timeout = window.setTimeout(“slideshow(0)”,0);
    }
    //幻灯片效果,接收指定的新闻的索引号
    function slideshow(nodeindex)
    {
    //根据新闻的索引号,在XML文件中找相关的元素
    var node = root.childNodes[nodeindex];
    //为起链接对象设置href
    hyperlink.href = node.attributes[2].text;
    //为图片设置对象的图片
    hyperimage.src=node.attributes[1].text;
    //设置新闻的标题
    newstext.innerHTML = node.attributes[0].text;
    //清空新闻索引号div中的内容
    newsindex.innerHTML = “”;
    //循环加载新闻索引号
    for(var i=0;i<newscount;i++)
    {
    //创建一个span,并设置其内容为索引号
    var sp = document.createElement(“span”);
    //设置当前索引号的格式
    if(nodeindex == i)
    {
    sp.style.backgroundColor=”red”;
    sp.style.color=”yellow”;
    sp.style.fontWeight=”bold”;
    }
    else
    {
    //设置非当前索引号的格式
    sp.style.backgroundColor=”pink”;
    sp.style.color=”blue”;
    }
    //设置索引号span内的数字
    sp.innerHTML = “&nbsp;”+(i+1)+”&nbsp;”;
    sp.style.cursor=”hand”;

    sp.id=i;
    //当点击索引号时执行的事件,显示相应的幻灯信息
    sp.onclick= function()
    {
    slideshow(this.id);
    window.clearTimeout(timeout);
    };
    //添加索引号span
    newsindex.appendChild(sp);
    //添加索引号之间的间隔
    var split = document.createElement(“span”);
    split.innerHTML = “&nbsp;”;
    newsindex.appendChild(split);
    }
    //如果循环至最后一张新闻图片,则回到第一张新闻图片重新轮转,否则从显示下一张新闻图片
    if(nodeindex<newscount-1)
    {
    timeout=window.setTimeout(“slideshow(“+(++nodeindex)+”)”,3000);
    }
    else
    {
    timeout = window.setTimeout(“slideshow(0)”,3000);
    }
    }
    </script>

    连续滚动新闻图片
    运行效果:

    实现思路:用marquee标签实现的新闻的滚动时会出现一段空白的内容,我们可以用JavaScrip来控制新闻图片的连续滚动。
    建立一个一行两列的table表格,用代码读取XML文件向其中一个单元格中加载图片信息,然后再把第二个单元格的内容设为与第一个单元格的内容相同。
    然后用setTimeout或setInterval使表格在容器中向左移动,如果发现scrollLeft超出单元格的宽度的时候,再把其scrollLeft宽度减去单元格的宽。
    (车延禄)

    XML文件代码:
    <?xml version=”1.0″ encoding=”utf-8″ ?>
    <students>
    <student id=”s1″ image=”images/stu1.gif” url=”#”></student>
    <student id=”s2″ image=”images/stu2.gif” url=”#”></student>
    <student id=”s3″ image=”images/stu3.gif” url=”#”></student>
    <student id=”s4″ image=”images/stu4.gif” url=”#”></student>
    </students>
    id:新闻图片的id
    image: 新闻图片的路径
    url:新闻图片要导航到的页面

    HTML代码:
    <div id=”dd” style=”width:260px; height:75px; overflow:hidden; “>
    <table>
    <tr><td id=”td1″></td>
    <td id=”td2″></td></tr>
    </table>
    </div>

    Javascript代码:
    <script language=”javascript”>
    var xmldoc = new ActiveXObject(“Microsoft.XMLDOM”);
    xmldoc.async=false;
    xmldoc.load(“student.xml”);
    var root = xmldoc.documentElement;
    //第一个单元格对象
    var td1 = document.getElementById(“td1”);
    //第二个单元格对象
    var td2 = document.getElementById(“td2”);
    //表格的容器div
    var dd = document.getElementById(“dd”);
    //把相应的图片信息拼成table表格,并放入第一个单元格中
    var intable=”<table><tr>”
    for(var i=0;i<root.childNodes.length;i++)
    {
    intable += “<td><img src='”;
    intable += root.childNodes[i].attributes[1].text;
    intable += “‘/></td>”;
    }
    intable += “</tr></table>”
    td1.innerHTML = intable;
    //把第一个单元格中的内容设置到第二个单元格中
    td2.innerHTML = td1.innerHTML;

    //滚动函数
    function beginscroll()
    {
    //当滚动过第二个单元格的时候,再回到初始情况
    if(td2.offsetWidth <= dd.scrollLeft)
    {
    dd.scrollLeft -= td1.offsetWidth;
    }
    else
    {
    dd.scrollLeft++;
    }
    }
    var scrolling = window.setInterval(beginscroll,50);

    //容器对象的事件
    dd.onmouseover=function()
    {
    //当鼠标悬停的时候,停止滚动
    window.clearInterval(scrolling);
    };
    dd.onmouseout = function()
    {
    //当鼠标离开的时候继续滚动(车延禄)
    scrolling = window.setInterval(beginscroll,50);
    };
    </script>

    JavaScript案例精解(二)

    JavaScript案例精解(二)

    http://hi.baidu.com/grayworm/blog/item/6da7f0a12003ae8e471064a4.html

    树型目录放大镜
    效果:

    思路:利用DotNet中的树型控件和Javascript,对具有复杂结构的输入内容简化输入。

    Web.SiteMap文件:
    在web.sitemap文件中,每一个siteMapNode属性代表树的节点指向的目标网页的地址,但在这里面我们不想在点击树的节点的时候转向其它 页面,而是要把选中节点的内容填写到文本框中,所以我们把每一个siteMapNode节点的url属性中加入javascript代码,执行填写文本框 的操作。
    <?xml version=”1.0″ encoding=”utf-8″ ?>
    <siteMap xmlns=”
    http://schemas.microsoft.com/AspNet/SiteMap-File-1.0” >
    <siteMapNode title=”中国” description=””>
    <siteMapNode title=”山东” description=””>
    <siteMapNode url=”javascript:setValue(‘山东济南’)” title=”山东济南”>
    </siteMapNode>
    <siteMapNode url=”javascript:setValue(‘山东青岛’)” title=”山东青岛”></siteMapNode>
    <siteMapNode url=”javascript:setValue(‘山东烟台’)” title=”山东烟台”></siteMapNode>
    </siteMapNode>

    <siteMapNode title=”江苏” description=””>
    <siteMapNode url=”javascript:setValue(‘江苏南京’)” title=”江苏南京”></siteMapNode>
    <siteMapNode url=”javascript:setValue(‘江苏苏州’)” title=”江苏苏州”></siteMapNode>
    </siteMapNode>
    <siteMapNode title=”辽宁”>
    <siteMapNode url=”javascript:setValue(‘辽宁沈阳’)” title=”辽宁沈阳”></siteMapNode>
    <siteMapNode url=”javascript:setValue(‘辽宁大连’)” title=”辽宁大连”></siteMapNode>
    </siteMapNode>
    </siteMapNode>
    </siteMap>

    HTML代码:
    <div style=”font-size:12px;”>
    企业所在地:<asp:TextBox ID=”TextBox1″ runat=”server”></asp:TextBox>
    <asp:Button ID=”Button2″ runat=”server” Text=”…” OnClientClick=”return showtree()” />
    <div id=”dd” style=”background-color:#ccffcc; border-width:1px; border-color:Blue; border-style:solid; height:100px; overflow:auto; width:150px; position:absolute;z-index=2; display:none;”>
    <asp:TreeView ID=”TreeView1″ runat=”server” DataSourceID=”SiteMapDataSource1″ ShowLines=true
    EnableViewState=”False” ExpandDepth=”1″>
    </asp:TreeView>
    <asp:SiteMapDataSource ID=”SiteMapDataSource1″ runat=”server” />
    </div><br>
    <asp:Button ID=”Button1″ runat=”server” Text=”确定” />
    </div>

    Javascript代码:
    //设置超链接的颜色和样式
    document.alinkColor=”blue”;
    document.vlinkColor=”blue”;
    document.getElementById(“TreeView1″).style.textdecoration=”none”;
    //每个树节点被点击时要执行的代码,把传进来的值填写到文本框中。
    function setValue(val)
    {
    document.getElementById(“TextBox1”).value=val;
    document.getElementById(“dd”).style.display=”none”;
    }
    //当点击按钮的时候显示或隐藏树所在的层
    function showtree()
    {
    var s = document.getElementById(“dd”);
    if(s.style.display==”none”)
    {
    s.style.display=”block”;
    }
    else
    {
    s.style.display = “none”;
    }
    return false;
    }

    网页菜单
    效果:

    思路:用Javascript读取服务器端的XML文件,并根据XML中的结构加载XML第一级子元素作为主菜单,当鼠标移至页面中的相应菜单上时,再读取XML中当前子节点下的相应子元素。

    XML文件代码
    <?xml version=”1.0″ encoding=”utf-8″ ?>
    <menu>
    <mainmenu id=”xxgk” text=”学校概况”>
    <menuitem id=”xxjj” text=”学校简介” url=”#”></menuitem>
    <menuitem id=”xxry” text=”学校荣誉” url=”#”></menuitem>
    <menuitem id=”xqfm” text=”校区风貌” url=”#”></menuitem>
    </mainmenu>
    <mainmenu id=”xxgz” text=”学校工作”>
    <menuitem id=”jxgz” text=”教学工作” url=”#”></menuitem>
    <menuitem id=”jygz” text=”就业工作” url=”#”></menuitem>
    <menuitem id=”xzgz” text=”行政工作” url=”#”></menuitem>
    <menuitem id=”scgz” text=”市场工作” url=”#”></menuitem>
    </mainmenu>
    <mainmenu id=”xwzx” text=”新闻中心”>
    <menuitem id=”zbxw” text=”总部新闻” url=”#”></menuitem>
    <menuitem id=”tpxw” text=”图片新闻” url=”#”></menuitem>
    <menuitem id=”qtxw” text=”其它新闻” url=”#”></menuitem>
    </mainmenu>
    </menu>
    text属性:代表菜单项的显示内容
    id属性:用来设置页面菜单的ID
    url属性:点击菜单时要转向的页面

    HTML代码和Javascript
    //在页面其它地放单击鼠标时,隐藏子菜单项
    <body onclick=”hideitems()”>
    <form id=”form1″ runat=”server”>
    <div id=menu>
    <div id=”mainmenu” style=”background-color:Green; color:White;”></div>asfasf
    </div>
    </form>
    </body>
    </html>

    <script language=”javascript”>
    //主菜单容器
    var mainmenu= document.getElementById(“mainmenu”);
    //创建XMLDOM对象
    var xmldoc = new ActiveXObject(“Microsoft.XMLDOM”);
    //设为同步( 车延禄)
    xmldoc.async = false;
    //加载XML文件
    xmldoc.load(“menu.xml”);
    //取得XML文件的根元素
    var root = xmldoc.documentElement;
    //遍历XML文件中根元素的第一级子元素,并加载作为主菜单
    for(var i=0;i<root.childNodes.length;i++)
    {
    //为每一个主菜单项创建一个span,并设置其内容为相应的XML元素属性
    var mainitem = document.createElement(“span”);
    mainitem.innerHTML = root.childNodes[i].attributes[1].text;
    mainitem.id = root.childNodes[i].attributes[0].text;
    //为该主菜单项加上onmouseover事件,当鼠标移在相应主菜单上时,显示其子菜单
    mainitem.onmouseover=function()
    {
    showitems(this.id);
    };
    //将该主菜单项加入到主菜单的容器中
    mainmenu.appendChild(mainitem);
    //添加主菜单项之间的分隔
    var split = document.createElement(“span”);
    split.style.width=50;
    //必须设置此属性,否则对span的宽度设置不管用。
    split.style.display=”inline-block”;
    mainmenu.appendChild(split);
    }
    //隐藏所有主菜单项上的子菜单
    function hideitems()
    {
    for(var i=0;i<root.childNodes.length;i++)
    {
    var id = “sub”+root.childNodes[i].attributes[0].text;
    var subpan = document.getElementById(id);
    if(subpan != null)
    subpan.outerHTML = “”;
    }
    }
    //显示相应主菜单下的子菜单,形参menuid是对应主菜单的ID
    function showitems(menuid)
    {
    //隐藏所有的子菜单
    hideitems();
    //取得主菜单对象
    var parentmenu = document.getElementById(menuid);
    //创建子菜单容器
    var menuitems = document.createElement(“div”);
    //把子菜单加入页面
    document.getElementById(“menu”).appendChild(menuitems);
    //设置子菜单容器的相应的属性
    menuitems.id = “sub”+menuid;
    menuitems.style.zIndex = 2;
    menuitems.style.padding = 5;
    menuitems.style.backgroundColor=”pink”;
    menuitems.style.position = “absolute”;
    //设置子菜单容器的位置,注意此时的menuitems.style.position必须设为absolute
    menuitems.style.top = parentmenu.style.top + parentmenu.style.height;
    menuitems.style.left = parentmenu.offsetLeft+document.body.offsetLeft;
    //遍历XML文件,向子菜单容器中加载子菜单项
    for(var i=0;i<root.childNodes.length;i++)
    {
    var find = root.childNodes[i];
    if(find.attributes[0].text == menuid)
    {
    for(var j=0;j<find.childNodes.length;j++)
    {
    //创建子菜单项
    var item = document.createElement(“div”);
    item.innerHTML = find.childNodes[j].attributes[1].text;
    item.url = find.childNodes[j].attributes[2].text;
    item.style.padding=5;
    //为子菜单项加入相应的事件(车延禄)
    item.onmouseover=function()
    {
    this.style.backgroundColor=”blue”;
    this.style.color = “yellow”;
    this.style.fontWeight = “bold”;
    };
    item.onmouseout = function()
    {
    this.style.backgroundColor=”pink”;
    this.style.color = “black”;
    this.style.fontWeight = “normal”;
    }
    item.onclick = function()
    {
    window.navigate(this.url);
    }
    //向子菜单容器中加载子菜单项
    menuitems.appendChild(item);
    }
    break;
    }
    }
    }
    </script>

    /////////////////////////////////////////////////////////////////////////////////////////////

    在JS中取得控件的绝对位置

    <div id=Layer1
    style=”border:1px solid; Z-INDEX: 1; VISIBILITY: hidden; POSITION: absolute; BACKGROUND-COLOR: #eeeeee”
    >
    &nbsp;
    dadsadsadsadada
    <INPUT type=”button” value=”确定” onclick=”eee();” style=”border:1px solid; HEIGHT: 20px”>
    &nbsp;
    </div>
    <TABLE
    WIDTH=600
    border=”1″
    cellpadding=”0″
    cellspacing=”0″
    bordercolor=”#eeeeee”>
    <TR>
    <TD >11</TD>
    <TD><a href=”#” onclick=”aaa();”>12</a></TD>
    </TR>
    <TR>
    <TD >21</TD>
    <TD><a href=”#” onclick=”aaa();”>22</a></TD>
    </TR>
    </TABLE>
    <SCRIPT >
    function pit(e)   //对象的绝对位置
    {
    var t = {x:e.offsetLeft,y:e.offsetTop};
    if(e=e.offsetParent)
    {
    var r = pit(e);
    t.x+=r.x;
    t.y+=r.y;
    }
    return t;
    }
    function aaa()
    {

    Layer1.style.visibility=”visible”;
    var e = pit(event.srcElement.parentNode);
    Layer1.style.top=e.y + 40;
    Layer1.style.left=e.x+10;

    }
    function eee()
    {

    Layer1.style.visibility=”hidden”;

    }
    </SCRIPT>

    //

    JavaScript案例精解(一)

    JavaScript案例精解(一)

    http://hi.baidu.com/grayworm/blog/item/6b8d2a595f560f2f2934f04d.html

    初始知识:JavaScript操作XMLDOM对象
    //两种方式创建XML对象
    var doc = new ActiveXObject(“Msxml2.DOMDocument”);
    var doc = new ActiveXObject(“Microsoft.XMLDOM”);//ie5.5+

    //加载文档
    //doc.load(“b.xml”);

    //将XML文档设为同步方式,默认是异步方式
    doc.async = false;

    //创建文件头
    var p = doc.createProcessingInstruction(“xml\”,”version=1.0 encoding=gb2312″);

    //添加文件头
    doc.appendChild(p);

    //用于直接加载时获得根接点
    //var root = doc.documentElement;

    //两种方式创建根接点
    var root = doc.createElement(“students”);
    var root = doc.createNode(1,”students”,””);

    //创建子接点
    var n = doc.createNode(1,”ttyp”,””);
    //添加孙接点
    n.appendChild(o);

    //添加文本接点
    n.appendChild(doc.createTextNode(“this is a text node.”));

    //添加注释
    n.appendChild(doc.createComment(“this is a comment\n”));

    //添加子接点
    root.appendChild(n);

    //复制接点
    var m = n.cloneNode(true);
    root.appendChild(m);

    //删除接点
    root.removeChild(root.childNodes(0));

    //遍历DOM文档
    documentElement 文档根元素的引用
    attributes 节点属性数组
    childNodes 节点子节点数组
    firstChild 第一个子节点引用
    lastChild 最后一个子节点引用
    parentNode 父节点
    nextSibling 下一个邻居节点
    previousSibling 上一个邻居节点
    nodeName 节点名
    nodeType 节点类型
    nodeValue 节点值
    ownerDocument 回到根节点

    一、XML文件内容:
    <?xml version=”1.0″ encoding=”utf-8″ ?>
    <root>
    <prov id=”p001″ name=”山东”>
    <city id=”c001″ name=”济南”></city>
    <city id=”c002″ name=”青岛”></city>
    </prov>
    <prov id=”p002″ name=”辽宁”>
    <city id=”c003″ name=”沈阳”></city>
    <city id=”c004″ name=”大连”></city>
    </prov>
    <prov id=”p003″ name=”江苏”>
    <city id=”c001″ name=”南京”></city>
    <city id=”c002″ name=”苏州”></city>
    </prov>
    </root>

    二、HTML代码:
    <form id=”form1″ runat=”server”>
    <div>
    <asp:DropDownList ID=”listProv” runat=”server”>
    </asp:DropDownList>
    <br />
    <asp:DropDownList ID=”listCity” runat=”server”>
    </asp:DropDownList>
    </div>
    </form>

    三、JavaScript代码:
    <script type=”text/javascript” language=”javascript”>
    var listprov = document.getElementById(“listProv”);
    //创建XMLDOM
    var xmlDoc = new ActiveXObject(“Microsoft.XMLDOM”);
    var root;
    //将XMLDOM文档对象的访问方式设为同步,否则默认是异步方式
    xmlDoc.async = false;
    //加载XML文档对象
    xmlDoc.load(“ProvCity.xml”);
    //取得XML文档对象的根元素
    root = xmlDoc.documentElement;
    //遍历根元素下的直接子接点,加载到省份的下拉列表中
    for (var i=0; i<root.childNodes.length; i++)
    {
    //为省份下拉列表创建option
    var option = document.createElement(“<option>”);
    //设置option的文本
    option.innerText = root.childNodes[i].attributes[1].text;
    //设置option的value值
    option.value = root.childNodes[i].attributes[0].text;
    //向省份下拉列表加载上面的option
    listprov.appendChild(option);
    }

    //加载省份的函数
    function showcity()
    {
    //取得省份下拉列表框对象
    var list = document.getElementById(“listProv”);
    //取得城市下拉列表框对象
    var city = document.getElementById(“listCity”);
    //先清空原有的城市下拉列表项
    var n = city.options.length;
    for(var k=0;k<n;k++)
    {
    city.removeChild(city.options[0]);
    }
    //取得省份下拉列表的value值
    var ss = list.options[list.selectedIndex].value;
    //查询XML相关节点,并加载其元素
    for(var i=0;i<root.childNodes.length;i++)
    {
    //取得选中的省份的value
    var val = root.childNodes[i].attributes[0].text;
    //根据选中省份的value值,定位XML文件的指定元素,并加载相关的子元素
    if(val == ss)
    {
    var node = root.childNodes[i];
    //遍历当前节点的所有的子元素,并加载
    for(var j=0;j<node.childNodes.length;j++)
    {

    var option = document.createElement(“<option>”);
    option.innerText = node.childNodes[j].attributes[1].text;
    option.value = node.childNodes[j].attributes[0].text;
    city.appendChild(option);
    }
    }
    }
    }
    </script>

    JQuery霹雳:六、JQuery UI

    JQuery霹雳:六、JQuery UI

    http://hi.baidu.com/grayworm/blog/item/6c0546f4df4b43e47709d7fe.html

    (原创:灰灰虫的家http://hi.baidu.com/grayworm)
    JQuery UI是利用JQuery开发的一系列的UI小插件(如日历、QQ面版、排序列表等),我们可以直接用它来构建具有很好交互性的web应用程序。这篇文章就是介绍如何使用JQuery UI的,感兴趣的话继续往下看吧^_^:

    一、首先、我们来体验一下JQuery UI能为我们带来什么样的外观效果:
    点击这个网址(http://jqueryui.com/demos/accordion/#fillspace)进入到下面的界面

    《图1》
    在上面的图中可以分成三部份:
    绿色部份:JQuery UI提供的工具类别()。
    灰色部份:该UI工具的效果预览,往下拖动滚动条可以看到调用的源代码。
    蓝色部份:该UI工具可以实现的多种界面效果。
    从上面的页面中,我们可以体验出JQuery UI的炫酷功能,那如何使用它呢。

    二、下载JQuery UI脚本包
    在JQuery主页面上点击上面的“UI”超链接,再在新页面中点击“Download”超链接。

    《图2》
    进入到“脚本包的设置界面”,下面我们通过三步来下载JQuery脚本包。
    第一步:选择需要的组件
    在“脚本包的设置界面”把JQuery组件分成了几个组:core,interations,widgets和effects。有此组件会依于别其它组 件,我们只需要勾选我们需要的组件即可,它会自动替我们选中该组件所依赖的组件。我们选中的这些组件会被打成jquery-ui- 1.7.1.custom.min.js文件,以供下载使用。

    《图3》

    第二步:设置组件主题
    在“脚本包的设置界面”右边我们可以看到一个下拉列表,这个列表中就是插件可选的系统主题样式。当然我们也可自定义插件的样式,这将在后面介绍。

    《图4》

    第三步:选择生成脚本的版本号
    最后一步是择生成脚本的版本号,这是很重要的一步,因为JQuery UI脚本包与JQuery版本是一一对应的,例如:如果JQuery版本号是1.3*,那我们应当选择1.7.2;如果JQuery版本号是1.4.*那应当选择1.8rc1。

    《图5》

    完成上面三步后,我们就可以点击“DownLoad”按钮下载我们需要的JQuery UI脚本包了。

    三、JQuery UI牛刀小试
    上面下载的JQuery UI脚本包是个压缩包,它包含下面的文件结构
    /css/
    /development-bundle/
    /js/
    index.html

    下面我们看看如何在页面上应用JQuery UI脚本包。
    在记事本中打开index.html文件,可以看到在head标记中添加了一些引用。

    《图6》
    一般需要导入三个文件
    1.JQuery UI样式表文件
    2.JQuery脚本库文件
    3.JQuery UI脚本库文件

    这些引用语句就是把JQuery UI脚本包中的内容导入界面中,下面我们就可以在页面中使用JQuery UI中的一些小组件了。
    如使用日历组件,我们只需要在日期文本框的相应事件中调用datepicker()方法就可以了:
    HTML: <input type=”text” name=”date” id=”date” />
    JS: $(‘#date’).datepicker();

    《图8》

    四、自定义JQuery UI
    前面我们能够下载并使JQuery UI的脚本包。如何使脚本包更适合于我们的网站风格,更符合使用的需求呢。下面我们来看看。
    1.使用options参数
    每个JQuery UI插件都有默认的基本设置,它能够满足大部分情况下的需求。如果不想使用插件的默认设置,我们可以使用”options”参数来修改插件的设置。“Options”参数就是传递给JQuery UI插件的一组属性。
    比如:滚动条插件slider就有个参数orientation,用来设置滚动条是水平还是竖直,在使用的时候我们只需要把该参数传递进去就可以了。
    $(‘#mySliderDiv’).slider({
    orientation: ‘vertical’
    });

    当然该滚动条插件的参数不至这一个,还有其它的内容,如:
    $(‘#mySliderDiv’).slider({
    orientation: ‘vertical’,
    min: 0,
    max: 150,
    value: 50
    });

    需要大家记住的是,需要在options参数两边加上花括号{},上面我只是用来说明options参数的作用,如果需要详细了解每个插件中有哪些参数,那需要你去看JQuery UI帮助文档了,可惜的是到目前为止还没有一篇像样的中文文档。

    2.可视化设计JQuery UI的界面主题
    如果你感觉JQuery UI的JS包中的样式不漂亮的话,那我们还可以使用ThemeRoller来定义符合我们需求的插件主题样式。在JQuery UI界面中单击“Themes”连接进入ThemeRoller界面

    《图9》

    《图10》
    ThemeRoller提供了一个自定义插件界面主题的设计器,JQuery UI插件的所有界面样式都可以使用它来自定义。在左侧有JQuery UI插件的各种设置参数,在右边就会显示出其预览效果。
    如果感觉满足你要求的话,那点击左上方的黄色按钮“Download theme”下载该主题的JQuery UI主题包。

    在左侧上面中间有个选项卡“Gallery”,它里面列出了JQuery UI预设的多种样式外观,以日历形式列表显示。我们可以点击各种风格,在右侧预览各插件的效果。如果认为适合的话,就可以点击Download下载该款主题的JQuery UI脚本包

    《图11》

    JQuery UI相关教程:

    《图12》
    英文版。定义45美元,没有money,没买过,更没看过5555555555………………….

    (原创:灰灰虫的家http://hi.baidu.com/grayworm)

    JQuery霹雳:五、Ajax

    JQuery霹雳:五、Ajax

    http://hi.baidu.com/grayworm/blog/item/ca61edefdcfbe21dfcfa3cf7.html

    (原创:灰灰虫的家http://hi.baidu.com/grayworm)
    JQuery提供了一系列的全局方法对XMLHttpRequest对象进行了封装,在进行Ajax开发过程中再也不用担心浏览器客户端的不致性问题了。

    一、$.ajax(options)
    它是最根本的JQuery Ajax方法,它只有一个参数options,该options参数中包含了请求信息和回调函数的信息。参数内容都是key:value对形式出现,并且都是可选的。
    语法:
    $.ajax({options});
    url
    :(string)发送请求的地址,可以是服务器页面也可以是WebService动作。
    type:(string)请求方式,POST或GET
    data:(object)向服务器发送请求时带去的数据。是key:value对形式,如:{name:”grayworm”,sex:”male”},如果是数组{works:[“work1″,”work2”]}
    dataType:(string)预期返回的数据类型。xml,html,json,text等
    beforeSend:(Function)发送ajax请求前被触发,如果返回false则取消本次请求。如果异步请求需要显示gif动画,那应当在这里设置相应<img>的可见。
    function(XMLHttpRequest){ }

    complete:(Function)请求调用完成后的回调函数(请求成功或失败时均调用),如果异步请求显示gif动画,那应当在这里设置相应的<img>不可见。
    function(XMLHttpRequest,textStatus){
    //textStatus是描述返回状态的字符串
    }

    success:(Function)请求执行成功时的回调函数
    function(data,textStatus){
    //data是服务端返回的数据可以是xml、json、text等格式
    //textStatus是描述返回状态的字符串
    }

    error:(Function)请求执行失败时的回调函数
    function(XMLHttpRequest,textStatus,errorThrown){
    //data是服务端返回的数据可以是xml、json、text等格式
    //textStatus,errorThrown是描述返回状态的信息
    }

    应用举例:
    1.向页面发出请求,返回XML格式数据
    页面端代码:

    《图3》
    JQuery代码:

    《图1》

    2.向页面发出请求,返回Json格式数据
    页面端代码:

    《图4》
    JQuery代码:

    《图2》

    3.向WebService发出请求,无参返回简单类型异步调用
    服务端代码:

    《图5》
    JQuery代码:

    《图6》

    4.向WebService发出请求,有参返回简单类型异就调用
    服务端代码:

    《图7》
    JQuery代码:

    《图8》

    5.向WebService发出请求,返回实体对象的异步调用
    服务端代码:

    《图9》
    JQuery代码:

    《图10》

    6.向WebService发出请求,返回集合对象的异步调用
    服务端代码:

    《图11》
    JQuery代码:

    《图12》

    说明:
    WebService请求类型都为Post,WebService的Url为“[WebServiceUrl]/[WebMethod]”
    data要用Json的字符串格式传入
    设置了dataType为json后,result就直接为返回的Json对象。

    二、$.get()和$.post()
    $.ajax()是最基本的Ajax方法,在JQuery中又提供了两个简捷的Ajax调用方法$.get()和$.post(),这两个方法实现了对$.ajax()的封装。有了$.ajax()的基础,下面两个方法学习起来就很简单了。
    1.$.get()
    语法:
    $.get(url [,data] [,callback] [,type])
    url:(string)请求的HTML页的URL地址
    data:(object)发送到服务器的数据,以key/value对形式书写,如:{name:”张三”,age:”18″}
    callback:(function)回调函数,只有返回的状态是success时才调用该方法。
    type:(string)服务端返回的内容的格式。xml,html,json,text等

    2.$.post()
    语法:
    $.post(url [,data] [,callback] [,type])
    url:(string)请求的HTML页的URL地址
    data:(object)发送到服务器的数据,以key/value对形式书写,如:{name:”张三”,age:”18″}
    callback:(function)回调函数,只有返回的状态是success时才调用该方法。
    type:(string)服务端返回的内容的格式。xml,html,json,text等

    $.post()与$.get()很相似,只是数据参数传递方式不一样,这二者与传统的get/post提交方式相同。

    应用举例:
    1.$.get()和$.post()向页面发送异步请求,返回XML数据
    服务端代码:

    《图3》
    JQuery代码:

    《图13》

    2.$.get()和$.post()向页面发送异步请求,返回json数据
    服务端代码:

    《图4》
    JQuery代码:

    《图14》
    3.$.get()和$.post()向WebService发送异步请求

    《图15》:

    三、序列化元素
    如果页面表单元素比较多,在发出ajax请求的时候需要将表单中所有的元素一起发送到服务端,如果还是使用key/value对形式的json语法传递参数的话,那需要在$.get()或$.post()中手写很长的json参数。
    在JQuery中为我们提供了序列化的方式来解决这个问题,序列化的方法是serialize()
    示例代码:

    《图16》

    《图17》

    (原创:灰灰虫的家http://hi.baidu.com/grayworm)