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

Previous Next