Coding | Vixual

[jQuery]《网页设计-爱上jQuery》读书心得及评论

使用 JavaScrip 的程式库来开发网页的程式可以加快开发的速度，其中 jQuery 也是颇受欢迎的一员。

不过目前可以买得到的 jQuery 中文书籍实在寥寥可数，以下是最近阅读《网页设计-爱上jQuery》这本书的心得及评论 (作者是罗子洋)。 Read more

04 Jan 2009
5 comments

[MySQL]处理字符编码的一些心得

因为我在写程式所用的到的 MySQL，同时有 3.x 版及 5.x 版要处理，所以对 MySQL 的字符编码问题需要特别做研究，研究了一阵子之后，终于有了一些初步的心得，列出旧版及新版的 MySQL 做为比较:
Read more

10 Aug 2008
Write comment

[转载][MySQL]MySQL 的 SET NAMES xxx 字符编码问题分析

转载自: PHPChina

近来接受 BBT 的培训，做一个投票系统。系统程式码倒不是很难，但是我的时间主要花费在了研究字符集和编码上面。MySQL 和 Apache 两个系统的编码 (字符集) 问题让我费劲脑筋，吃尽苦头。网上对这些问题的解决比较零散，比较片面，大部分是提供解决方法，却不说为什么。于是我将这几天收获总结一下，避免后来者再走弯路。这篇文章对 PHP 编写有一点帮助 (看完你就知道，怎样让你的 PHP 程式在大部分空间提供商的服务器里显示正常)，但是更多帮助在于网络服务器的架设和设置。
Read more

08 Aug 2008
1 comment

[PHP]让 FCKeditor 浏览图档时，可以显示缩图

FCKeditor 虽然有提供很多种程式语言的档案浏览程式，让你可以很方便地上传及插入远端服务器上的图档，但在浏览档案的同时，我们最需要用到的图档却不能显示缩图，感觉很不方便 (应该是故意留了一手)。

虽然官方网站上有建议使用 CKFinder 这支外挂程式来管理服务器上的档案，但 CKFinder 却不是免费的。

思考了一下，虽然我的 PHP 很烂，但只是要做个缩图的功能应该还难不倒我，于是就花了几个小时把缩图的功能实做出来。原理很简单，只是先在相同目录下产生 ".thumb.gif" 的缩图档，在列示时将缩图显示出来。

SVN + Trac + Apache 完整安装攻略

SVN + Trac + Apache 完整安装攻略，而原本在 SVN 所欠缺的用户及权限管理接口，也都可以由 Trac 的外挂程式来搞定，可谓两全其美。

本文章适合熟悉 SVN 但没用个任何线上专案管理的人做为参考。

请注意，本人使用的 Linux 是 CentOS 4.x，RHEL 4.x 也适用。

[JavaScript]动态网页设计的相关网页 (dhtml)

国外网站

中文网站

其它

Pingdom Tools测试及分析网站加载的速度

13 Sep 2007
Write comment

正规表示式 (Regular Expression) 语法整理

正规表示式 (Regular Expression, 简写 regex、regexp 或 RE) 是用于字串比对的小型语言，又称正则表达式、正规表示法、规则运算式、常规表示法 (Wiki)。

很多程式语言和软件都会附加“正规表示式”这项功能。在字串的处理上，针对大量、重复、有固定逻辑的文字，正规表示式是非常强而有力的工具! 即便不是程式设计师，在可以在运用到正规表示式的场合 (例如: 文字编辑器)，能帮你节省许多文字处理的时间。但是不同的软件所附加的正规表示式可能略有差异，这部份就要稍加留意。

不过在初学者的眼中，正规表示式却又像是天书一样的难以理解。以下文章针对正规表示式的相关语法做解说，你可到线上测试工具，以实际的例子去做测试。

[Perl][JavaScript]以数学的原理处理四舍五入

我看过太多人都把四舍五入的问题看成是“字串”来处理，实际上，如果把四舍五入做为“数学”来解的话，程式大概只要几行即可解决。

以四舍五入取整数的例子来讲，其原理就是: 任何数值 +0.5 再取整数。

但要注意的是，当四舍五入遇到“负数”时就会变成“五舍六入”，这是因为中间数要往数值大的那边进位的缘故。所以加上了负数的处理，程式至少又多了一行:
Read more

Coding

23 Aug 2007
3 comments

[JavaScript]让网页的“外部超连结”自动开启在新视窗

在编辑网页时，如果要让某个超连结 (Link) 开启在新的浏览器视窗，我们可以在超连结加上“href="_blank"”属性，但如果超连结很多，要一个一个加上去毕竟麻烦!!

以下的程式码可以帮你把网页内所有针对“外部”的超连结自动设为在新视窗开启。

一般网页

将下列程式码加到网页的 <head> 区段:

<script type="text/javascript">
function parseLink(){
  var tagA = document.getElementsByTagName( "a" );
  re = new RegExp( "^(http://" + document.domain + ")|(javascript:)", "i" );
  for( var i=0; i < tagA.length; i++ ){
    if( !tagA[i].href.match( re ) ){ tagA[i].target = "_blank"; }
  }
}
</script>

在 <body> 标签内的 onload 事件加入:
```
parseLink();
```
Ex:
```
<body onload="parseLink();">
```

WordPress 外挂程式

如果你的网站是用 WordPress 架设，可直接在控制台搜寻并安装“Open external links in a new window”这个外挂程式 (版本: 1.3.1 作者: Kristian Risager Larsen)，这样就不用添加任何程式码了。

另外需注意，如果本外挂程式与其它像 LightBox、FancyBox...之类的图片灯箱特效的程式一起使用，有可能会造成同时显示灯箱特效，又同时将图片开启于新视窗!!

16 Aug 2007
11 comments

在 Blogger 中使用 dp.SyntaxHighlighter 显示程式码

db.SyntaxHighlighter 是一支不错的程式码高亮度显示程式，特点为:

显示行号
支援12种程式语言
模组化加载需要的程式语言
支援 “<pre>” 及 “<textarea>” 区块
纯文字检视
复制到剪贴簿
直接打印程式码

缺点就是加载速度较慢。

安装步骤

修改 blogger 样板，搜寻 “</body>”，在 “上方” 加入(你可以选择你要的语言加载即可):

<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shCore.js'></script>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushPhp.js'></script>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushJScript.js'></script>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushSql.js'></script>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushXml.js'></script>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushDelphi.js'></script>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushPython.js'></script>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushRuby.js'></script>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushCss.js'></script>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushCpp.js'></script>
<script class='javascript'>
dp.SyntaxHighlighter.ClipboardSwf = 'http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>

(因为 “偷吃步” 的关系，程式直接连到 dp.SyntaxHighlighter 的 SVN 上，你可以视情况下载回来放到自己的服务器)

dp.SyntaxHighlighter 原本已经有一个 CSS 档了，但如果将这个 CSS 档以 “Link” 的方式加载，却无法正常显示。所以，请自行增加下列 CSS 到 blogger 样板的 CSS 区段:

/*dp.highlighter*/
.dp-highlighter {
  font-family: "Consolas", "Courier New", Courier, mono;
  font-size: 12px;
  background-color: #E7E5DC;
  width: 99%;
  overflow: auto;
  margin: 18px 0px 18px 0px;
  padding-top: 1px; /* adds a little border on top when controls are hidden */
  border:1px inset;
  max-height:200px;
}
.dp-highlighter .bar {
  padding-left: 45px;
}
.dp-highlighter.collapsed .bar,
.dp-highlighter.nogutter .bar {
  padding-left: 0px;
}
.dp-highlighter ol {
  list-style: decimal; /* for ie */
  list-style: decimal-leading-zero; /* better look for others */
  background-color: #fff;
  margin: 0px 0px 1px 45px; /* 1px bottom margin seems to fix occasional Firefox scrolling */
  padding: 0px;
  color: #5C5C5C;
}
.dp-highlighter.nogutter ol {
  list-style-type: none !important;
  margin-left: 0px;
}
.dp-highlighter ol li,
.dp-highlighter .columns div {
  border-left: 3px solid #6CE26C;
  background-color: #f8f8f8;
  padding-left: 10px;
  line-height: 14px;
}
.dp-highlighter.nogutter ol li,
.dp-highlighter.nogutter .columns div {
  border: 0;
}
.dp-highlighter .columns {
  color: gray;
  overflow: hidden;
  width: 100%;
}
.dp-highlighter .columns div {
  padding-bottom: 5px;
}
.dp-highlighter ol li.alt {
  background-color: #fff;
}
.dp-highlighter ol li span {
  color: Black;
}
/* Adjust some properties when collapsed */
.dp-highlighter.collapsed ol {
  margin: 0px;
}
.dp-highlighter.collapsed ol li {
  display: none;
}
/* Additional modifications when in print-view */
.dp-highlighter.printing {
  border: none;
}
.dp-highlighter.printing .tools {
  display: none !important;
}
.dp-highlighter.printing li {
  display: list-item !important;
}
/* Styles for the tools */
.dp-highlighter .tools {
  padding: 3px 8px 3px 10px;
  font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
  color: silver;
  background-color: #f8f8f8;
  text-align1: right;
  padding-bottom: 10px;
  border-left: 3px solid #6CE26C;
}
.dp-highlighter.nogutter .tools {
  border-left: 0;
}
.dp-highlighter.collapsed .tools {
  border-bottom: 0;
}
.dp-highlighter .tools a {
  font-size: 9px;
  color: #a0a0a0;
  text-decoration: none;
  margin-right: 10px;
}
.dp-highlighter .tools a:hover {
  color: red;
  text-decoration: underline;
}
/* About dialog styles */
.dp-about { background-color: #fff; margin: 0px; padding: 0px; }
.dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
.dp-about td { padding: 10px; vertical-align: top; }
.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
.dp-about .title { color: red; font-weight: bold; }
.dp-about .para { margin: 0 0 4px 0; }
.dp-about .footer { background-color: #ECEADB; border-top: 1px solid #fff; text-align: right; }
.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; width: 60px; height: 22px; }
/* Language specific styles */
.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; }
.dp-highlighter .string { color: blue; }
.dp-highlighter .keyword { color: #069; font-weight: bold; }
.dp-highlighter .preprocessor { color: gray; }

储存即可

使用方法

方法一 - 使用 “<textarea>” 区块，需将 “&” 转换为 “&”:
```
<textarea name="code" class="程式语言">
程式码
</textarea>
```
方法二 - 使用 “<pre>” 区块，需将 “&” 转换为 “&”、”<” 转换为 “<”、”>” 转换为 “>”:
```
<pre name="code" class="程式语言">
程式码
</pre>
```

参考网页

使用 google-code-prettify 显示程式码

29 Jul 2007
Write comment

Vixual

Archive for the ‘ Coding ’ Category

[jQuery]《网页设计-爱上jQuery》读书心得及评论

[MySQL]处理字符编码的一些心得

[转载][MySQL]MySQL 的 SET NAMES xxx 字符编码问题分析

[PHP]让 FCKeditor 浏览图档时，可以显示缩图

SVN + Trac + Apache 完整安装攻略

[JavaScript]动态网页设计的相关网页 (dhtml)

国外网站

中文网站

其它

正规表示式 (Regular Expression) 语法整理

[Perl][JavaScript]以数学的原理处理四舍五入

[JavaScript]让网页的“外部超连结”自动开启在新视窗

一般网页

WordPress 外挂程式

在 Blogger 中使用 dp.SyntaxHighlighter 显示程式码

安装步骤

使用方法

参考网页

PAGE NAVI

INFORMATION

人都来了，不按个赞怎么说得过去 ^_^

简繁转换

热门文章

文章分类

友站连结

近期回响

赞助商连结

其它