2009年10月22日星期四
今天做了一个简单的jQuery测试工具，把它命名为jTester。Google了一下好像这个名字已经有好多人在用，应该没有什么命名侵权的问题吧。:-)
做这个测试工具的原因是，我经常要测试一些jQuery代码，每次都要建立一个新文件，然后还要在header里引用jQuery库，觉得挺麻烦的。现在有了这个工具，我只要在文本框里直接写入HTML正文部分(包括HTML代码和jQuery代码)，然后点击按钮就可以查看结果了。
我写的jQuery基础系列文章里有很多jQuery代码片段，初学jQuery的朋友可以把代码直接粘贴到jQuery Tester里，然后进行修改和测试。
这个测试工具是根据著名W3SCHOOLS在线测试工具修改而来，目前功能很简单，准备在今后加入一些新功能，例如：
有兴趣的朋友可以试试看，如果你觉得好用，请推荐给你的朋友；如果你有任何意见或者建议，请留言。谢谢！
2009年10月5日星期一
最近一段时间在项目开发里用了许多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' //注意不可以加逗号};
标签： Javascript, Jquery
2009年7月26日星期日
今天在给我的cpzhan.com写一个很小的API，主要是在服务器端提供一组数据，如果按照往常我会使用XML，但是最近在学习json，所以就json来试试。按照我上篇日志的介绍，代码如下：
<?phprequire("../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一文的介绍)
<?phpini_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数据包裹。如下：
<?phpini_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 动画卷页。这个特效就是采用类似的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) {//这里判断浏览器是否为safarijQuery('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) {//这里判断浏览器是否为safarijQuery('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提供的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>
标签： Javascript, Jquery, PHP
2009年3月22日星期日
我曾经在日志里介绍过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搜索了一下。找到这篇论坛问答，觉得说的挺有道理：
准备明天到公司试试这种方法。其实把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事件控制，而不在页面加载后绑定事件控制。这样就可以避免链接被点击时，事件还没有绑定的问题。 标签： Javascript, Jquery
2009年3月16日星期一
我的日志引擎使用的是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个属性：
知道了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，上面的代码里还有一些小知识点：
标签： Ajax, Javascript, Jquery
2009年3月15日星期日
我花了整整一个星期时间，更新了公司网站的购物结帐系统。主要增加的功能是允许用户在多个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);});
标签： Javascript, Jquery
2009年3月9日星期一
我在日志里介绍了很多使用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
<?phpecho "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.phptype: 'GET', //根据实际情况，可以是'POST'或者'GET'//data: "name=adam&location=61dh",本例中没有用到datadataType: '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日星期日
信息框在网站开发中比较常用，它可以用来引起网站访问者的注意；并且用来转递某种信息。例如Google的个性化主页iGoogle，有时会有一个信息框停靠在页面上方的中部，用来提示用户他们新增了一些功能。信息根据其传递内容的不同大致可以分为3种:
哈哈，是不是和交通灯很相似啊。这里要介绍的两套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>
61DH.COM® 2008, All right reserved.
闽ICP备08101444号
