ico图标学习纪录

Posted in   ico   at 2013-03-26

开发的网站也不少,可是对于favicon.ico文件还是不怎么了解,每次要生成这个文件都是上网搜索教材,一直没有很好的学习和总结。今天就特地学习,并把笔记记下来,方便以后查阅。

从三个问题着手来学习,

1.ico是什么文件?

ico是Icon file的缩写,是Windows的图标文件格式的一种,可以存储单个图案、多尺寸、多色板的图标文件。

2.有什么用途?

一般所说的ico图标是作为浏览器首段图标显示,还可以在收藏夹内收藏内容的前段显示小图标。

3.怎么制作?

有好多在线制作的网站,本人找了几个,方便以后用。

网站1, 还有一篇介绍ico的文章,参见; 网站2; 网站3; 网站4;

IE特殊处理三则

Posted in   IE   at 2013-03-20

做过前台开发的人员,或多或少都会碰到IE的兼容问题。

最近在给琥珀网做首页的时候,也碰到了IE显示问题。主要有三个问题:

  • 节目表单无法正确显示
  • IE7下,首页的jwplayer位置不正确
  • 首页中,各频道图片之间的间距显示不正确

有问题不可怕,可怕的是找不到问题所在,以及没有跟踪的办法。


琥珀网中的节目表单使用一个叫CHAP Links Library的timeline插件实现json数据动态加载。这个功能在FF,Chrome,Safari中都能正确工作,只有在IE中,无法显示节目单。

起初我一点头绪都没有,只要在js代码中增加alert语句来调试,唯一得到的就是代码可以正确的执行,就是结果不显示。

只好在IE的开发人员工具F12的帮助下,给js代码设置断点,搜索问题。

在timeline.js的draw方法中'this.setData(data)'设置一个断点,查看一下data数据,果然在这里发现问题,data数据中所有的日期字段都是"Undefined"。回到Chrome中查询对应的数据,发现这些日期都没有问题。

links.Timeline.prototype.draw = function(data, options) {
  this.setOptions(options);

   // read the data
   this.setData(data);

   // set timer range. this will also redraw the timeline
   if (options && (options.start || options.end)) {
       this.setVisibleChartRange(options.start, options.end);
   }
   else if (this.firstDraw) {
       this.setVisibleChartRangeAuto();
   }

   this.firstDraw = false;
};

这些日期数据都是ruby传给js的,形式如,str = 'Wed Mar 20 16:05:05 +0800 2013',然后把这个字符串传递给js的Date函数。

var time = new Date(str);  
// str ='Wed Mar 20 16:05:05 +0800 2013'

上面的这句话在Chrome,FF,Safari中都能正确的生成JS下的日期,只有IE下无法实现。为了搞清楚,特意google一下JS中Date的构造函数,参见

原来JS中,Date对象的定义有如下几种形式:

var d = new Date();

var d = new Date(milliseconds);

var d = new Date(dateString);

var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);

其中dateString,只支持如下几种形式,当然不局限于如下形式:

October 13,1975 11:13:00

October 13,1975 11:13

October 13,1975

2010-06-09 15:20:00

2010-06-09 15:20

2010-06-09

2010-06

2010

对于IE来说,上面的'Wed Mar 20 16:05:05 +0800 2013'这种形式是不支持的,所以改为Date(milliseconds),问题就迎刃而解。


关于jwplayer位置不正确的问题,首先了解,jwplayer.setup("div_id")的方法,会生成如下代码:

原代码

<div id="div_id">jwplayer</div>

新代码

<div id='div_id_wrapper'><object id='div_id'>...</object></div>

所以在写css的时候,可以通过设置div_id_wrapper这个div样式来实现想要的效果。

本例中,还涉及到position:relative在IE7下不工作的问题。具体解决方案,参见,解释的很清楚。


关于第三个问题,没有修改任何css代码,只是在网页的头部添加了<!DOCTYPE> transitional DTD。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

具体参见

Drupal实现节点列表菜单

Posted in   Drupal   at 2013-03-18

Drupal有搜索功能,只要在搜索表单中输入条件,点击搜索就可以得到结果列表页面。可是在开发网站的过程中,难免会有这样的需求,一个菜单或者连接实现一个查询。最近在建立Asischina这个网站的时候,就需要实现这个菜单。

具体需求,这个网站中,有一个Node Type是News的节点,想通过/asischina/list/news来得到所有的News列表,并希望结果页面有分页功能。

起初我觉得这个功能不复杂,肯定有Module实现了它,于是就去Drupal官方搜索,结果是令人失望的,两天都没有找到合适的Module。

于是决定自己写个Module实现这个菜单。

  • 定义菜单项,实现hook_menu函数

    $items['asischina/list/%'] = array(
      'title' => 'Content Type list',
      'page callback' => 'asischina_list_for_content_type_page',
      'page arguments' => array(2),
      'access callback' => TRUE, //array('access content'),
      'type' => MENU_CALLBACK,
    );
    return $items;
    
  • 实现查询功能,asischina_list_for_content_type_page($content_type)

    $query = 'SELECT nid FROM {node} where type = "'. $content_type .'" ORDER BY nid desc ';
    
    $count_query = "SELECT COUNT(*) FROM (" . $query . ") AS count_query";
    
    $result = pager_query($query, 10, 0, $count_query);
    
    $output = "";
    
    while ($item = db_fetch_object($result)) {        
      // Build the node body.
      $node = node_load($item->nid);
      $output .= node_view($node,true);
    }
    
    $output .= theme('pager', NULL, 10, 0);
    
    return $output;
    

最终代码虽然简单,过程可是很曲折的。

首先,定义菜单项,需要注意page argements与通配符的对应关系,本例中,array(2)对应通配符。

asischina -- array(0) list -- array(1) % -- array[2]

再次,pager_query函数实现分页查询

然后, node_view实现node正确显示,按列表结果展示,不是按full page展示节点

最后, theme('pager',Null,10,0)展示页面中的分页器

纪录这些学习过程。


问:github如何得到除master以外的分支

答:第一次clone下来都是master,用如下语句可以得到其他分支

git checkout -b xxx origin/xxx