idea's blog

如果你是网站前端开发人员，那么对你来说，也许做一个漂亮导航菜单会很得心应手。但今天我要为大家总结各种导航菜单的资源，以便让大家的网站前端开发的工作更方便更快速，只要选择现成的例子就可以应用于自己的网站了。我收集的这些资源，从非常简单的HTML和CSS导航菜单，到非常复杂和高级的JQuery、JavaScript和MooTools技术，这都可以让你轻松实现褪色、滑动、拖动等效果。如果您觉得这些资源值得一用，那就快把本网页收藏以备日后查阅吧！

译者注:您还可以参考以下前端开发相关教程&资源:
《精选15个国外CSS框架》
《10个非常棒的Ajax及Javascript实例资源网站》
《Web前端开发必备手册下载》
《精选30个优秀的CSS技术和实例》
《15个前端开发/网页设计师必备的Bookmarklet》 
《12种Javascript解决常见浏览器兼容问题的方法》

 
1.Fancy menu - 非常酷的导航菜单:

2. 专为Mac爱好者开发的CSS dock菜单，使用jQuery框架。

下载 dock 菜单

3.37个不同的CSS导航菜单技术：

Continue reading »

数据表格(datagrid)显示为一个表格, 为了让数据更加直观, 需要显示条纹. 条纹可以是按行的, 也可以是按列的. 如果关注的是行, 就使用前者, 如果关注的是列就使用后者.

表格条纹可以基于服务器端实现, 也可以基于客户端. 我个人倾向于基于客户端的方式, 因为这样功能划分更加清晰, 服务器端的代码更简洁. 基于客户端的方式使用 JavaScript 代码更改表格列(或者行)的样式属性. 本例是按行显示条纹, JS修改表格行(tr)的class属性. 也可以直接修改tr的style属性.

### JavaScript 代码:

function stripe(table) {
    var trs = table.getElementsByTagName("tr");
    for(var i=0; i<trs.length; i++){
        trs[i].className = i%2 != 0? 'odd' : 'even';
    }
}

window.onload = function(){
    var tables = document.getElementsByTagName('table');
    for(var i=0; i<tables.length; i++){
        if(tables[i].className == 'datagrid'){
            stripe(tables[i]);
        }
    }
}

### CSS 代码:

table.datagrid tr.odd{
    background: #fff;
}

table.datagrid tr.even{
    background: #eee;
}

链接: 示例演示

涉及到分页时, 除非只显示上一页/下一页, 否则需要计算起始页和结束页. 看过很多代码都是用大量的if-else来实现, 代码量大, 又不简洁. 现在提供一种只需要3行代码的算法.

一个好的分页算法, 应该具有下面的优点:

1. 当前页码应该尽量在正中间.
2. 如果"首页"和"尾页"不可用(当前处于第一页或最后一页), 不要隐藏这两组文字, 以免链接按钮位置变动.
3. 算法简单.

下面的算法具有前面1和3两个优点.

PHP:

// $curr_index, 当前页码.
// $link_count, 链接数量.
// $page_count, 当前的数据的总页数.
// $start, 显示时的起始页码.
// $end, 显示时的终止页码.
$start = max(1, $curr_index - intval($link_count/2));
$end = min($start + $link_count - 1, $page_count);
$start = max(1, $end - $link_count + 1);

JavaScript:

start = Math.max(1, curr_index - parseInt(link_count/2));
end = Math.min(page_count, start + link_count - 1);
start = Math.max(1, end - link_count + 1);

史上最强大的PHP的MySQL操作类, 即使PDO, ActiveRecord, ORM, 框架, Framework... 都不如这个强大和好用. 有了它, 你就不会再需要任何MySQL封装了 - 除了PHP内置的mysql_xxx函数.

这个类已经在多个大型项目中得到广泛应用, 经过生产环境至少2年的检验.

Continue reading »

在 Prado 中使用 Ajax, 如果你的 page 文件和 php 文件使用的不是 UTF-8 编码, 会遇到中文乱码问题. 原因是 Prado 的 Ajax 模块在交换数据时使用 JSON 格式的文本, 而且限制要转换为 JSON 格式的源文本必须是 ASCII 或者 UTF-8 编码的(见 Web.JavaScripts.TJSON 的 encode 方法的注释).

TJSON.encode 方法尝试把源文本转换为 UTF-8 编码:

if (($g=Prado::getApplication()->getGlobalization(false))!==null && 
	strtoupper($enc=$g->getCharset())!='UTF-8'){
		$var=iconv($enc, 'UTF-8', $var);
}

但是, 默认情况下 application 对象的 _globalization 字段没有初始化, getGlobalization(false) 返回 null, 所以, 你需要设置 application._globalization 字段. 在入口文件 index.php 中的 $application->run() 之前添加如下语句:

$g = $application->getGlobalization();
$g->Charset = "gb2312";

不带参数的 getGlobalization() 方法会先检查 application._globalization 是否为空, 如果为空则先创建一个再返回. 如果你的程序使用其它的编码, 只需要替换 "gb2312" 即可. 或者, 你也可以在 application.xml 文件中定义, 在 modules 节点下添加:

<module id="globalization" class="System.I18N.TGlobalization" charset="gb2312">
</module>

我的PHP已经用得很熟练了, 因为我可以用PHP开发几乎所有的Web应用, 并且感到愉快. 但是, 一个恼火的问题是, 我离不开PHP手册. 一个原因是我的思维惰性, 另一个原因是PHP的函数的参数设计太混乱了.

所以, 我最近必须把主要的函数牢牢地记下来, 如 str_replace, str_pos, explode, join等.