时光博客 - WEB开发中的可用性和用户体验
分类: HTML/CSS/JS

jQuery的load函数

Posted by Kevin | Filed under HTML/CSS/JS | 2010-09-25

jquery的load函数，有2种载入方式，一种是GET，一种是POST，下面我们看下手册中记载的说明。

在每一个匹配元素的load事件中绑定一个处理函数。

如果绑定给window对象，则会在所有内容加载后触发，包括窗口，框架，对象和图像。如果绑定在元素上，则当元素的内容加载完毕后触发。

注意:只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。所以不要在$(document).ready()里绑定load事件，因为jQuery会在所有DOM加载完成后再绑定load事件。

再来看下关于jQuery的函数介绍

  1. load(url, [data], [callback]) 
  2. url  String  待装入 HTML 网页网址。 
  3. data (可选) Map,String  发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。 
  4. callback (可选) Callback  载入成功时回调函数。 

data数据是可选取的，如果不填写data数据，jQuery则采用GET方式来请求指定的网页，如果填写了，则采用POST方式，同时将参数data传递给页面。

下面看下jQuery 1.4.2里面关于load函数原型的代码：

  1. load: function( url, params, callback ) { 
  2.         if ( typeof url !== "string" ) { 
  3.             return _load.call( this, url ); 
  4.  
  5.         // Don't do a request if no elements are being requested 
  6.         } else if ( !this.length ) { 
  7.             return this; 
  8.         } 
  9.  
  10.         var off = url.indexOf(" "); 
  11.         if ( off >= 0 ) { 
  12.             var selector = url.slice(off, url.length); 
  13.             url = url.slice(0, off); 
  14.         } 
  15.  
  16.         //默认为使用GET方式请求页面 
  17.         var type = "GET"; 
  18.  
  19.         // 如果有data参数，检测是否为函数 
  20.         if ( params ) { 
  21.             // If it's a function 
  22.             if ( jQuery.isFunction( params ) ) { 
  23.                 // We assume that it's the callback 
  24.                 callback = params; 
  25.                 params = null; 
  26.  
  27.             // 不是函数，则构建成一个字符串 
  28.             } else if ( typeof params === "object" ) { 
  29.                 params = jQuery.param( params, jQuery.ajaxSettings.traditional ); 
  30.                 //使用POST方式传递参数 
  31.                 type = "POST"; 
  32.             } 
  33. } 

也就是我们在处理url页面时，含data参数的时候，比如：ID=1233，USERID=liupeng 我们应该使用$_POST变量来接受，没有data参数的时候使用$_GET。

4764 次阅读，沙发空缺中...   |  Tags: jquery, load

IE6遮罩层select的BUG

Posted by Kevin | Filed under HTML/CSS/JS | 2010-08-29

ie6的BUG太多，其中一个就是遮罩层（div）遮不住select框，而IE7以上版本是没有此问题的。现在来重现一个bug。点击查看演示页面

截图03.jpg 大小: 45.82 K 尺寸: 500 x 183 浏览: 371 次 点击打开新窗口浏览全图

下图为 > IE7 效果：

截图02.jpg 大小: 45.93 K 尺寸: 500 x 175 浏览: 277 次 点击打开新窗口浏览全图

遮罩层在IE下面，是遮不住select下拉选择器的。于是采用一个特殊的方法：

虽说div直接盖不住select但是div可以盖iframe，而iframe可以盖select,所以，把一个iframe来当作div的底，这个div就可以盖住select了.

当使用了iframe后发现，弹出界面是透明白色的，而不是想象中的透明黑色，于是在src中加入一个透明网页：

  1. <html> 
  2.     <head> 
  3.         <title></title> 
  4.     </head> 
  5.     <body style="background-color:#000;"></body> 
  6. </html> 

最后的遮罩层div代码如下：

  1. <div id="overlay"> 
  2.     <iframe style="width:100%;height:100%;position:absolute;visibility:inherit;z-index:-1;" src="touming.html" frameborder="0"></iframe> 
  3. </div> 

问题虽然解决了，但是还是不完美，因为遮罩层显示的时候，虽然遮罩层盖住了select，但是如此同时select也消失不见了 = = ！

截图04.jpg 大小: 38.59 K 尺寸: 500 x 176 浏览: 259 次 点击打开新窗口浏览全图

3467 次阅读，已有 2 人留下评论   |  Tags: ie6, bug

火狐插件网页另存为图片

Posted by Kevin | Filed under HTML/CSS/JS | 2010-03-02

上网的是时候经常会碰到这样的情况，就是看到一个自己觉得比较漂亮和欣赏的网页，就想先存下来，研究下她的配色和框架结构，以前用的TheWorld，有相关功能直接保存为图片。但是为了观赏到HTML5技术和CSS3技术，响应下无毒安全浏览器，现在还是用Firefox比较多。今天突然发现了这款软件，真的不错。Pearl Crescent Page Saver ，试了下效果，确实不错，可以将页面和区域保存为图片，保存的图片为PNG或者JPG格式，图片名称为网页的title。来看看官方的说明：

Pearl Crescent Page Saver is an extension for Mozilla firefox that lets you capture images of web pages, including Flash content. These images can be saved in PNG or JPEG format. Using Page Saver, you can capture an entire page or just the visible portion. You can control the image capture process via a wide variety of settings, including the image file name and scale (e.g., save at 50% of original size).

免费版本下载地址：http://pearlcrescent.com/products/pagesaver/pagesaverbasic-2.6.1.xpi

时光博客下载地址：pagesaverbasic-2.5.xpi

HOHO，又解决了一个难题了！

5692 次阅读，已有 7 人留下评论   |  Tags: firefox, 火狐, plugin, web, pic

JS innerHTML Double Quotes

Posted by Kevin | Filed under HTML/CSS/JS | 2010-01-21

通过js的innerhtml来获取一个dom节点，内部的html值时，如果属性值没有空格，则ie左右版本下，都会出现标签大些，双引号丢失问题。如果属性值有空格，则标签会变成大写，引号则正常输出.看下面示例：

当属性值无空格时：
FF3.5.7（gecko/20091221）<div id="div2"></div>

IE6 弹出:<DIV id=div2></DIV>
IE7 弹出:<DIV id=div2></DIV>
IE8 弹出:<DIV id=div2></DIV>

有空格时：
FF3.5.7（gecko/20091221）<div id="div2 "></div>

IE6 弹出:<DIV id="div2 "></DIV>
IE7 弹出:<DIV id="div2 "></DIV>
IE8 弹出:<DIV id="div2 "></DIV>

产生这个BUG的原因是什么呢？

When you get the innerHTML of a DOM node in IE, if there are no spaces in an attribute value, IE will remove the quotes around it.IE's innerHTML doesn't remove quotes from non standard attributes.

即使是jQuery里面，jquery团队的技术人员也没有解决这个问题.

提供下解决方案：

  1. function ieInnerHTML(obj) { 
  2.      var zz = obj.innerHTML, 
  3.          z =  
  4.        zz.match(/<\/?\w+((\s+\w+(\s*=\s*(?:".*?"|'.*?'|[^'">\s]+))?)+\s*|\s*)\/?>/g); 
  5.       if (z){ 
  6.         for (var i=0;i<z.length;i++){ 
  7.           var y, zSaved = z[i]; 
  8.           z[i] = z[i].replace(/(<?\w+)|(<\/?\w+)\s/, 
  9.                               function(a){return a.toLowerCase();}); 
  10.           y = z[i].match(/\=\w+[?\s+|?>]/g); 
  11.            if (y){ 
  12.             for (var j=0;j<y.length;j++){ 
  13.               z[i] = z[i].replace(y[j],y[j] 
  14.                          .replace(/\=(\w+)([?\s+|?>])/g,'="$1"$2')); 
  15.             } 
  16.            } 
  17.            zz = zz.replace(zSaved,z[i]); 
  18.          } 
  19.        } 
  20.       return zz; 
  21.      } 

在相应的地方调用函数ieInnerHTML

  1. if(/*@cc_on!@*/0){ 
  2.     inner_str = ieInnerHTML(obj); 
  3. }else{ 
  4.     inner_str = obj.innerHTML; 
  5. } 

 原理：对IE版本进行对应的JS处理，而且相应的元素标签中不要出现非标准元素

参考资料：

  1. innerHTML removes attribute quotes in Internet Explorer
  2. innerHTML中的双引号哪去了？

 

4248 次阅读，已有 6 人留下评论   |  Tags: js, ie, innerhtml

ImageSwitch For jQuery

Posted by Kevin | Filed under HTML/CSS/JS | 2009-12-10

最近在寻找图片切换效果，在网上找到了个不错的jquery版的图片切换效果，支持多种样式，纯js实现，视觉上绝对不逊色于FLASH。废话不多说看下效果图

兼容性：完美兼容Firefox 3.5.5 for win ,IE6,IE7,IE8，其他浏览器未测试

独立预览地址：http://liupeng.us/demo/jQuery/ImageSwitch/

示例代码：ImageSwitch_jQuery.rar

4376 次阅读，已有 7 人留下评论   |  Tags: imageswitch, jquery, js

jQuery Object and Dom

Posted by Kevin | Filed under HTML/CSS/JS | 2009-11-30

项目碰到一个问题，问题大概是这样的：

  1. <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
  2.     <tr class="line1" filetype="a"> 
  3.       <td></td> 
  4.     </tr> 
  5.      <tr class="line2" filetype="b"> 
  6.       <td></td> 
  7.     </tr> 
  8.   </table> 

需要对上面table的每个tr（N行）绑定事件，对filetype="a"和filetype="b"的绑定不同的的右键菜单。右键菜单是通过jQuery插件contextmenu实现的。

想绑定事件，自己只能想到2种方案：

  • 第一：使用jquery的选择符分别筛选出filetype为a和b的。
  • 第二：使用普通的dom对象，通过getAttribute实现。

第一种方法尝试了，发现jQuery不支持自定义选择符，也就是类似 $("input[name='newsletter']")的标签。可能也有，但是由于项目紧没有去尝试。

第二中方法，使用普通的DOM对象来获取不同的filetype，然后给tr做绑定，但是问题来了，jQuery的插件只支持jQuery对象。上网搜索了下发现原来DOM对象转换成jQuery对象非常简单，只要在DOM对象外面加入符号"$"就可以了。比如

  1. //普通的DOM对象 
  2. var otrs = document.getElementById("filelist").getElementsByTagName("tr"); 
  3.  
  4. //jQuery对象 
  5. jotrs = $(otrs); 

经常会碰到jQuery与原生的JS混写的时候，也不知道这样的效率如何，转换成jQuery对象的时候，会带来多大的性能损耗。

另外jQuery对象转换成DOM对象稍微要复杂一点，由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。

  1. $("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5] 

这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。
以下几种写法都是正确的：

  1. $("#msg").html(); 
  2. $("#msg")[0].innerHTML; 
  3. $("#msg").eq(0)[0].innerHTML; 
  4. $("#msg").get(0).innerHTML; 
4549 次阅读，已有 9 人留下评论   |  Tags: jquery, dom

JS多语言设计方案

Posted by Kevin | Filed under HTML/CSS/JS | 2009-11-09

公司目前碰到一个项目，客户是美国CDC，因为考虑到中方与美方的合作机构，所以需要设计出多版本语言切换。要求前台实现。因为语言包不需要经常修改没必要入库操作，所以将语言包写在一个配置文件里面是最好的（自我感觉）。

先看DEMO：JS多语言设计方案（带记忆效果）

于是第一次尝试，我写了一个语言包（js文件）：

  1. message.en={ 
  2.         "1": "Application Form for Project Activity", 
  3.         "2": "Project Name:", 
  4.         "3": "National Level:", 
  5.         "4": "Provincial Level:", 
  6.         "5": "Implementing Unit (NCAIDS division, provincial unit, or other):", 
  7.         "6": "Project ID #:" 
  8.        } 
  9.  
  10. message.chs={ 
  11.         "1": "项目活动申请表", 
  12.         "2": "项目名称:", 
  13.         "3": "国家级单位:", 
  14.         "4": "省级单位:", 
  15.         "5": "项目执行单位(注明性艾中心科室，省级单位，或其他):", 
  16.         "6": "项目活动序号:" 
  17.      } 

 

阅读全文  |   4886 次阅读，已有 10 人留下评论   |  Tags: js, 多语言
Total:3012345Next ›