支持 Haiti 的小网站

2010年1月31日探究学习
4

Comments

17号的时候虫子向我求助，想要我帮忙做一个支持海地的小网站。大体的思路就是，在上面的放一个大地图，然后大家可以留言、上传照片什么的，然后就在地图上出现亮点，然后亮点点进去可以看到留言和照片~这个网站已经进入公测了，大家可以在这里查看：Haiti <3（话说我曾经问虫子“<3”是什么意思，她告诉我，是爱心的意思~）

我猜从来没做过网站的人一定会觉得这个很简单，但我觉得一点都不简单……不过似乎可以实现~这种无疑又是对我技术的一次挑战！
Read the rest of this entry »

< ,,,,,,, >

基于 jQuery 的 CSS 更换术

2009年10月18日探究学习
0

Comments

最近开始写一中的新选歌系统，这次要大改，顺便练手。

想加入换肤功能（不然女生肯定觉得老是蓝色不好……），而且我想到的换肤，最简单的方式就是换 CSS，把界面颜色、图形相关的内容放入皮肤的 CSS 中就很容易了~不过问题是换肤呢？

正好新系统中因为客户端代码可能非常强大，准备引入 jQuery 框架来简化开发，便学了一些。于是我就想，能不能通过 jQuery 来解决呢？

首先，我给出了下面这个简单的页面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>福州一中 学校音乐征集</title>
<link rel="stylesheet" href="" id="theme" type="text/css" media="all" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="theme.js"></script>
<style type="text/css">
html, body { height: 100%; width: 100%; }
</style>
</head>
<body>
Hello world!
</body>
</html>

然后我开始用了一段 jQuery 手册里的某段示例代码：

1
2
3

$('<link rel="stylesheet" href="' + 
    (t++ & 1) + '.css" id="theme" type="text/css" media="all" />')
    .appendTo('head');

成功了，不过查看处理后的代码，发现大量冗余代码出现在 head 尾部……又查了查，发现了 jQuery 里面的另外一个好用的函数，于是上面代码就改为：

1
2
3

$('<link rel="stylesheet" href="' + 
    (t++ & 1) + '.css" id="theme" type="text/css" media="all" />')
    .replaceAll("#theme");

没有冗余代码出现，而且 IE6 都可以正常使用！jQuery 的兼容性果然超群……

然后我们想，这样每次都要重建标签，会不会很慢呢？如果能直接改属性或许不错~再查查，我们发现下面方法：

1

$("#theme").attr({ href: (t++ & 1) + '.css' });

又简洁看过去又高效~再试试 IE6，仍然没有问题哦~
Read the rest of this entry »

< , >

修改代码高亮插件

2009年10月11日雕虫小技
7

Comments

我一直在使用 wp-codebox 这个代码高亮插件。这个代码高亮插件似乎很久没有更新了，而且作者的网站也不能访问了（被墙了？），不知道是不是停止维护了？虽然在插件主页上显示这个插件仅支持到 2.5.1，我这个 2.8+ 的 WordPress 也并没有提示不兼容……虽然这个插件似乎对 SEO 有影响，而且可能停止维护，不过我暂时不打算更换插件，大不了我自己维护自己的版本……

今天就修改了一下……因为昨天发的那文章很多用这个来显示高亮代码，而且最后一个长代码我还使用了自动收缩。可是自动收缩没效果！下载栏也没有显示。今天查一下，发现是插件的功能栏被我关了……启用以后觉得很难看，很厚，而且和我的蓝色主题很不搭调，于是就决定自己修改了。

先是改了 CSS，把那功能栏调好看了些。然后开始改 main.php，把后面失效的帮助链接给删掉了。然后我让代码小等于5行，又不提供文件下载的代码段自动隐藏功能栏，而对于大于70行的代码，如果没有显示声明展开则自动收缩。最后，觉得那个收缩很卡，就让他直接消失好了……查了下插件用的 jQuery，新版本改进了执行效率，而且没有改变插件里面用的那些函数的特性，就直接下下来更新了……

这里把我修改后的插件也贴出来供大家参考吧：wp-codebox-upsuper.tar.lzma (577.8 KB)

顺便说一声，配的也是最新版的 GeSHi，虽然只更新了一个小小版本……

< ,,,,, >