小小子 http://www.xiaoxiaozi.com Say you say me ,say we together~~ Fri, 03 Sep 2010 07:25:19 +0000 en hourly 1 http://wordpress.org/?v=3.0 关于添加到收藏夹的讨论 http://www.xiaoxiaozi.com/2010/08/27/1873/ http://www.xiaoxiaozi.com/2010/08/27/1873/#comments Fri, 27 Aug 2010 03:34:53 +0000 simaopig http://www.xiaoxiaozi.com/?p=1873 写一个小功能，几乎学过JS的人都玩过，那就是添加到收藏夹的功能。

不用说了，关键问题就是我们怎么样处理FF，关于FF添加收藏夹的功能大家已经找到，那就是window.sidebar.addPanel(title, url, “”);

大家的写法通常如下：

function addBookmark(){
    var title = getTitle();
    var url = document.location.href;
    if (window.sidebar){
        window.sidebar.addPanel(title, url, "");
    }else if (document.all) {
        window.external.AddFavorite(url, title);
    }else{
        alert('您的浏览器不支持此功能，请按下CTRL+D手动收藏！');
    }
    return false;
}

function getTitle(){
    var title = $('TITLE').html();
    return (title == '' || title == null) ? 'defaultTitle' : title;
}

那么，我和熊川的讨论就在于，是否应该为FF来增加这个功能？

使用上述代码，在FF下面，点击添加至收藏夹时，会弹出如下窗口：

貌似很少有人会去注意这个复选框，那就是在侧边栏打开。

简单一看，很满意，功能实现了，并且收藏夹里也确实加入了此地址。但是，程序人员是不是也应该从收藏夹里点击试一下，效果真的如意吗？这里我选用一个使用同样方法来实现FF添加收藏夹的网站的配图，因为他们的页面挺漂亮的，呵呵。

大家注意到了，打开收藏的地址并不是打开一个新的TAB页，而是从FF的侧边栏打开。这样是不是会影响使用呢？

我的观点是，如果是这样，那么就不要使用此功能，还不如一个alert框给用户最直接的提示，我的观点如下：

  1. 在国内，使用FF的人有多少?
  2. 使用FF还不用CTRL+D收藏的人有多少？
  3. 使用FF，采用点击收藏的人又有多少?
  4. 收藏时，会注意侧边栏复选框的人有多少？
  5. 收藏后，点击时，意外的发现是在侧边栏打开时。愤怒的人有多少？

相关文章

]]> http://www.xiaoxiaozi.com/2010/08/27/1873/feed/ 12 产品设计之QQ邮箱登录页与淘宝登录页 http://www.xiaoxiaozi.com/2010/08/26/1864/ http://www.xiaoxiaozi.com/2010/08/26/1864/#comments Thu, 26 Aug 2010 14:47:17 +0000 simaopig http://www.xiaoxiaozi.com/?p=1864 最近开始关心一些产品的设计细节，也许闲的吧。虽然我不是美工，也不是产品，不过就算单纯的是因为喜欢前端，关注这些也不过分。

没有什么高深的理论，也没有多少经验，只是单纯的，从一个用户的角度来观察QQ邮箱的登录页也淘宝的登录页。

最近经常会和朋友发一些邮件，使用的都是QQ邮箱，因为绑定了QQ客户端，所以使用起来很是方便快捷。因为QQ的邮箱我喜欢用WEB版，也就没有使用FOXMAIL来接收，毕竟QQ开着，有新邮件会第一时间通知你。

在使用时，发现QQ邮箱的登录页很有特色，左侧是一个图片偶尔配上一些文字。基本都是用来宣传QQ邮箱用的。右侧就是登录的主体区。

qq_mail_1

而且，刷新几次页面，你总会看到一些新的图片。我曾经试过去刷新N次，发现这个配图真的很多，大概能有10个左右。

无独有偶。昨天去淘宝闲逛，意外的发现，原来淘宝的登录页与QQ邮箱的登录页有异曲同功之妙。先来看图：

淘宝的左侧配图也都是与淘宝网，或支付宝的功能上的一些关联介绍。

这样的设计，总比在页面上挂一些广告，或者是一些空洞的文字描述更能吸引人。毕竟，图片对人的视觉冲击力可不是文字可以比拟的，难道你认为自己是李白？

而且，每次不小心的刷新都会意外的发现图片在更新，使人也不会因为一幅图而厌烦。

相关文章

]]> http://www.xiaoxiaozi.com/2010/08/26/1864/feed/ 5 PHP函数array_slice http://www.xiaoxiaozi.com/2010/08/25/1859/ http://www.xiaoxiaozi.com/2010/08/25/1859/#comments Wed, 25 Aug 2010 09:23:02 +0000 simaopig http://www.xiaoxiaozi.com/?p=1859 一直想找这么一个函数，就是我取出数组的第一项。

之前傻了吧叽的使用foreach循环，然后记数。当为0的时候，将里面的值赋值给一个新的变量，最后返回这个变量。

今天闲着翻了一下手册，原来这东西是有现成的函数的：array_slice。

<?php
    $arr = array(0,1,2,3,4);

    var_dump(array_slice($arr,0,2));
   
   
    echo "<br/>";
   
    $arr2 = array('a'=>array('a','a','a'),'b'=>array('b','b','b'));
   
    var_dump(array_slice($arr2,0,1));
?>

返回的结果如下：

array(2) { [0]=> int(0) [1]=> int(1) }
array(1) { ["a"]=> array(3) { [0]=> string(1) "a" [1]=> string(1) "a" [2]=> string(1) "a" } }

相关文章

]]> http://www.xiaoxiaozi.com/2010/08/25/1859/feed/ 5 js 操作option http://www.xiaoxiaozi.com/2010/08/17/1856/ http://www.xiaoxiaozi.com/2010/08/17/1856/#comments Tue, 17 Aug 2010 10:24:10 +0000 simaopig http://www.xiaoxiaozi.com/?p=1856 经常要弄一些联动菜单之类的效果，用js操作option就不可避免了。

一般这种特效需要我们实现两种操作：

  1. 清空option
  2. 根据ajax返回结果，动态创建option

js清空option

清空option 不是很难的操作。我们只需要遍历现有option，将其每个子元素都置空即可。

function clearOption(selectId){
    var selectObj = document.getElementById(selectId);
    for(var i = 0,len = selectObj.options.length; i < len; i++){
        selectObj.options[0] = null;
    }
}

这里，大家可以思考一下为何options[0]而不是options[i]

js动态创建option

js创建Option的命令如下：

var newOption = new Option(optionTxt, optionVal);

据此，我们可以将Ajax返回的Json对象循环一下，来动态创建Option

//firstOption 为默认首选项，比如说“请选择”
function setSelectOption(selectId, optionList, firstOption, selected)
{
    var selectObj = document.getElementById(selectId);    
    var cnt = 0;
    if(firstOption){
        selectObj.options[0] = new Option(firstOption,'');
        cnt++;
    }
    for(var i = 0,len = optionList.length; i < len; i++){
        selectObj.options[cnt] = new Option(optionList[i].txt, optionList[i].val);
        if(selected == optionList[i].val){
            selectObj.options[cnt].selected = true;
        }
        cnt++
    }
}

相关文章

]]> http://www.xiaoxiaozi.com/2010/08/17/1856/feed/ 11 解决Ubuntu Eclipse 代码浮层黑色背景问题 http://www.xiaoxiaozi.com/2010/08/16/1853/ http://www.xiaoxiaozi.com/2010/08/16/1853/#comments Mon, 16 Aug 2010 15:30:55 +0000 simaopig http://www.xiaoxiaozi.com/?p=1853 已经让我痛苦好久的Ubuntu下Eclipse的代码浮层颜色今天终于知道怎么修改了。想想那可恶的黑色背景加黑色文字，简单想骂娘。

我知道这不怪Eclipse，也不能怪Ubuntu，貌似到头来只能怪自己没有找对方法。试了N多改变Eclipse配置的方法，又是首选项文字颜色、又是更改Eclipse皮肤、甚至我TMD还下载了一套Ubuntu的主题，不过这些方法都不对。

更换Ubuntu主题的时候，发现下面有个自定义，点了一下，原来别有洞天。

其实，大家只要更改一下颜色选项中的工具提示就OK了，可恶的问题，可恶的解决方式，不爽。

ubuntu_custom_color

相关文章

]]> http://www.xiaoxiaozi.com/2010/08/16/1853/feed/ 2 Linux Apache 配置文件更改创建文件用户名和用户组 http://www.xiaoxiaozi.com/2010/08/15/1849/ http://www.xiaoxiaozi.com/2010/08/15/1849/#comments Sun, 15 Aug 2010 14:06:38 +0000 simaopig http://www.xiaoxiaozi.com/?p=1849 学习TP，自己搭个应用，可是不允许改文件这就很郁闷了。看了一下，原来是程序自动生成的文件夹的用户名和用户组不对。我用默认用户去更改，当然没有权限。

于是，第一就想到肯定是APACHE配置里面，有指定默认的创建文件的用户名和用户组。搜了一下，果不其然：

#
# If you wish httpd to run as a different user or group, you must run
# httpd as root initially and it will switch.  
#
# User/Group: The name (or #number) of the user/group to run httpd as.
# It is usually good practice to create a dedicated user and group for
# running httpd, as with most system services.
#
User daemon
Group daemon

啥也别说了，改之重新生成，问题解决。

相关文章

]]> http://www.xiaoxiaozi.com/2010/08/15/1849/feed/ 5 JavaScript 对象的属性名 http://www.xiaoxiaozi.com/2010/08/03/1840/ http://www.xiaoxiaozi.com/2010/08/03/1840/#comments Tue, 03 Aug 2010 13:58:38 +0000 simaopig http://www.xiaoxiaozi.com/?p=1840 之前一直不曾在意，原来，在JS的对象直接量中，属性名即可以放在引号内，也可以不放在引号内。

例如：

var o = {'name':'小小子'};

var o = {"name":'小小子'};

var o = {name:'小小子'};


上面三种对象定义均可。所以建议大家可以省却引号，这样可以节省代码啊。呵呵。然而，是所有的属性名都可以省去引号吗？

当属性名满足下面条件之一时，不能省去引号：

  1. 当属性名为JavaScript的保留字时
  2. 当属性名含有空格或特殊字符时（除了字母，数字和下划线外的字符）
  3. 属性名以数字开头

Basically, if the name you have chosen for a property is not a valid name for a variable in JavaScript, then you need to in place in quotes.

基本上，如果您选择的属性的名称不是一个有效的JavaScript变量名的话，然后您就需要使该对象的属性被引号括起来了。

相关文章

]]> http://www.xiaoxiaozi.com/2010/08/03/1840/feed/ 12 付出总有回报 http://www.xiaoxiaozi.com/2010/07/28/1834/ http://www.xiaoxiaozi.com/2010/07/28/1834/#comments Wed, 28 Jul 2010 14:08:32 +0000 simaopig http://www.xiaoxiaozi.com/?p=1834 这几天晚上回到家里没闲着，在网上找了本书，终于弄明白自己一直半懂且不懂装懂的一件事情。

那就是闭包与作用域的事情，想想前两天写的日志，虽然当时自己用另外一种方式处理了。即借用于中间函数，不过始终是脱离了自己原来预想的闭包实现法。既然偶有所感，不如改写一下。

改写后，代码如下，果然精悍了很多。

var payTypes = ['snda', 'junnet', 'szx'];

for (var i = 0, len = payTypes.length; i < len; i++) {
    (function(payTypeName){
        var Radios = document.getElementsByName(payTypeName + "_amount");
        for (var j = 0, rLen = Radios.length; j < rLen; j++) {
            Radios[j].onclick = function(){
                payObj.changePaytype('pay_' + payTypeName, this.value);
            }
        }
    })(payTypes[i]);
}

所以说，天道酬勤，付出总是会有回报的。能否写出这个代码并不重要，背下来也可。但是弄明白其真正原理，这才是我最大的收获。

有点装B了，但是人在世上混，哪能不流氓，哪能不装B？都在世上飘，难免会挨刀。

相关文章

]]> http://www.xiaoxiaozi.com/2010/07/28/1834/feed/ 18 JS 常用继承实现方式 http://www.xiaoxiaozi.com/2010/07/28/1832/ http://www.xiaoxiaozi.com/2010/07/28/1832/#comments Wed, 28 Jul 2010 13:36:26 +0000 simaopig http://www.xiaoxiaozi.com/?p=1832 看《JavaScript 设计模式》，关于里面提到的JS继承实现的方式，分为三种，且书中都给出了相关实现。这里也不再做讲解，只求记录一下，因为自己总是有时候会忘记这些东西。

  1. 类式继承，extend
  2. 原型式继承，clone
  3. 掺元类继承，augment

类式继承的实现，这里面很有必要引人注意的是，superclass.prototype.constructor = superclass; 而且实现空实例要省很多资源。

如果还想调用类里面的方法，而非其原型对象的方法，可以使用call函数或者apply函数，这里不再缀述。

function extend(subClass, superClass) {
  var F = function() {};
  F.prototype = superClass.prototype;
  subClass.prototype = new F();
  subClass.prototype.constructor = subClass;

        subClass.superclass = superClass.prototype;
        if(superClass.prototype.constructor == Object.prototype.constructor) {
                superClass.prototype.constructor = superClass;
  }
}

原型继承相对看起来可能要晕一些，此种方式继承适用于非函数式对象，字面直接量这种方式的继承实现。因为看函数名就能看出来，实现的是对象的克隆，那么当然最简单的方法就是将对象设置成一个空对象的原型。然后再将这个空对象返回。

function clone(object) {
        function F() {}
        F.prototype = object;
        return new F;
}

掺元类的方式适用于那些子类与父类之间关系不大，只是单纯的想通过子类调用其父类的方法，把有用的方法继承过来。

function augment(receivingClass, givingClass) {
  if(arguments[2]) { // Only give certain methods.
    for(var i = 2, len = arguments.length; i < len; i++) {
      receivingClass.prototype[arguments[i]] = givingClass.prototype[arguments[i]];
    }  
  }  
  else { // Give all methods.
    for(methodName in givingClass.prototype) {
      if(!receivingClass.prototype[methodName]) {
        receivingClass.prototype[methodName] = givingClass.prototype[methodName];
      }  
    }  
  }
}

相关文章

]]> http://www.xiaoxiaozi.com/2010/07/28/1832/feed/ 2 svn diff 比较不同版本间差异 http://www.xiaoxiaozi.com/2010/07/23/1828/ http://www.xiaoxiaozi.com/2010/07/23/1828/#comments Fri, 23 Jul 2010 02:50:51 +0000 simaopig http://www.xiaoxiaozi.com/?p=1828 svn diff 都支持哪些用法呢？查看手册太麻烦，让我们直接help一下：

svn diff --help

具体比较一个文件不同版本间变化，可以用下面的命令：

svn diff -r newversion:oldversion  path

svn diff -r 1327:1326 mcsd_svc.php

svn diff的其他用法请参考：svn diff svn子命令

相关文章

]]> http://www.xiaoxiaozi.com/2010/07/23/1828/feed/ 8