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

人都來了，不按個讚怎麼說得過去 ^_^

簡繁轉換

熱門文章

文章分類

友站連結

近期迴響

贊助商連結

其它