时光博客 - WEB开发中的可用性和用户体验
查看Kevin的文章

jQuery Object and Dom

项目碰到一个问题,问题大概是这样的:

  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; 

博客留言短信提醒更新

这几天突然发现手机不吵了,看博客留言也没有增加,如是点进文章里面看看,发现了留言,而右侧的Sidebar居然不显示,估计是数据库有值,而没有更新缓存。

最初发现短信留言出错是在Samool的博客上看到的,因为他使用的代码和我相同,但是解析出SSIC错误,估计是飞信更改了最新的协议了。以前的代码不管用了,回头好好研究下飞信的协议。不过为了解眼前之急,还是在网上找到了解决方案。这次代码更简单了,不需要引入任何PHP文件,有热心的童鞋给我们提供了服务中转信息,不过我们的手机号和密码有没有记录在他的数据中,就无从知晓了。安全性还是不能保证。下次还是自己写一个吧。

Sablog-X 2.0 具体方法:

上传class_curl.rar到根目录,然后打开根目录下post.php 找到

  1. $cmid = $DB->insert_id(); 

在下面添加

  1. //add msg notice 
  2.     if($username!='后台登陆名') { 
  3.          require_once('class_curl.php'); 
  4.          $data["username"] = 你的手机号;   
  5.          $data["password"] = "手机密码";   
  6.          $data["sendto"] = 你的手机号;   
  7.          $data["message"] = $username."说:".$content;   
  8.    
  9.          $curl = new Curl_Class();   
  10.          @$curl->post("http://sms.api.bz/fetion.php"$data);  
  11.          
  12.     } 
  13.     //END msg notice 

测试一下OK了,中间的工作已经都交给了sms.api.bz 完成了。

如果你测试出现如下结果:

Warning: Cannot modify header information - headers already sent by

那么请看下面这段话

编码问题,utf-8有两种模式,utf-8 with bom 和utf-8 with no bom ,utf-8 with bom 会在头部输出隐藏的信息,我们知道header()跟session_start()函数前是不能有任何输出的,所以就会产生这个问题,用编辑器(不要用记事本)打开这个文件,另存为utf-8 with not bom这种模式就行了。

12.jpg

大小: 44.1 K
尺寸: 500 x 224
浏览: 500 次
点击打开新窗口浏览全图

在此感谢金山的张宴组长提供无私飞信中转服务.更多详细关于飞信短信提醒请移步 中国移动飞信免费发短信API接口(第三方 Fetion API)

JS多语言设计方案

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

先看DEMOJS多语言设计方案(带记忆效果)

于是第一次尝试,我写了一个语言包(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.      } 

 

时光博客的Picasa相册

google如此好的产品竟然也被水产了,我TC无比神奇。为了保障大家无障碍阅览时光博客的Cosplay图集,现在手把手教大家穿墙术。引用keso的一句话

keso是谁?
作为一个有点上进心的中国网民,穿墙术是你必须掌握的生存技能之一。

如果你是WIN用户,开始 - 运行 - 输入“C:\windows\system32\drivers\etc

用记事本或者文本编辑软件打开 hosts 文件,在最下面加入(直接CTRL+C 即可)

203.208.39.104 picadaweb.google.com
203.208.39.104 lh1.ggpht.com
203.208.39.104 lh2.ggpht.com
203.208.39.104 lh3.ggpht.com
203.208.39.104 lh4.ggpht.com
203.208.39.104 lh5.ggpht.com
203.208.39.104 lh6.ggpht.com
203.208.39.104 lh7.ggpht.com
203.208.39.104 lh8.ggpht.com

这时你再打开时光博客 - Picasa 相册会发现

图片附件(缩略图):
picasa of liupeng.jpg

大小: 222.84 K
尺寸: 500 x 398
浏览: 384 次
点击打开新窗口浏览全图

CSS的border实现三角的随想

沉寂了好久哇,今天出了冒个泡,证明我还活着,然后再有模有样来篇技术稿,然后继续沉寂。

今天在CSS88的博客看到一篇有趣的文章《用css的border属性实现三角》。首先我会站在自己角度思考一下,如果要实现这样的三角效果,我会采取哪种方法?

我的第一反应就是用图片,但是同时也考虑到图片的缺点,如果以个页面需要几种样式的三角,是不是需要做几种图片?另外如果页面有换肤的需求,是不是同时图片也得换?

于是出于优化的思想考虑,看到用CSS来解决三角应该属于最佳解决方案吧,至少节约了三角图片的下载时间和便于换肤。但是也有他的缺点,因为是CSS的,所以必须考虑到各个浏览器对css的兼容状态。

当然本文仅讨论如何用border实现三角。首先来看下面以副图片:

哥玩的不是劲舞团,是寂寞

绝对经典的一篇文章,大家看看吧,从小A那里转过来的,经我转载的比为经典中的经典。

每当夜幕降临。
哥总是拖着疲惫的身躯
把我那泛黄的迷彩服脱掉,
换上了我从夜市第三个摊子买来的非主流服装。
昏黄的路灯下
有一道孤寂的身影走进了小巷深处的一家网吧
留下的只有寂寞的背影
没错,那就是哥
熟悉的走到了吧台的位置
拿出了8元人民币
淡淡的说了句 “包夜”
吧台新来的女网管,对我投出了一道暧昧不明的微笑
哥无奈的摇了摇头。
淡然的接过了那张临时卡。
在大家的心目中,我永远是个温柔而又不爱说话的哥
但是那个新来的网管还是看穿了我笑容背后的忧郁。

设计需要大胆的创新

设计需要大胆的创新,最近才慢慢摸索出这个观点,虽然很早就有人提出过。关于《youku为什么没有放置iku?》 以及最近在阿里巴巴用户体验部看到的《office2007 ribbon界面的启示》,越来越让我感觉到设计的重要性。就引用《office2007 ribbon界面的启示》里面的一段很精辟的话来概括吧:

在MIX0.8上Jensen公开了Office2007在界面“变革”中的一些历程,我们可以看到一些早起的原型是如何逐渐过渡到Ribbon界面的,这让我们深思设计的意义,设计不仅仅是解决问题的过程,我们不仅仅是要考虑用户习惯和文化,还需具有打破常规和改变用户习惯的勇气,这样才能以更优的方式来解决问题,这很难,但这也是设计的迷人之处。

创新设计虽然会有一定的商业风险,特别是用户群庞大的产品,如果被用户接受,就算成功,如果接受不了,就会导致整个产品的失败...其带来的损失也是无法估量的...