网站开发日志

2009年10月22日星期四

jTester 简单的jQuery测试工具

今天做了一个简单的jQuery测试工具,把它命名为jTester。Google了一下好像这个名字已经有好多人在用,应该没有什么命名侵权的问题吧。:-)

做这个测试工具的原因是,我经常要测试一些jQuery代码,每次都要建立一个新文件,然后还要在header里引用jQuery库,觉得挺麻烦的。现在有了这个工具,我只要在文本框里直接写入HTML正文部分(包括HTML代码和jQuery代码),然后点击按钮就可以查看结果了。

我写的jQuery基础系列文章里有很多jQuery代码片段,初学jQuery的朋友可以把代码直接粘贴到jQuery Tester里,然后进行修改和测试。

这个测试工具是根据著名W3SCHOOLS在线测试工具修改而来,目前功能很简单,准备在今后加入一些新功能,例如:

  1. 可以选择不同的jQuery版本
  2. 语法加亮
  3. 显示错误信息
  4. ...

有兴趣的朋友可以试试看,如果你觉得好用,请推荐给你的朋友;如果你有任何意见或者建议,请留言。谢谢!

请点击这里进入工具

标签: ,

2009年10月5日星期一

JavaScript在IE6下报错'expected identifier, string or number'

最近一段时间在项目开发里用了许多jQuery的插件,有机会一定在本日志里写一些心得。今天不准备介绍jQuery插件,而是要介绍我在使用jQuery表单插件时碰到的一个问题。jQuery表单插件应该算是家喻户晓的jQury插件,我过去一直没有用它,因为jQuery插件一般体积都挺大的,如果只是需要一些简单的功能,我一般都是自己写。比如jQuery表单的处理,我在日志里介绍过,一般情况下懂的这些基本概念,就可以完成大部分任务了。但是这次的情况比较特别,自己写比较麻烦,而且一定不如jQuery表单插件有效率。

我把下列代码加入我的HTML模板文件:

<script type="text/javascript">
$(document).ready(function() {
    var options = {
        target: '.content',
        //beforeSubmit:  showRequest,  // pre-submit callback 
        //success:       showResponse  // post-submit callback 
    };
    // bind to the form's submit event
    $('#bill_addr_form').submit(function() {
        $(this).ajaxSubmit(options);
        return false;
    });
});
</script>

我把选项(options)里的beforeSubmit 和success注释掉,代码在Forefox和IE8下工作正常,但是在IE6下报错:

expected identifier, string or number

上网搜了一下,发现这只是一个很低级的错误。如果变量options有多个选项,那么我们可以用逗号分开;但是最后一个选项后不可以有逗号。虽然IE8和Firefox可以忽略这个逗号,但是IE6下会报错(据说IE7下也会报错)

解决方法很简单,把多余的逗号删除就可以了。

var options = {
        target: '.content' //注意不可以加逗号
    };

标签: ,

2009年7月26日星期日

json问题

今天在给我的cpzhan.com写一个很小的API,主要是在服务器端提供一组数据,如果按照往常我会使用XML,但是最近在学习json,所以就json来试试。按照我上篇日志的介绍,代码如下:

<?php
require("../lib/config.inc.php");
require("../lib/Database.class.php");
$db = new Database($config['server'], $config['user'], $config['pass'], $config['database'], $config['tablePrefix']);
// connect to the server
$db->connect();  
$sql = "SELECT * FROM results ORDER BY UID DESC LIMIT 1";  
$row = $db->query_first($sql);
$current_year = date('Y');
$year = $row['Year'];
$row['Next_Term'] = ($current_year == $year) ? ($row['Term'] + 1) : 1;
$row['Next_Year'] = $current_year;
$row['Next_DRAW_DATE'] = date('Y-m-d');
//上面的代码产生一组数组,然后用json_encode($row)产生json格式的字符串
echo json_encode($row);
?>

接下来,我在本地又写了一段代码,准备用来掉用上面写好的api,然后用json_decode, 把数组还原。

<?php
$url = 'http://www.cpzhan.com/api/getTerm.php';
$jsonfeed = file_get_contents($url);
echo $jsonfeed;
//这里我收到到了json格式的字符串
$result = json_decode($jsonfeed, true);
print_r ($result);
//!!!但是这里无法还原编码前的数组
?>

不知道什么原因,json_decode无法还原编码前的数组。很明显,我上面写的api输出的字符串无法被json_decode识别,但是API的输出看上去的确是合法的json格式。我还试着给api的输出加上header如下, 終于找到原因了, 見netbean-ide一文的介绍)

<?php
ini_set('display_errors', 0);
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT" ); 
header("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" ); 
header("Cache-Control: no-cache, must-revalidate" ); 
header("Pragma: no-cache" );
header("Content-type: application/json; charset=utf-8");
.....

但是还是没有起任何作用。最后我放弃了这种方法,改用我曾经介绍过的jQuery获取JSON数据的方法:

<script>
   $.getJSON("http://www.cpzhan.com/api/getTerm.php?callback=?",
   function(data){//data这里是JSON对象,它可以是由多个JSON对象组成
      $("#year").val(data.Next_Year);
      $("#term").val(data.Next_Term);
      $("#date").val(data.Next_DRAW_DATE);
   });
</script>

一开始,我收到错误信息:invalid label,上网搜索了一下终于找到了原因,原来jQuery在调用getJSON的时候会在callback后自动加上值,因此我的产生JSON数据的时候要加上callback, 并且要用大括号把encode后的JSON数据包裹。如下:

<?php
ini_set('display_errors', 0);
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT" ); 
header("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" ); 
header("Cache-Control: no-cache, must-revalidate" ); 
header("Pragma: no-cache" );
header("Content-type: application/json; charset=utf-8");
//$row是要传递的数组
$jsonp = $_GET['callback']; //callback的是jquery自动加入的
$myJSON = json_encode($row);
echo $jsonp. '(' . $myJSON . ')'; //注意:json_encode的结果被大括号包裹

至于为什么要这么做我还没有搞懂(可能是出于安全的考虑),但是我想这很可能是我上面用PHP获取JSON数据失败的原因,我们必须对API的输出做特殊处理后,json_decode才可以识别。如果有朋友对JSON精通,请留言告知。谢谢!

标签: ,

2009年6月10日星期三

jQuery + CSS 制作上下滑动卷页

有网友问:

博客)左下角那个点击可以上下滑动是怎么制作的。

我在日志里曾经介绍过jQuery 动画卷页。这个特效就是采用类似的jQuery代码,不同的是多了一些CSS代码。下面我将简单介绍如何制作这个特效。

1.html代码

<div id="footerud">
  <div id="up"></div>
  <div id="down"></div>
</div>

注意:你可以把这段代码放在<body>和</body>之间的适当位置,例如:</body>前。

2. css代码

#footerud{
  bottom:10px;display:block;position:fixed;left:15px;
}
#up{
  background:url(../images/arrowtop.png) no-repeat;
  cursor:pointer;height:14px;margin-bottom:15px;
  position:relative;width:25px;
}
#down{
  background:url(../images/arrowbottom.png) no-repeat;
  cursor:pointer;height:60px;margin-top:15px;
  position:relative;width:25px;
}

#up和#down里定义了背景图(也就是上下箭头),你可以用你喜爱的图片代替,我这两个也是网上找到。注意:../images/指定了图片相对CSS文件的路径,你可能要根据你的实际情况更改。

3. jQuery代码:

jQuery(document).ready(function() {
  jQuery('#up').click(function(){
    if(jQuery.browser.safari) {//这里判断浏览器是否为safari
      jQuery('body').animate({scrollTop:0}, 'slow');
      return false;//返回false可以避免在原链接后加上#
    }
    else{
      jQuery('html').animate({scrollTop:0}, 'slow');
      return false;
    }
  });
   jQuery('#down').click(function(){
    if(jQuery.browser.safari) {//这里判断浏览器是否为safari
      jQuery('body').animate({scrollTop:jQuery('#footerPan').offset().top}, 'slow');
      return false;//返回false可以避免在原链接后加上#
    }
    else{
      jQuery('html').animate({scrollTop:jQuery('#footerPan').offset().top}, 'slow');
      return false;
    }
  });
});

这个在jQuery 动画卷页一文里有介绍,如有不明白的地方请留言。注意:向上翻页比较简单,用scrollTop:0就可以了,但是向下翻页,必须指明你的页面最底部HTML元素,例如:我用到 scrollTop:jQuery('#footerPan').offset().top. 这里#footerPan就是我博客页面底部HTML元素的ID。

标签: ,

2009年4月6日星期一

jQuery 制作迷你背词汇工具

jQuery提供的Load的函数可能可以说是实现ajax功能的最轻巧的方法。我在博客里介绍了很多,请参考这些文章。今天我要介绍的是load()函数的一个实际运用,希望你读完以后会觉得它很简单、而且很实用。下面是一个类似金山词霸里背单词的小工具,它和滚动文字(图片)的效果差不多,但是用到的是ajax功能,也就是涉及到服务器端的脚本的执行。

loading ...

首先我创建的一个文本文件包含有我要背诵的英文词汇,然后是下面的PHP代码,用来读取词汇,并且随机返回一个词汇。

<?php
$buffer = array();
$handle = @fopen("toefl_listen.txt", "r");
if ($handle) {
    while (!feof($handle)) {
        array_push ($buffer, fgets($handle, 4096));
    }
    fclose($handle);
}
echo $buffer[array_rand($buffer)];
?>

最后是通过下面的Javascript脚本加上一点Ajax技术,调用服务器端的PHP代码,并把返回结果在特定DIV里显示。因为是循环播放,所以我用到了setInterval()函数。此外还使用clearInterval()函数,实现鼠标滑过 - 暂定播放的功能。

<script>
  $(document).ready(function()
  {
   //没隔3秒调用服务器端的php文件
   var refreshId = setInterval(function()
   {
    $('#timeval').load('reflesh.php');
   }, 3000);
   //鼠标滑过 - 暂停播放
   $("#timeval").mouseover(function()
   {
      clearInterval(refreshId);
   });
   $("#timeval").mouseout(function(){
      refreshId = setInterval(function()
      {
      $('#timeval').load('reflesh.php');
      }, 3000);
   });
  });
</script>
我觉得上面介绍的间隔一定时间调用服务器的代码,其扩展性还是挺大的。我这里只是使用它来读取一个简单的文本文件,你还可以用它来调用数据库,来实现对某个数据的实时更新。

标签: , ,

2009年3月22日星期日

document.ready还是不够快

我曾经在日志里介绍过jQuery的document.ready:

document.ready()和传统的方法<body onload=”load()”> 相似,不同的是onload()的方法是在页面加载完成后才发生,这包括DOM元素和其他页面元素(例如图片)的加载,因此,使用document.ready()方法的执行速度比onload()的方法要快。

document.ready()可以说是jQuery的一大特色,它不仅比传统的Javascript函数onload()要快,而且加上jQuery强大的选择器可以在不用修改HTML代码情况下(例如:不用在HTML标签加入onClick()函数来调用其它自定义Javascript函数)对Web页面中的各种元素和事件进行控制、实现和Web客户交互的作用。

可是有时document.ready()并非你想像的那么快,我在最近的一个project里就碰到这个问题。例如一个页面含有多个相似的链接,每一个链接的HTML代码大致如下:

<a rel="popin" href="/cart/?popin=yes&act=add&sku=xxx">
  <img src="/images/new/buynow.gif" border="0" />
</a> 

当这些链接被点击后,相对应的物品(sku)就会被加入购物篮,为让客户点击链接后不用离开当前页面,我使用了jQuery的ajax方法,从后台调用添加购物篮函数,然后返回xml响应,最后把xml携带的信息通过HTML层(layer)传递给客户。大致的jQuery+ajax代码如下:

$(document).ready(function(){
  $("a[rel^='popin']").click(function(){
    $.ajax({
      url: $(this).attr('href'),
      type: 'GET',
      dataType: 'xml',
      error: function(){
      alert('Error loading XML document');
    },
    success: function(xml){
      $('#cart_sum1').html($(xml).find('cart').text());
      $('#buynow-result').html($(xml).find('pop').text());
      $('#buynow-inform').show('slow');
      $('#cart_sum2').html($(xml).find('cart').text());        
    }
    });
    return false;
  });
});    

注意到我用了document.ready,试图在DOM ready的时候给这些链接(<a[rel^='popin'>)绑定点击事件控制。这在我的机子(windowxp+firefox3)里测试通过,但是在我老板的机子(redhat+firefox)上,有时会出现点击链接后跳出XML代码,原因很明显: 当她点击链接的时候,链接还没有被绑定事件控制,也就是说document.reday()还是不够快。

怎么解决?我有打算在链接代码里加入传统Javscript的onClick函数,这样当客户点击链接的时候,先调用onClick函数,然后在onClick函数里在调用ajax,应该就可以解决问题。今天想看看别人都是怎么解决这个问题,就用Google搜索了一下。找到这篇论坛问答,觉得说的挺有道理:

  • Using window.onload waits until the whole page is loaded.  (onload是在页面加载后起作用)
  • Using document.ready waits until the whole DOM is ready (document.ready是在DOM 准备好后起作用)
  • Having the script at the end of the body without document.ready, that doesn't wait. (把去掉document.ready的jQuery代码放在</body>前,无需等待)

准备明天到公司试试这种方法。其实把Javascript放在</body>前的说法以前也有看到过,Google的Analytics代码就建议放在</body>前。

Updated:(3/24/08)

经测试,第三种方法也不好用,主要问题是在页面没有完全加载完毕时,链接就已经被点击,这时</body>前的那一段jQuery代码还没有被加载,因此链接还没有被绑定ajax事件控制。

最终的解决办法是,把上面那段jQuery代码写出一个函数,反正header里,然后结合传统Javascript onClick函数,在链接被点击时直接调用header里函数。具体更改如下:

1. jQuery函数 (这段函数被放在header里)

function ajax_add(url_str){//把jquery代码写成一个函数
   $.ajax({
     url: url_str,
     type: 'GET',
     dataType: 'xml',
     //timeout: 5000,
     error: function(){
       alert('Error loading XML document');
     },
     success: function(xml){
       $('#cart_sum1').html($(xml).find('cart').text());
       $('#buynow-result').html($(xml).find('pop').text());
       $('#buynow-inform').show('slow');
       $('#cart_sum2').html($(xml).find('cart').text());
     }
   });
}

2. 链接代码:

<a onClick="add_ajax('/cart/?popin=yes&act=add&sku=xxx')" href="#">
  <img src="/images/new/buynow.gif" border="0" />
</a> 
注意:链接直接加入onClick事件控制,而不在页面加载后绑定事件控制。这样就可以避免链接被点击时,事件还没有绑定的问题。

标签: ,

2009年3月16日星期一

使用jQuery+jSon+delicious创建'相关文章'

我的日志引擎使用的是Google的Blooger,然后FTP到61dh.com的所属服务器。所有页面都是HTML,没有使用数据库。因此和Wordpress相比之下,功能要少了很多。但是每次发布新文章,我都会把文章的加到delicious(美味书签)。这么一来,借助delicous提供的扩展接口,我给日志添加了一些功能。我在日志里曾经介绍过,如何使用美味书签创建日志分类。昨天我又给日志添加了'相关文章'的功能,这次使用到的是delicious提供的JSON Feeds。

通过http://feeds.delicious.com/v2/json/61dh,可以得到61dh.com的最新15个日志的Feeds ,Delicious提供的JSON Feed不仅仅是罗列保存的书签链接,而且还可以输出具有相同标签的链接。因此只要根据一篇日志的标签信息,就可以找出具有相同标签的帖子信息了。例如:通过http://feeds.delicious.com/v2/json/61dh/css+html 可以找出标签是css和html的文章链接。 Feeds输出是JSON格式,大致如下:

[
{"u":"http:\/\/www.61dh.com\/blog\/2009\/03\/jquery-ajax-xml.html",
 "d":"jQuery ajax - \u5982\u4f55\u4f7f\u7528XML",
 "t":["jQuery","PHP","ajax"],
 "dt":"2009-03-09T03:14:29Z",
 "n":"",
 "a":"61dh"
},
{...}, //第二篇文章
... //第三、第四...
]

上面,我只列出一个完整文章的JSON对象格式,很显然不同的JSON Feed有着不同的Object Attributes。在Delicious提供的JSON feed里,每个Object包含有6个属性:

  • 1. u - 链接URL,在这里代表每一篇日志的永久地址
  • 2. d - 链接名称,在这里代表日志的标题
  • 3. t - 链接标签,在这里代表日志的标签
  • 3. dt - 链接代表加入时间
  • 4. n - 链接注释,在这里是空白
  • 5. a - 书签的所有者, 这里是61dh

知道了JSON的输出格式后,就可以使用jQuery的getJSON()方法来处理输出结果。这里我们感兴趣的是相关文章的地址和标题,也就是u和d。jQuery代码如下:

$.getJSON("http://feeds.delicious.com/v2/json/61dh/CSS+HTML+Jquery?callback=?",
  function(data){//data这里是JSON对象,它可以是由多个JSON对象组成
    $.each(data, function(i,item){//每一个对象包含有一个日志的信息
      //item.u 就是日志的地址;item.d就是日志的标题
      $('<a href='+item.u+'>'+item.d+'</a><br />').appendTo("#related-post");
        if ( i == 8 ) return false; //默认下,JSON feed 提供15个链接,这里我只取8个
      });
  });

注意:.getJSON的第一个变量是可以提供JSON格式输出的URL,URL的参数要根据实际情况而定,delicious提供的JSON,使用callback作为参数名:callback=?, jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。

上面的代码可以把标签为CSS、HTML和jQuery的文章链接找出,但是就这么写还不行,相对一篇文章,我们要自动找出该文章的所属的标签,然后动态的加入到JSON URL上。另外还有考虑找不到结果(标签有误) 和只有一个结果(找到文章本身)的情况。所以完整的代码如下:

 <script type="text/javascript">    
  //改函数用于判断JSON object所包含的子object个数
  function getOnum(object) {
    var num = 0;
    for(var i in object) { num ++; }
    return num;
  }
  $(document).ready(function(){
    var cat ="";
    $(".blogger-labels a[rel='tag']").each(function(){ //找出标签的名称
      cat += $(this).text() + '+'; //标签用+分隔
    });
    cat = cat.slice(0,-1); //去掉最后一个‘+’号
    
  $.getJSON("http://feeds.delicious.com/v2/json/61dh/"+cat+"?callback=?",
  function(data){
    var Onum = getOnum (data); 
    if ((Onum == 0) || (Onum == 1)) //结果为0或者1
      $('<p>找不到相关文章</p>').appendTo("#related-post");
    else{ //结果 > 1
      $('<ul>').appendTo("#related-post");
      $.each(data, function(i,item){
      $('<li><a href='+item.u+'>'+item.d+'</a></li>').appendTo("#related-post");
      if ( i == 8 ) return false;
      });
      $('</ul>').appendTo("#related-post");
    }
  });
});
</script>
<div id="related-post">
  <h4>相关文章: </h4>
</div> 

除了getJSON,上面的代码里还有一些小知识点:

  • 1. 如何判断Object是否为空: getOnum()函数
  • 2. jQuery selector - 选择所有class name 为blogger-labels区内的rel属性为tag的<a>: $(".blogger-labels a[rel='tag']") -
  • 3. 去除字符串的最后一个字符:cat = cat.slice(0,-1);
  • 4. 往一个HTML元素里添加加HTML代码:appendTo("#related-post")

标签: , ,

2009年3月15日星期日

jQuery对表单处理的三个实例

我花了整整一个星期时间,更新了公司网站的购物结帐系统。主要增加的功能是允许用户在多个Billing Address(或者Shipping Address)进行选择和编辑,所有这些功能都是在同一个页面完成。我运用了jQuery代码进行ajax调用和表单处理。在这篇文章里我准备介绍三个jQuery对表单元素处理的实际运用,和我在jQuery基础里提到的 - 处理表单元素相比,这些运用要相对灵活一点。

1. 清空表单元素

使用传统Javascript提供的reset()方法可以把表单所有元素重设为初始值(或者默认值),但是有时reset()并非你要的,比如说,表单的初始值使用的是预设值(非空),或者你只是想清空特定表单元素,这时候使用reset()就行不通了。

HTML表单代码

<form>
  First name: <input type="text" name="firstname" value="Adam"> <br />
  Last name: <input type="text" name="lastname" value="Cai"> <br />
  Accoutn ID: <input type="text" name="acc_id" value ="123">
</form>

使用以下jQuery代码,可以清空所有类型为'text'的input表单控件,但是除了name为'acc_id'的input;并且把name=acc_id的输入框设置为0

$("input[type='text']").each(function(){
  if (this.name != 'acc_id') $(this).val("");
  else $(this).val("0");
});

2. 下拉框的选择/清除选择

HTML下拉框代码:

<form action="">
  <select name="cars">
    <option value="0">前选择车的牌子</option>
    <option value="volvo">沃尔沃</option>
    <option value="honda">本田</option>
    <option value="toyota">丰田</option>
    <option value="audi">奥迪</option>
  </select>
</form>

如果每个选项(option)都没有属性'selected',那么第一选项将被选中。使用下面的jQuery代码,可以先选中本田,接下来,如果要选择丰田,可以先清除选择,然后使用同样的方法进行再选。

$("select[name='cars'] option[value='toyota']").attr("selected","selected"); 
//接下来,如果要选择丰田,可以先清除选择,然后使用同样的方法进行选择
$("select[name='cars'] :selected").removeAttr("selected");
$("select[name='cars'] option[value='honda']").attr("selected","selected"); 

另外我们还可以使用传统的Javascript选择方法:selectedIndex,要注意:下拉框的选项索引(index)是从0开始,因此在上述表单里,selectedIndex=2 - 代表本田车被选中。具体写法如下:

document.form[0].cars.selectedIndex = 2; //选择本田车
//这里用form[0],代表页面的第一个form,如果FORM有特定的名字,那么可以使用form的名字代替
//例如 form的名为:myCar,
document.myCar.cars.selectedIndex = 0; //恢复默认值

3.选择单选框(radio)和复选框(checkbox)

不论是单选框还是复选框,我们都可以使用checked的属性,设置值为true代表选择;设置值为false代表反选择。

HTML代码:

<input type="checkbox" name="fruit" value ="apple">苹果<br>
<input type="checkbox" name="fruit" value ="orange">桔子<br>
<input type="checkbox" name="fruit" value ="mango">芒果<br>

使用下面的jQuery代码,可以把桔子选中。

$("input[type='checkbox']").each(function(){
  if ($(this).val() == 'orange')
  $(this).attr('checked', true);
});

标签: ,

2009年3月9日星期一

jQuery ajax - 如何使用XML

我在日志里介绍了很多使用jQuey load的方法来实现ajax。load()应该是jQuery里ajax的最简单的运用了,你不用了解ajax是怎么一回事,就可以把某个脚本的输出(通常是text/html类型)动态的赋给页面的某个元素(例如div和p)。但是在实际的运用中,你可能会发现load()常常不能满足要求,例如:你想对一个表单的多个控件使用ajax进行更新,可是load()一次只可以对其中一个控件起作用;如果使用多个load(),那么会增加服务器的负荷,因此肯定不是一个好办法。本文要介绍jQuery的ajax()方法,它是类似传统的ajax方法。jQuery的ajax()方法涉及的知识点很多,具体可以参考jQuery中文参考文档。这里要介绍的是如何使用XML数据类型以及如何对XML进行读取。

1.使用PHP输出XML,如果你只是使用echo,那么要注意要先输出正确的header: Content-Type是text/xml。如果你要给XML的某个节点用HTML代码赋值,你必须把HTML放在<![CDATA[" 和"]]>之间。例子如下: genXML.php

<?php
echo "header("Content-Type: text/xml; charset=UTF-8");";
echo <<< XML
<?xml version="1.0" encoding="UTF-8"?>
<rsp>
  <name>Adam</name>
  <site>http://www.61dh.com</site>
  <note>
    <![CDATA[ 
      HTML代码可以放在这里
    ]]>
  </note>
</rsp>
XML;
?>

2. HTML样本:

<div id="name"></div>
<div id="note"></div>

3.接下来我们要使用jQuery的ajax()方法,读取genXML.php的输出(xml),然后把相关节点的内容赋给HTML元素:#name和#node。代码如下:

$.ajax({ 
  url: "genXML.php", //本例中,url为genXML.php
  type: 'GET', //根据实际情况,可以是'POST'或者'GET'
  //data: "name=adam&location=61dh",本例中没有用到data
  dataType: 'xml', //指定数据类型
  timeout: 1000, //设置超时1000 = 1秒
  error: function(){ 
    alert('Error loading XML document'); }, //错误提示
  success: function(xml){ //ajax请求成功后 do something with xml
    //把XML的相关节点值赋给HTML里相关ID
    $('#name').html($(xml).find('name').text()); 
    $('#note').html($(xml).find('note').text());
  }
});

我在上面的代码里已经做了比较详细地注释,值得再提的是使用jQuery提供find()的方法可以很简单的读取XML某个节点的值,例如:$(xml).find('name').text(); //读取节点name;然后使用html()的方法赋值给HTML里的某个元素。

注: 我在日志里写了很多有关jQuery的文章而且还挺受欢迎:-),所以我把它专门作为一个菜单放在上方导航条里。希望这些文章对jQuery初学者有所帮助。如果你有任何的问题和建议,请给我留言或者发Email。谢谢!

标签: , ,

2009年3月1日星期日

CSS 信息框

信息框在网站开发中比较常用,它可以用来引起网站访问者的注意;并且用来转递某种信息。例如Google的个性化主页iGoogle,有时会有一个信息框停靠在页面上方的中部,用来提示用户他们新增了一些功能。信息根据其传递内容的不同大致可以分为3种:

  • 1. 成功提示 (success) - 通常用绿色来表示
  • 2. 错误提示 (error) - 通常用红色来表示
  • 3. 通知提示 (notice) - 通常用黄色来表示

哈哈,是不是和交通灯很相似啊。这里要介绍的两套CSS/HTML信息框,或许它们可以用在你的Project里。

一. 横条型 演示

HTML 代码:

<div class="message notice">
  <div class="msg_head_img">
    <a class="close" href="#"><img src="/images/close.gif" border="0"/></a>
  </div>  
  通知提示信息<!--请用实际信息替代-->
</div>
<br />
<div class="message success">
  <div class="msg_head_img">
    <a class="close" href="#"><img src="/images/close.gif" border="0"/></a>
  </div>
  成功提示信息
</div>
<br />
<div class="message error">
  <div class="msg_head_img">
    <a class="close" href="#"><img src="/images/close.gif" border="0"/></a>
  </div>
  错误提示信息
</div>

上面的三段HTML代码分别用于显示通知、成功、错误信息。主要的CSS样式有:message、notice、sucess、error。message是共用的,其它三种分别代表不同的信息类型。具体样式表如下:

.message {
  padding: 5px;
  border: 2px solid #ddd;
  background-color: #eee;
  color: #222;
  font-size:12px;
}
.notice {
  background: #FFF6BF;
  color: #817134;
  border-color: #FFD324;
}
.success {
  background: #E6EFC2;
  color: #529214;
  border-color: #C6D880;
}
 
.error {
  background: #FBE3E4;
  color: #D12F19;
  border-color: #FBC2C4;
}

二. 框框型 演示

HTML 代码:

<div class="msg_h yellow1">
  <div class="msg_head_img">
  <a class="close" href="#"><img src="/images/close.gif" border="0"/></a>
  </div>
   <div class="msg_head_txt yellow2" >
      信息标题
  </div>
  <div class="msg_body">
     通知提示信息
  </div>
</div>
<br />
<div class="msg_h green1">
  <div class="msg_head_img">
  <a class="close " href="#"><img src="/images/close.gif" border="0"/></a> 
</div>
   <div class="msg_head_txt green2" >
      信息标题
  </div>
  <div class="msg_body">
     成功提示信息
  </div>
</div>
<br />
<div class="msg_h red1">
  <div class="msg_head_img">
  <a class="close " href="#"><img src="/images/close.gif" border="0"/></a> 
  </div>
   <div class="msg_head_txt red2" >
      信息标题
  </div>
  <div class="msg_body">
     错误提示信息
  </div>
</div>

和第一套CSS信息框不同的是,这一套包含有标题栏。CSS样式同样包含有共用的class和各自的class,具体如下:

.msg_h{border:2px solid; height:auto; width:300px;}
.msg_head_img{float:right; display:inline; padding-top:3px;}
.msg_head_txt{padding:5px; font-size:12px; font-weight:normal;}
.msg_body{padding:10px;}
.yellow1{border-color: #FFD324;}
.yellow2{background:#FFD324; color:#817134;}
.green1{border-color: #C6D880;}
.green2{background:#C6D880; color:#529214;}
.red1{border-color: #FBC2C4;}
.red2{background:#FBC2C4; color:#D12F19;}

你可能注意到在这两套CSS信息框里都用到了以下HTML代码:

<div class="msg_head_img">
  <a class="close" href="#"><img src="/images/close.gif" border="0"/></a>
</div>

这段HTML代码提供了一个可点击的图标,目的是让用户可以自由地关闭信息框。其实这可以根据实际情况改变,如果你想让信息框一直显示,那么你可以把<a>元素去掉,另外还可以换上其它小图标用于装饰。如果你想提供关闭信息框的功能,那么只要使用下面的jQuery语句就可以轻松实现:

<script type="text/javascript">
  $(document).ready(function(){
    $(".close").click(function(){
      $(this).parent().parent().fadeOut('slow');
    });
  });
</script>
演示和代码

标签: , ,