[jQuery]《網頁設計-愛上jQuery》讀書心得及評論
使用 JavaScrip 的程式庫來開發網頁的程式可以加快開發的速度,其中 jQuery 也是頗受歡迎的一員。
不過目前可以買得到的 jQuery 中文書籍實在寥寥可數,以下是最近閱讀《網頁設計-愛上jQuery》這本書的心得及評論 (作者是羅子洋)。 Read more
使用 JavaScrip 的程式庫來開發網頁的程式可以加快開發的速度,其中 jQuery 也是頗受歡迎的一員。
不過目前可以買得到的 jQuery 中文書籍實在寥寥可數,以下是最近閱讀《網頁設計-愛上jQuery》這本書的心得及評論 (作者是羅子洋)。 Read more
因為我在寫程式所用的到的 MySQL,同時有 3.x 版及 5.x 版要處理,所以對 MySQL 的字元編碼問題需要特別做研究,研究了一陣子之後,終於有了一些初步的心得,列出舊版及新版的 MySQL 做為比較:
Read more
SVN + Trac + Apache 完整安裝攻略,而原本在 SVN 所欠缺的用戶及權限管理介面,也都可以由 Trac 的外掛程式來搞定,可謂兩全其美。
本文章適合熟悉 SVN 但沒用個任何線上專案管理的人做為參考。
請注意,本人使用的 Linux 是 CentOS 4.x,RHEL 4.x 也適用。
正規表示式 (Regular Expression, 簡寫 regex、regexp 或 RE),又稱正則表達式、正規表示法、規則運算式、常規表示法 (Wiki)。
在字串的處理上,針對大量、重複、有固定邏輯的文字,那「正規表示式」是非常 Powerful 的工具! 即便不是程式設計師,在可以運用到「正規表示式」的場合 (例如: 文字編輯器),也可以幫你節省許多文字處理的時間。
但是在初學者的眼中,正規表示式卻又像是天書一樣的難以理解。以下文章僅針對正規表示式的相關語法做解說,初學者可以撘配本站轉載的文章「PHP 正規表示式基本語法」去理解,再進入線上測試工具,以實際的例子去做測試。
我看過太多人都把四捨五入的問題看成是「字串」來處理,實際上,如果把四捨五入做為「數學」來解的話,程式大概只要幾行即可解決。
以四捨五入取整數的例子來講,其原理就是: 任何數值 +0.5 再取整數。
但要注意的是,當四捨五入遇到「負數」時就會變成「五捨六入」,這是因為中間數要往數值大的那邊進位的緣故。所以加上了負數的處理,程式至少又多了一行:
Read more
在編輯網頁時,如果要讓某個超連結 (Link) 開啟在新的瀏覽器視窗,我們可以在超連結加上「href="_blank"」屬性,但如果超連結很多,要一個一個加上去畢竟麻煩!!
以下的程式碼可以幫你把網頁內所有針對「外部」的超連結自動設為在新視窗開啟。
<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>
parseLink();
Ex:
<body onload="parseLink();">
如果你的網站是用 WordPress 架設,可直接在控製台搜尋並安裝「Open external links in a new window」這個外掛程式 (版本: 1.3.1 作者: Kristian Risager Larsen),這樣就不用添加任何程式碼了。
另外需注意,如果本外掛程式與其它像 LightBox、FancyBox...之類的圖片燈箱特效的程式一起使用,有可能會造成同時顯示燈箱特效,又同時將圖片開啟於新視窗!!
db.SyntaxHighlighter 是一支不錯的程式碼高亮度顯示程式,特點為:
缺點就是載入速度較慢。
<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.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 name="code" class="程式語言"> 程式碼 </textarea>
<pre name="code" class="程式語言"> 程式碼 </pre>
我們解決了什麼問題?我們創造了什麼價值?
近期迴響