Simple happiness » 代码 http://xfuxing.com 越简单越幸福 Sun, 01 Jan 2012 16:55:46 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 关于php程序国际化(i18n)的那些事 http://xfuxing.com/2010/php-program-on-the-internationalization-i18n-of-those-things.html http://xfuxing.com/2010/php-program-on-the-internationalization-i18n-of-those-things.html#comments Sat, 28 Aug 2010 14:11:46 +0000 德海 http://xfuxing.com/2010/%e5%85%b3%e4%ba%8ephp%e7%a8%8b%e5%ba%8f%e5%9b%bd%e9%99%85%e5%8c%96i18n%e7%9a%84%e9%82%a3%e4%ba%9b%e4%ba%8b.html 这事说起来也是老生常谈了，其实这事本来没什么意思，可是这回想用的时候才发现真不是这么回事，最主要的是我个人很习惯了WP的那种“_e”和“__”的本地化方式，可真的去试用gettext的时候，才发现那家伙真不是一般的麻烦，要为每一种语言都配置好目录和设置什么的，总之那是相当的麻烦……

可又确实想用，怎么办？唉，没办法，翻WP的原程吧，可是现在升来升去越来越繁复，于是想起初接触WP时的2.3.1版，网站上拿下，主要查“l10n”这个文件，在wp-includes文件夹里，于是从一个文件找到另一个文件，这样找齐了四个文件： l10n.php / streams.php / gettext.php / plugin.php ……，可我总不能做一个程序就带着这四个累赘吧，唉，还是自己合并吧。于是得到了一个文件，我延续了WP的文件命名，将合并后的文件命名为：l10n.php 。

该文件内包函了需要使用的各函数，在输出时保持WP的原始风格，“_e”为直接输出显示，“__”为返回输出。在本地化文件命名上，我倾向于插件式命名，即：“程序名-zh_CN”，这个PO和MO可以用POEDIT去搞了，能看这篇文章的，我想不会不知道怎么弄吧，呵呵。

将以上文件都保存在程序目录下的“languages”目录下（个人习惯），然后在调用里进行如下代码设置：

  1. define ('WPLANG','zh_CN');
  2. require_once( 'l10n.php' );
  3. load_plugin_textdomain('your programe name', 'languages');

以上完全按照WP的系统来写的，如果你有其它想法，请自己更改啦，好了，进行好如上这些，在代码里就可以将需要国际化的词句以“_e”或“__”方式来输出了。如果对于“define (‘WPLANG’,'zh_CN’)”中的“WPLANG”这个常量进行了其它命名，请修改“l10n.php”文件中的相应处（在编辑器里搜一下就可以，或查找文件中“get_locale()”函数，就在这里）。

对于懒得自己更改的朋友，请直接点击下面的链接进行下载：

http://xfuxing.com/wdp/wp-content/uploads/2010/08/l10n.rar

对于国际化有兴趣的朋友还可以访问下面的链接，这篇文章里利用了 l10n.php / streams.php / gettext.php 三个文件再加上一些代码，可以将MO读取出来成为PO，也很有意思。文章链接如下：

http://comox.textdrive.com/pipermail/wp-polyglots/2006-July/000989.html

明天周日，公休（我每周只休一天的），网上也休息，下周一见。

Simple happiness

您可能感兴趣的文章

]]> http://xfuxing.com/2010/php-program-on-the-internationalization-i18n-of-those-things.html/feed 2 php下获取远程文件信息的重要函数get_headers http://xfuxing.com/2010/php-remote-file-access-to-information-under-an-important-function-get_headers.html http://xfuxing.com/2010/php-remote-file-access-to-information-under-an-important-function-get_headers.html#comments Fri, 27 Aug 2010 14:48:34 +0000 德海 http://xfuxing.com/2010/php%e4%b8%8b%e8%8e%b7%e5%8f%96%e8%bf%9c%e7%a8%8b%e6%96%87%e4%bb%b6%e4%bf%a1%e6%81%af%e7%9a%84%e9%87%8d%e8%a6%81%e5%87%bd%e6%95%b0get_headers.html HTTP/1.1 200 OK [Date] => Thu, 26 Aug 2010 05:58:47 GMT [Server] => Apache [Last-Modified] => Mon, 23 Aug 2010 03:01:54 GMT [ETag] => "20a9e05-e220-4c71e4a2" [Accept-Ranges] => bytes [Content-Length] => 57888 [...]]]> get_headers函数很不错，在我们写一些php代码时，可能会需要获取远程文件的一些信息，比如文件大小、最后修改时间等等，而php内置的相关函数都不支持远程文件，于是我们就用上了get_headers函数。

首先，我们要用到前面的两个自定义函数remote_file_exists（检查远程文件是否存在）、dump（格式化输出数组内容），这两个函数的具体代码都在前面有说过，并且在dump那篇文章中，最后的一段例程代码就是获取远程文件信息头的内容并格式化输出的结果。结果如下：

Array
(
    [0] => HTTP/1.1 200 OK
    [Date] => Thu, 26 Aug 2010 05:58:47 GMT
    [Server] => Apache
    [Last-Modified] => Mon, 23 Aug 2010 03:01:54 GMT
    [ETag] => "20a9e05-e220-4c71e4a2"
    [Accept-Ranges] => bytes
    [Content-Length] => 57888
    [Connection] => close
    [Content-Type] => image/jpeg
)

在例程中我提供的远程文件是一个图片文件（我狗女儿的照片），我们得到了如上的一个数组，下面说一下这个数组中我们比较常用的几个内容。

“[0] => HTTP/1.1 200 OK”，文件状态，200是正常存在，404是不存在，其它的还有几种，与我无关，所以我没有去具体看。
“[Last-Modified] => Mon, 23 Aug 2010 03:01:54 GMT”，文件最后一次修改更新的时间，这个内容应当是比较有用的，如果是要获取本地文件的最后修改更新时间，我们应当使用“filectime”函数。
“[Content-Length] => 57888”，文件的大小，计量单位是“[Accept-Ranges] => bytes”，php中获得文件大小的函数“filesize”是不支持远程文件的，所以我们也需要这组数据。
“[Content-Type] => image/jpeg”，文件类型，判断文件类型有很多种方法，这个方法我觉得也不错，只可惜每一种方法都需要“switch”来实现类型的一一对应才能表现在页面上。
O了，有了上面一组数据，我们可以写出两个函数了，一个是获取远程文件大小的函数，一个是获取远程文件最后修改更新时间的函数。这两个函数代码如下：

  1. // CHECK REMOTE FILE SIZE (RETURN BYTES)
  2. function remote_filesize($url_file){
  3.     if (!remote_file_exists($url_file)) return false;
  4.     $headInf = get_headers($url_file,1);
  5.     return $headInf['Content-Length'];
  6. }
  7. // CHECK REMOTE FILE LAST MODIFIED TIME (RETURN UNIX TIMESTAMP)
  8. function remote_filectime($url_file){
  9.     if (!remote_file_exists($url_file)) return false;
  10.     $headInf = get_headers($url_file,1);
  11.     return strtotime($headInf['Last-Modified']);
  12. }

上面的两个自定义函数中都使用了“remote_file_exists”这个判断远程文件是否存在的自定义函数（参见前文），函数中首先要判断一下我们要查的文件是否存在，如果不存在还查个P啊，当然返个false喽。然后通过“get_headers”来获取文件头信息并将这个信息数组赋给“$headInf”，两个函数到这里都是完全一样的，在这之后就简单了，你需要返回数组中的哪一段信息或需要将信息处理一下再返回就都随意了。我这里第一个是返回文件大小的，第二个是将文件最后修改更新时间转化为UNIX时间戳来返回的。

好了，看看自己有什么需要的，去写一个吧，将来这几个都会被我应用到，所以都写出来了。

Simple happiness

您可能感兴趣的文章

]]> http://xfuxing.com/2010/php-remote-file-access-to-information-under-an-important-function-get_headers.html/feed 0 自定义数组格式化输出函数（dump），调试程序时很有用 http://xfuxing.com/2010/custom-array-format-output-function-dump-useful-when-debugging-programs.html http://xfuxing.com/2010/custom-array-format-output-function-dump-useful-when-debugging-programs.html#comments Thu, 26 Aug 2010 14:46:00 +0000 德海 http://xfuxing.com/2010/%e8%87%aa%e5%ae%9a%e4%b9%89%e6%95%b0%e7%bb%84%e6%a0%bc%e5%bc%8f%e5%8c%96%e8%be%93%e5%87%ba%e5%87%bd%e6%95%b0%ef%bc%88dump%ef%bc%89%ef%bc%8c%e8%b0%83%e8%af%95%e7%a8%8b%e5%ba%8f%e6%97%b6%e5%be%88.html 前面我们谈了一下关于判断远程文件是否存在的一个函数，希望大家能够记下来，因为在最近这几篇文章中这几个函数会联合一起使用，将来这些函数也会被我使用到改写的MG2程序里。

下面说说今天要说的这个自定义函数dump，该函数是我从网上搜集下来的，作用为将一个数组进行格式化输出，对于我来说要看php中一个数组的内容是很费力的，因为本人的php可以说是无基础可言，用到哪里就看哪里，呵呵，完全的现用现学。搜到这个函数后，发现通过格式化输出后，再去看某一个数组时确实省事多了，经过测试，暂无发现什么问题，下面给出该函数代码：

  1. function dump($vars, $label = '', $return = false) {
  2.     if (ini_get('html_errors')) {
  3.         $content = "<pre>\n";
  4.         if ($label != '') {
  5.             $content .= "<strong>{$label} :</strong>\n";
  6.         }
  7.         $content .= htmlspecialchars(print_r($vars, true));
  8.         $content .= "\n</pre>\n";
  9.     } else {
  10.         $content = $label . " :\n" . print_r($vars, true);
  11.     }
  12.     if ($return) { return $content; }
  13.     echo $content;
  14.     return null;
  15. }

以上代码为原文，未经修改，可以正常使用，下面给出一个例程，和输出结果，通过这个函数，我们在写一些php代码时，在调试阶段就可以很清楚的查到数组内容了，例程中应用到了本函数及前面讲的判断远程文件是否存在的函数remote_file_exists以及get_headers函数，例程及输出结果如下：

  1. function dump($vars, $label = '', $return = false) {
  2.     if (ini_get('html_errors')) {
  3.         $content = "<pre>\n";
  4.         if ($label != '') {
  5.             $content .= "<strong>{$label} :</strong>\n";
  6.         }
  7.         $content .= htmlspecialchars(print_r($vars, true));
  8.         $content .= "\n</pre>\n";
  9.     } else {
  10.         $content = $label . " :\n" . print_r($vars, true);
  11.     }
  12.     if ($return) { return $content; }
  13.     echo $content;
  14.     return null;
  15. }
  16.   function remote_file_exists($url_file){
  17.     $url_file = trim($url_file);
  18.     if (empty($url_file)) return false;
  19.     $url_arr = parse_url($url_file);
  20.     if (!is_array($url_arr) || empty($url_arr)) return false;
  21.     $host = $url_arr['host'];
  22.     $path = $url_arr['path'] ."?".$url_arr['query'];
  23.     $port = isset($url_arr['port']) ?$url_arr['port'] : "80";
  24.     $fp = fsockopen($host, $port, $err_no, $err_str,30);
  25.     if (!$fp) return false;
  26.     $request_str = "GET ".$path." HTTP/1.1\r\n";
  27.     $request_str .= "Host:".$host."\r\n";
  28.     $request_str .= "Connection:Close\r\n\r\n";
  29.     fwrite($fp,$request_str);
  30.     $first_header = fread($fp, 128);
  31.     fclose($fp);
  32.     if (trim($first_header) == "") return false;
  33.     if (!preg_match("/200/", $first_header) || preg_match("/Location:/", $first_header)) return false;
  34.     return true;
  35.   }
  36. $url = "http://image.verylifes.com/webimages/78620c944c3a_9B13/201008230321.jpg";
  37. if (remote_file_exists($url)) {
  38.     $headInf = get_headers($url,1);
  39.     dump($headInf);
  40. }
  41. //输出结果
  42. //Array
  43. //(
  44. //    [0] => HTTP/1.1 200 OK
  45. //    [Date] => Thu, 26 Aug 2010 02:51:07 GMT
  46. //    [Server] => Apache
  47. //    [Last-Modified] => Mon, 23 Aug 2010 03:01:54 GMT
  48. //    [ETag] => "20a9e05-e220-4c71e4a2"
  49. //    [Accept-Ranges] => bytes
  50. //    [Content-Length] => 57888
  51. //    [Connection] => close
  52. //    [Content-Type] => image/jpeg
  53. //)

Simple happiness

您可能感兴趣的文章

]]> http://xfuxing.com/2010/custom-array-format-output-function-dump-useful-when-debugging-programs.html/feed 0 关于php判断远程文件是否存在的函数（remote_file_exists）的缺陷 http://xfuxing.com/2010/remote-file-exists-on-the-judgeu002639s-function-remote_file_exists-defects.html http://xfuxing.com/2010/remote-file-exists-on-the-judgeu002639s-function-remote_file_exists-defects.html#comments Tue, 24 Aug 2010 14:01:00 +0000 德海 http://xfuxing.com/2010/%e5%85%b3%e4%ba%8e%e5%88%a4%e6%96%ad%e8%bf%9c%e7%a8%8b%e6%96%87%e4%bb%b6%e6%98%af%e5%90%a6%e5%ad%98%e5%9c%a8%e7%9a%84%e5%87%bd%e6%95%b0%ef%bc%88remote_file_exists%ef%bc%89%e7%9a%84%e7%bc%ba%e9%99%b7.html 检查远程文件是否存在的方法有几种，其中比较被大家常用的是get_headers。一般都是通过获取文件头的方式来判断，而且如果在网上搜索一下“remote_file_exists”的话，会有很多例程，这里被大家常常转载的一段代码如下：

  1. function remote_file_exists($url_file){
  2. //检测输入
  3.     $url_file = trim($url_file);
  4.     if (empty($url_file)) { return false; }
  5.     $url_arr = parse_url($url_file);
  6.     if (!is_array($url_arr) || empty($url_arr)){return false; }
  7. //获取请求数据
  8.     $host = $url_arr['host'];
  9.     $path = $url_arr['path'] ."?".$url_arr['query'];
  10.     $port = isset($url_arr['port']) ?$url_arr['port'] : "80";
  11. //连接服务器
  12.     $fp = fsockopen($host, $port, $err_no, $err_str,30);
  13.     if (!$fp){ return false; }
  14. //构造请求协议
  15.     $request_str = "GET ".$path." HTTP/1.1\r\n";
  16.     $request_str .= "Host:".$host."\r\n";
  17.     $request_str .= "Connection:Close\r\n\r\n";
  18. //发送请求
  19.     fwrite($fp,$request_str);
  20.     $first_header = fgets($fp, 1024);
  21.     fclose($fp);
  22. //判断文件是否存在
  23.     if (trim($first_header) == ""){ return false; }
  24.     if (!preg_match("/200/", $first_header)){ return false; }
  25.     return true;
  26. }

这个方法里有一点需特别注意，在“$request_str = "GET ".$path." HTTP/1.1\r\n";”句中，“GET”后面的空格一定不能落下，而“HTTP”前面的空格也不能落下，至少我曾经因为这个问题而造成该函数读取不到文件信息头。但该段代码仍有一个缺陷，其中就是它使用了“fgets”读取头部第一行信息，只要该信息中存在“200”即认为要判断的文件存在，在文件名完全正确或错误的时候，该方法可行，不过如果你将文件的扩展名去掉（比如某个图片，将后面的扩展名去掉）一样可以得到该文件存在的消息。我在参考了PHP官网上老外的写法后修改整理为如下代码，在测试运行后发现可行，在此贴给大家，希望能够对大家有所帮助。代码如下：

  1. // CHECK REMOTE FILE EXISTS
  2. function remote_file_exists($url_file){
  3.     $url_file = trim($url_file);
  4.     if (empty($url_file)) return false;
  5.     $url_arr = parse_url($url_file);
  6.     if (!is_array($url_arr) || empty($url_arr)) return false;
  7.     $host = $url_arr['host'];
  8.     $path = $url_arr['path'] ."?".$url_arr['query'];
  9.     $port = isset($url_arr['port']) ?$url_arr['port'] : "80";
  10.     $fp = fsockopen($host, $port, $err_no, $err_str,30);
  11.     if (!$fp) return false;
  12.     $request_str = "GET ".$path." HTTP/1.1\r\n";
  13.     $request_str .= "Host:".$host."\r\n";
  14.     $request_str .= "Connection:Close\r\n\r\n";
  15.     fwrite($fp,$request_str);
  16.     //fread replace fgets
  17.     $first_header = fread($fp, 128);
  18.     fclose($fp);
  19.     if (trim($first_header) == "") return false;
  20.     //check $url_file "Content-Location"
  21.     if (!preg_match("/200/", $first_header) || preg_match("/Location:/", $first_header)) return false;
  22.     return true;
  23. }

Simple happiness

您可能感兴趣的文章

]]> http://xfuxing.com/2010/remote-file-exists-on-the-judgeu002639s-function-remote_file_exists-defects.html/feed 2 修改 mail to commenter,让邮件通知更加友好 http://xfuxing.com/2009/modify-the-mail-to-commenter-so-that-more-user-friendly-e-mail-notification.html http://xfuxing.com/2009/modify-the-mail-to-commenter-so-that-more-user-friendly-e-mail-notification.html#comments Tue, 03 Nov 2009 04:41:08 +0000 德海 http://xfuxing.com/2009/%e4%bf%ae%e6%94%b9-mail-to-commenter%e8%ae%a9%e9%82%ae%e4%bb%b6%e9%80%9a%e7%9f%a5%e6%9b%b4%e5%8a%a0%e5%8f%8b%e5%a5%bd.html JasonChao）跟我说，回复时，邮件地址显示为“WordPress 博客名称”，说这种方式从互动显示方面来讲不太友好，问我可不可以变换成“博客名称 ”的方式，我在没有经过原作者同意的情况下，试着去修改了一下，以达到这种友好的效果。]]> 曾经我推荐了一个插件，是国人写的关于邮件通知回复评论的一个插件，叫mail to commenter，这个插件很好，从功能和兼容各方面都不错，我也一直在用，不过昨天有位朋友（JasonChao）跟我说，回复时，邮件地址显示为“WordPress 博客名称”，说这种方式从互动显示方面来讲不太友好，问我可不可以变换成“博客名称 <no-reply@域名>”的方式，我在没有经过原作者同意的情况下，试着去修改了一下，以达到这种友好的效果。
好了，下面来跟着我去修改代码吧。
打开mail to commenter这个插件的目录，然后打开mailtocommenter_functions.php这个文件，在第213行会看到以下代码：

  1. function mailtocommenter_send_email($to,$subject,$message){
  2.     $blogname = get_option('blogname');

修改成如下：

  1. function mailtocommenter_send_email($to,$subject,$message){
  2. /* modify by freephp(http://xfuxing.com) 2009-11-3
  3. //source code
  4.     $blogname = get_option('blogname');
  5. */
  6. /* my modify code start (freephp)*/
  7. $hostname = get_option('home');    //get blog url
  8. preg_match("/^(http:\/\/)?([^\/]+)/i",$hostname, $matches);    //get hostname from blog url
  9. $blogname = get_option('blogname');
  10. $blogname .= " <no-reply@";    //blogname+<no-reply@
  11. $blogname .= $matches[2];    //blogname+<no-reply@+hostname
  12. $blogname .= ">";    //blogname+<no-reply@+hostname+>=blogname<no-reply@hostname>
  13. /* my modify code end (freephp)*/

好了，去测试一下吧，应当没什么问题的。所有的注释只是为了方便，您可以去掉，要注意的一点就是在“$blogname .= ” <no-reply@”;”这行里，“<”之前的空格一定不要去掉，否则会在编码上出现半个中文字（乱码）的样子，哈哈。哦，还有一点，一定要注意保存文件的格式：utf-8无BOM。

Simple happiness

您可能感兴趣的文章

]]> http://xfuxing.com/2009/modify-the-mail-to-commenter-so-that-more-user-friendly-e-mail-notification.html/feed 31 统计插件的测试记录 http://xfuxing.com/2009/statistics-plug-in-test-records.html http://xfuxing.com/2009/statistics-plug-in-test-records.html#comments Tue, 22 Sep 2009 06:10:00 +0000 德海 http://xfuxing.com/2009/%e7%bb%9f%e8%ae%a1%e6%8f%92%e4%bb%b6%e7%9a%84%e6%b5%8b%e8%af%95%e8%ae%b0%e5%bd%95.html 昨天把自己做的统计插件放在博里进行测试，发现很多莫名的直接访问，其中包括google、微软、yahoo和一个来自北京的IP，突然意识到，这是搜索引擎蜘蛛爬来抓网页了，晕倒，看来好好的测试还是有很必要的，做插件时没想到这个问题，于是使用下面一句代码屏蔽了蜘蛛抓取记录。

  1. if (preg_match("/(Bot|Crawl|Spider|slurp|sohu-search|lycos|robozilla)/i", $_SERVER['HTTP_USER_AGENT'])) return;

使用上面的代码后，又进行了测试，果然好多了，没有那么多的蜘蛛的记录在插件上了，可又很失落，唉，俺的博客太小了，来的人太少了，郁闷着的时候居然又想到一个问题，曾经很多朋友，尤其是刚刚做站的朋友，总是在感叹：蜘蛛怎么还不来抓啊？呵呵，看来各种时期都有各种时期的烦恼啊，于是乎想到将“是否记录蜘蛛抓取”这个作为选项，并在国旗的位置弄个蜘蛛旗，这样如果有人需要记录蜘蛛，那么会一目了然，这样既不费事，又些许增强了插件的功能，当然，我可没想让插件只记录蜘蛛，呵，如果您想专门记录蜘蛛的话（我想那样的朋友还是很少的吧），在这个插件正式发布后您可以自行修改，下面这段是区分这个蜘蛛是来自哪个搜索引擎的。

  1. function get_spider_name() {
  2.     $useragent = strtolower($_SERVER['HTTP_USER_AGENT']);
  3.     if (strpos($useragent, 'googlebot') !== false) return 'Googlebot';
  4.     if (strpos($useragent, 'msnbot') !== false) return 'MSNbot';
  5.     if (strpos($useragent, 'slurp') !== false) return 'Yahoobot';
  6.     if (strpos($useragent, 'baiduspider') !== false) return 'Baiduspider';
  7.     if (strpos($useragent, 'sohu-search') !== false) return 'Sohubot';
  8.     if (strpos($useragent, 'lycos') !== false) return 'Lycos';
  9.     if (strpos($useragent, 'robozilla') !== false) return 'Robozilla';
  10.     return false;
  11. }

OK，再测试两天，没有什么问题的话就发布了。

另：这个插件很简单，只是做一个统计访问，包含来源网站、来源网址、来源地和时间，限于自己英盲的水平，还请英语好的朋友给起个英文的插件名，如果您愿意的话，请留言给我，深表感谢。

Simple happiness

您可能感兴趣的文章

]]> http://xfuxing.com/2009/statistics-plug-in-test-records.html/feed 7 jquery动感菜单（导航）代码 http://xfuxing.com/2009/jquery-dynamic-menu-navigation-code.html http://xfuxing.com/2009/jquery-dynamic-menu-navigation-code.html#comments Thu, 23 Jul 2009 02:41:04 +0000 德海 http://xfuxing.com/abc/55 其实菜单（或说导航条？）有很多种，不是非要jquery不可，但有时这种菜单确实做得漂亮，虽然我下面这个菜单很简单，也是网上多个例子中的一个，但对我很实用，机制无非是用一张大图做背景，然后通过jquery来步进的移动这张背景图，造成动感。代码中的背景图没有附上，如果您喜欢，可以自己搞一张。大小嘛，199px X 100px。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Menu</title>

<style type="text/css">
ul {list-style:none;margin:0;padding:0;}
li {float:left;width:100px;margin:0;padding:0;text-align:center;}
li a {display:block;padding:5px 10px;height:100%;color:#FFF;text-decoration:none;border-right:1px solid #FFF;}
li a {background:url(bg2.jpg) repeat 0 0;}
li a:hover, li a:focus, li a:active {background-position:-150px 0;}
#menu a {background:url(bg.jpg) repeat -20px 35px;}

</style>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<script type="text/javascript">

$(function(){
$('#menu a')
.css( {backgroundPosition: "-20px 35px"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){
$(this).css({backgroundPosition: "-20px 35px"})
}})
})
});
$(function($) {
$.extend($.fx.step,{
backgroundPosition: function(fx) {
if (fx.state === 0 && typeof fx.end == 'string') {
var start = $.curCSS(fx.elem,'backgroundPosition');
start = toArray(start);
fx.start = [start[0],start[2]];
var end = toArray(fx.end);
fx.end = [end[0],end[2]];
fx.unit = [end[1],end[3]];
}
var nowPosX = [];
nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];

function toArray(strg){
strg = strg.replace(/left|top/g,'0px');
strg = strg.replace(/right|bottom/g,'100%');
strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
}
}
});
});
</script>

</head>
<body>
<div>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>

Simple happiness

您可能感兴趣的文章

]]> http://xfuxing.com/2009/jquery-dynamic-menu-navigation-code.html/feed 0 jquery滑动回顶部代码 http://xfuxing.com/2009/jquery-sliding-back-to-the-top-of-the-code.html http://xfuxing.com/2009/jquery-sliding-back-to-the-top-of-the-code.html#comments Wed, 22 Jul 2009 02:27:02 +0000 德海 http://xfuxing.com/abc/54 有时候因为网页太长，看到底部的时候再回到最上面的确是让人费劲的事情，拉动滚动条或用鼠标动作，太繁复了。在底部添加一个“返回顶部”的功能确实是不错，方法很多了，可以设锚点，可以用JS，不过这里要说的还是用jquery。代码也是很简单的，就不做说明了。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cn" lang="cn">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Top</title>

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
$('.gotop').click(function(){
$('html, body').animate({scrollTop: 0},300);
});
});
-->
</script>
<style type="text/css">

.gotop {
margin: 0;
padding: 0 20px;
height: 31px;
line-height: 31px;
border: 1px solid #999;
overflow: hidden;
position: relative;
background: #e0e0e0;
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
outline: none;
cursor: hand;
}
#kk {
height:1000px;
}

</style>

</head>
<body>
<div>
<ul>
<li>TOP!</li>
</ul>
</div>
<div id="kk"></div>
<div>
<ul>
<li class="gotop">go to top!</li>
</ul>
</div>
</body>
</html>

Simple happiness

您可能感兴趣的文章

]]> http://xfuxing.com/2009/jquery-sliding-back-to-the-top-of-the-code.html/feed 0 jquery隔行变色代码 http://xfuxing.com/2009/jquery-interlacing-color-code.html http://xfuxing.com/2009/jquery-interlacing-color-code.html#comments Tue, 21 Jul 2009 02:17:25 +0000 德海 http://xfuxing.com/abc/53 昨天记下个jquery的选项卡代码，今天继续记。
很多时候我们在评论或li列表里会用到隔行变色以及经过变色这样的功能，这个功能说来比较花哨，但又不失其实用效果，可以有效的缓解视疲劳，以及让观者不至看串行。废话少说，代码在下。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cn" lang="cn">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Discolor</title>

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
$("#list li:even").addClass("li_bg1");
$("#list li:odd").addClass("li_bg2");
$("#list li").hover(function(){
$(this).addClass("hover");
},
function(){
$(this).removeClass("hover");
});
});
-->
</script>
<style type="text/css">
#list .li_bg1 {
background:#FFF;
}
#list .li_bg2 {
background:#F0F;
}
#list li.hover {
background:#0F0;
}
</style>
</head>
<body>
<div>
<ul id="list">
<li>Content of the One!</li>
<li>Content of the Two!</li>
<li>Content of the Three!</li>
<li>Content of the Four!</li>
<li>Content of the Five!</li>
<li>Content of the Six!</li>
<li>Content of the Seven!</li>
<li>Content of the Eight!</li>
</ul>
</div>
</body>
</html>

代码很简单，不用做什么说明了。

Simple happiness

您可能感兴趣的文章

]]> http://xfuxing.com/2009/jquery-interlacing-color-code.html/feed 0 jquery选项卡代码 http://xfuxing.com/2009/jquery-option-card-code.html http://xfuxing.com/2009/jquery-option-card-code.html#comments Sun, 19 Jul 2009 02:54:05 +0000 德海 http://xfuxing.com/abc/52 一直想写个漂亮实用的主题，可无奈自己技术不够，甚至可以说是门外汉，虽然前几日依着K2和iNove以及大量的插件差点改出一个主题来，但最终还是放弃了。对于技术，咱这个门外汉还是奉行“拿来主义”吧，一点一点充实之后再厚积薄发。

第一个充实的——选项卡。

如今选项卡这种方式可是很热门的，在网上一搜一大片，本着小博有可能会依赖于lightbox2的图片效果，于是搜起了jquery这个JS框架下的相关代码，在查看了N个后，进行整合，于是，下面的代码热气腾腾的出炉了，虽说这样的代码网上比比皆是，但我还是记录下来，如果您凑巧也喜欢，那尽管拿去好了。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cn" lang="cn">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Tabs</title>

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
//When page loads
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content

var $div_li = $("ul.tabs li");
$div_li.click(function(){
$(this).addClass("active").siblings().removeClass("active");
var index = $div_li.index(this); //Click access to the current elements in all the <li> elements in the index.
$("div.tab_container > div").eq(index).show().siblings().hide();
}).hover(function(){
$(this).addClass("hover");
},function(){
$(this).removeClass("hover");
});
});
-->
</script>
<style type="text/css">
<!-- menu start -->
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0 20px;
height: 31px;
line-height: 31px;
border: 1px solid #999;
border-left: none;
margin-bottom: -1px;
overflow: hidden;
position: relative;
background: #e0e0e0;
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
outline: none;
cursor: hand;
}
ul.tabs li.hover {
background: #ccc;
}
ul.tabs li.active {
background: #fff;
border-bottom: 1px solid #999;
}
<!-- menu end -->
<!-- content start -->
.tab_container {
border: 1px solid #999;
border-top: none;
overflow: hidden;
clear: both;
float: left; width: 100%;
background: #fff;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}
<!-- content end -->
</style>
</head>
<body>
<div class="menu">
<ul class="tabs">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>

<div class="tab_container">
<div class="tab_content">
Content of the One!
</div>
<div class="tab_content">
Content of the Two!
</div>
<div class="tab_content">
Content of the Three!
</div>
</div>
</body>
</html>

代码很简单，不做太多说明了，留着备用。
哦，顺便庆祝一下PICASA终于正常了，我儿的照片又能显示了。

Simple happiness

您可能感兴趣的文章

]]> http://xfuxing.com/2009/jquery-option-card-code.html/feed 0