CSS - IE使用letter-spacing

最近公司的網頁遇到一個怪怪的問題
當HTML裡面有<br>時會無法正確換行
稍微測試了一下發現
原來是css的letter-spacing在作怪
於是上網搜尋了一下
原來也有大大們遇到此問題
解決方式就是再發生問題的css下方在加上一個br的css .b13 { letter-spacing:2px; } .b13 br { letter-spacing:0px; }

jQuery - autocomplete

最近為了公司的某個案子需求，找了一個輸入自動完成的功能，而且還有多重選擇的效果
重點是：在IE 6也可以用喔^^"
點我看範例
使用方法如下： <link rel="stylesheet" type="text/css" href="jquery.autocomplete/jquery.autocomplete.css" /> <script type='text/javascript' src='jquery.autocomplete/lib/jquery.bgiframe.min.js'></script> <script type='text/javascript' src='jquery.autocomplete/jquery.autocomplete.js'></script> 遠端取得資料的範例： <script type="text/javascript"> jQuery(document).ready(function($) { function formatItem(row) { return row[0] + " (<strong>id: " + row[1] + "</strong>)"; } function formatResult(row) { return row[0].replace(/(<.+?>)/gi, ''); } $("#vay_teacher").autocomplete('vi_teacher.php', { width: 300, multiple: true, matchContains: true, formatItem: formatItem, formatResult: formatResult }); }); </script> 我的範例是到遠端取得資料，但是如果資料很多的話，可能會有點慢喔
我同事在使用IE時會沒反應= ="

先把資料載進來的範例： <script type="text/javascript"> var teacher_list = [ { name: "王小明", tid: "1283" }, { name: "王小強", tid: "1260" } ]; jQuery(document).ready(function($) { $("#vay_teacher").autocomplete(teacher_list, { width: 300, multiple: true, matchContains: true, formatItem: function(row, i, max) { return row.name + " (id:" + row.tid + ")"; }, formatResult: function(row) { return row.name + "@" + row.tid; } }); }); </script>

get_browser()取得用戶端資訊

如果只是要取得用戶端瀏覽器資訊可以使用 $user_agent = $_SERVER['HTTP_USER_AGENT'] echo $user_agent; #Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648; Dealio Toolbar 3.4) 如果要取得用戶端資訊可以使用 $browser = get_browser($_SERVER['HTTP_USER_AGENT'], true); echo "<pre>"; var_dump($browser); echo "</pre>"; /* array(31) { ["browser_name_regex"]=> string(61) "^mozilla/4\.0 (compatible; msie 6\.0; .*windows nt 5\.1.*).*$" ["browser_name_pattern"]=> string(53) "Mozilla/4.0 (compatible; MSIE 6.0; *Windows NT 5.1*)*" ["parent"]=> string(6) "IE 6.0" ["platform"]=> string(5) "WinXP" ["browser"]=> string(2) "IE" ["version"]=> string(3) "6.0" ["majorver"]=> string(1) "6" ["win32"]=> string(1) "1" ["frames"]=> string(1) "1" ["iframes"]=> string(1) "1" ["tables"]=> string(1) "1" ["cookies"]=> string(1) "1" ["backgroundsounds"]=> string(1) "1" ["cdf"]=> string(1) "1" ["vbscript"]=> string(1) "1" ["javaapplets"]=> string(1) "1" ["javascript"]=> string(1) "1" ["activexcontrols"]=> string(1) "1" ["cssversion"]=> string(1) "2" ["supportscss"]=> string(1) "1" ["minorver"]=> string(1) "0" ["alpha"]=> string(0) "" ["beta"]=> string(0) "" ["win16"]=> string(0) "" ["win64"]=> string(0) "" ["isbanned"]=> string(0) "" ["ismobiledevice"]=> string(0) "" ["issyndicationreader"]=> string(0) "" ["crawler"]=> string(0) "" ["aol"]=> string(0) "" ["aolversion"]=> string(1) "0" } */ 但是使用get_browser()還須配合browscap.ini才能使用
通常系統是沒有此檔案
網路上搜尋下載後需放至非www資料夾才能使用
記得要到php.ini設定讀取路徑

如何寫入 image 到 Sybase

首先必須開一個二位元的欄位，ex：binary,varbinary,image,bit
以下是寫入的範例： $PSize = filesize($_FILES['bn_img']['tmp_name']); $bn_img = bin2hex(fread(fopen($_FILES['bn_img']['tmp_name'], "r"), $PSize)); $sql = "insert into banner (image_file) values (0x".$bn_img.")"; sybase_query($sql,$conn); 但是在讀出圖檔時，無法直接在網頁直接讀出，必須要特別處理，如下： <img src="./image.php?bn_id=<?=$bn_id?>" width="120" height="90" /> 而image.php的內容如下： .... ....sybase_query($queryStr,$conn); .... function hex2bin($data) { $len = strlen($data); return pack("H" . $len, $data); } echo hex2bin($bn_img)

jQuery - checkbox, radio, select

獲取一組radio被選中項的值
var item = $('input[@name=items][@checked]').val();
獲取select被選中項的文本
var item = $("select[@name=items] option[@selected]").text();
select下拉框的第二個元素為當前選中值
$('#select_id')[0].selectedIndex = 1;
radio單選組的第二個元素為當前選中值
$('input[@name=items]').get(1).checked = true;

獲取值：

文本框，文本區域：$("#txt").attr("value")；
多選框checkbox：$("#checkbox_id").attr("value")；
單選組radio： $("input[@type=radio][@checked]").val();
下拉框select： $('#sel').val();

控制表單元素：
文本框，文本區域：$("#txt").attr("value",'');//清空內容
$("#txt").attr("value",'11');//填充內容

多選框checkbox： $("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined) //判斷是否已經打勾

單選組radio： $("input[@type=radio]").attr("checked",'2');//設置value=2的項目為當前選中項
下拉框select： $("#sel").attr("value",'-sel3');//設置value=-sel3的項目為當前選中項
$("11112222").appendTo("#sel")//添加下拉框的option
$("#sel").empty()；//清空下拉框

jQuery - ThickBox

最近為了公司的案子找了一個類似遮效果的plugin ThickBox
使用方式非常簡單
先至上面的網站下載他的檔案
然後在html原始碼的<head></head>中間加上
<script type="text/javascript" src="path-to-file/jquery.js"></script>
<script type="text/javascript" src="path-to-file/thickbox.js"></script>
<link rel="stylesheet" href="path-to-file/thickbox.css" type="text/css" media="screen" />
這樣就算是設定完成
接著只需要在想啟動效果的連結位置加上class="thickbox"即可，我們列幾個常用的例子 #a link： <a href="http://ice-note.blogspot.com/index.php?height=460&width=510" class="thickbox">ICE NoteBook</a> #button： <input type="image" src="submit.gif" alt="http://ice-note.blogspot.com/index.php?height=460&width=510" class="thickbox"> #使用iframe只要在連結後面加上&KeepThis=true&TB_iframe=true <a href="http://ice-note.blogspot.com/index.php?height=460&width=510&KeepThis=true&TB_iframe=true" class="thickbox">ICE NoteBook</a> #如果不想使用它附屬關閉畫面的工具，可以在連結後面加上&modal=true <a href="http://ice-note.blogspot.com/index.php?height=460&width=510&modal=true" class="thickbox">ICE NoteBook</a> #手動關閉畫面可使用javascript語法關閉 tb_remove() 有需要的人可以去網站看看
裡面有許多例子

實做筆記：
如果網頁裡面有flash的話可能會形成破圖的感覺
這時候只需要在flash設定裡面加上
<param name="wmode" value="transparent" />

如果是使用AC_RUNTIME的話可以加上
AC_FL_RunContent( .....,'wmode','transparent'); 這樣就可以囉

jQuery - Validation

相信很多人在製作表單功能時都會遇到某些欄位是必填的
如果不想在送出之後做檢查的話
一般來說都是用javascript的做判斷
然後alert訊息通知填寫者
不過有些人卻很討厭alert
這時候我們可以使用此jQuery來達到不同的效果
點我進入網站
進入後馬上就可以看到範例
網頁裡面也有提到如何使用
在這個Plugin裡面也有寫好許多驗證的方式
想嚐試的人可以試試看喔

實做筆記：
1.如果不想讓USER重複按送出鈕可以加上下面的function function checkForm(){ if ($("#form2").validate().form()){ document.getElementById("Submit").disabled=true; } } 2.如果要檢查某個資料是否已使用可以在rules加上remote: "userid.php"，
但是注意的是必 須return true or false

用PEAR繪製各種統計圖

請先到官網下載Image_Graph套件，另外其他的套件也要下載喔
以下是我繪製圓餅圖的範例// create the graph $Graph =& Image_Graph::factory('graph', array(400, 300)); // add a TrueType font $Font =& $Graph->addNew('font', 'Arial'); // set the font size to 11 pixels $Font->setSize(8); $Graph->setFont($Font); // create the plotareas $Plotarea =& $Graph->addNew('plotarea'); $Plotarea->hideAxis(); // create the dataset //$Dataset =& Image_Graph::factory('random', array(10, 10, 20, true)); $Dataset =& Image_Graph::factory('dataset'); // create the 1st plot as smoothed area chart using the 1st dataset $Dataset->addPoint('Alex', 10); $Dataset->addPoint('Jim', 5); $Dataset->addPoint('Kevin', 6); $Plot =& $Plotarea->addNew('Image_Graph_Plot_Pie', $Dataset); /*加上百分比 start*/ // create a Y data value marker $Marker =& $Plot->addNew('Image_Graph_Marker_Value', IMAGE_GRAPH_PCT_Y_TOTAL); // create a pin-point marker type $PointingMarker =& $Plot->addNew('Image_Graph_Marker_Pointing_Angular', array(20, &$Marker)); // and use the marker on the 1st plot $Plot->setMarker($PointingMarker); // format value marker labels as percentage values $Marker->setDataPreprocessor(Image_Graph::factory('Image_Graph_DataPreprocessor_Formatted', '%0.1f%%')); /*加上百分比 end*/ $Plot->Radius = 2; // set a line color $Plot->setLineColor('gray'); // set a standard fill style $FillArray =& Image_Graph::factory('Image_Graph_Fill_Array'); $Plot->setFillStyle($FillArray); $FillArray->addColor('green@0.2'); $FillArray->addColor('blue@0.2'); $FillArray->addColor('yellow@0.2'); $FillArray->addColor('red@0.2'); $FillArray->addColor('orange@0.2'); // add a title using the created font $Graph->addNew('title', array('TEST PIE', 11)); //$Plot->explode(3); // output the Graph $Graph->done();

用PHP繪製圓餅圖

以下是作者的網站位置
http://www.peters1.dk/webtools/php/lagkage.php?sprog=en
將作者所提供的程式存成.php檔，如：pie.php，再利用以下語法即可產生圓餅圖

不過如果你需要顯示中文的話，則檔案格式必須為UTF-8，否則會產生亂碼 另外須修改以下的程式碼

將 imagestring($img,'2',$width+20,$label_place,$label_output,colorHex($img, $text_color)); 改成 $font_file = "uming.ttf"; ImageTTFText($img, 10, 0, $width+20, $label_place+10, colorHex($img, $text_color), $font_file, $label_output);

uming.ttf為文鼎科技慷慨提供給自由軟體社群的文鼎PL細上海宋 (Big5 碼) 以及文鼎PL簡報宋 (GB 碼) 的衍生版本，
惟使用者利用時必須遵守文鼎公眾授權書 (Arphic Public License) 的規定。

不過我在測試時發現小數點好像會變成逗點 不知道有沒有人跟我一樣

輕量的Pass_img程式

-- Chi_Passimg.php 程式碼如下 --- // 圖形驗証碼 By 二林網管 村仔 // 本程式獨立使用,呼叫時為 // 程式則產生圖形驗証碼，並將值寫在Session中 // 要檢驗時，只須將Session中存放的 $_session[Pass_img] 拿出來和您表單上的值核對即可 session_start(); $aa=new pass_img();//建立物件 $aa->show_str();//秀出驗証數字碼 class pass_img { var $pass; var $weight=70; var $height=24; function pass_img() { $t1=range('A', 'Z'); $t2=range(a,z); mt_srand((double)microtime()*1000000); $this->pass=$t1[mt_rand(0,25)].$t2[mt_rand(0,25)].sprintf("%04d",mt_rand(1,9999)); unset($_SESSION["Pass_img"]); session_register("Pass_img"); $_SESSION["Pass_img"]=$this->pass; } function show_str() { $size = "6"; // 字體大小0-6 $x = "5"; //字開頭 x 座標 $y = "3"; //字開頭 y 座標 $R = 255; //字的紅色值 $G = 15; //字的綠色值 $B = 15; //字的藍色值 $origImg = @imagecreate($this->weight,$this->height); $backgroundcolor = ImageColorAllocate($origImg,255,255,255); $textcolor = ImageColorAllocate ($origImg ,$R ,$G ,$B); Imagestring($origImg,$size,$x,$y,$this->pass,$textcolor); //加入干擾線(可不加) //Imageline($origImg,0,9,70,9,$textcolor); //x1,y1,x2,y2,color //加入干擾點(可不加) for($i=0;$i<100;$i++) { $randcolor = ImageColorallocate($origImg,rand(0,255),rand(0,255),rand(0,255)); imagesetpixel($origImg,rand()%$this->weight,rand()%$this->height,$randcolor); } //產生圖形 ImagePNG($origImg); ImageDestroy($origImg); } }

PHP的幾個正規表示式

//手機格式 09XX-XXX-XXX 09[0-9]{2}-[0-9]{3}-[0-9]{3} //手機格式 09XX-XXXXXX 09[0-9]{2}-[0-9]{6} //檢查E-mail ereg(”[a-zA-Z0-9\._\+]+@([a-zA-Z0-9\.-]\.)*[a-zA-Z0-9\.-]+”, $Email); if (eregi("^[_\.0-9a-z-]+@([0-9a-z][0-9a-z-]+\.)+[a-z]{2,3}$",$email)) echo "您的 E-Mail 通過初步檢查"; //檢查IP格式（XXX.XXX.XXX.XXX） [0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3} //檢查身分証格式 if ( strlen($_POST[id]) !=10 || ! eregi("^[A-Z]{1}[0-9]{9}",$_POST[id]) ) die("Error!") ;

jQuery - Input Hints

相信很多人在填寫表單的時候不知道應該怎麼填 這時候如果有提示訊息的話一定很好
點我進入網站
以下是他的範例：<form action=""> <div><label for="search">Search:</label> <input type="text" name="seach" value="" id="search" title="Company name or ticker" /> <input type="submit" value="Go" /> </div> </form> 表單的提示訊息是來自title，所以別忘記設定他喔

月曆與記事連結

先到日本網站下載月曆的flash吧 進入月曆網站 進入網站後可以選擇長型或者方形 選擇一個點擊進去後會有使用說明 包括放置在網頁的flash語法、還有記事連結的檔案內容格式 還蠻有趣的 不過讀取記事的速度好像有點慢 想玩的可以試試看

PHPMailer

如果公司沒有用PEAR的套件 那麼這個是不錯用的Mail工具 首先請先到官網下載 PHPMailer 解開壓縮後裡面會有一堆檔案 真正用到的只有 class.phpmailer.php class.smtp.php 放到想放的位置後就可以開始寫程式了，以下是我的範例 include_once("class.phpmailer.php"); $mail = new PHPMailer(); $mail->CharSet = "utf-8"; $mail->ContentType = "text/html"; $mail->From = "test@smtp.com.tw"; $mail->FromName = "List manager"; $mail->Host = "localhost"; $mail->Mailer = "smtp"; $mail->Subject = "HTML測試標題"; $body = 'Html code'; $mail->Body = $body; $mail->AddAddress('test@smtp.com.tw', 'ICE'); if (!$mail->Send()){     echo "False!!"; }else{    echo "True!!"; } 實做筆記： $mail->ErrorInfo;
可以利用上面的function取得錯誤資訊

PEAR Mail

如果只是要單純的寄送信件，PHP內附的mail()就夠用了，
但還是有使用上的限制，例如：寄送HTML、副檔等，這時可以利用PEAR的Mail了。

首先先到官網下載套件吧
PEAR::Mail
PEAR::Mail_Mime

Mail：傳送 email 的介面
Mail_Mime：用來產生 multipart messages

Mail寄送說明：

object &factory (string $backend [, array $params = array()])
‧$backend有三種類型："mail","smtp","sendmail"。
‧$param 後端程式所需的參數。
　‧mail 不需參數
　‧sendmail
　　$param["sendmail_path"] sendmail 程式所在路徑，Default is /usr/bin/sendmail
　　$param["sendmail_args"] sendmail 程式所需參數
　‧smtp
　　$param["host"] SMTP 伺服器位置，Default is localhost
　　$param["port"] SMTP 連接埠，Default is 25
　　$param["auth"] SMTP 是否使用認證
　　$param["username"] SMTP 認證使用者
　　$param["password"] SMTP 認證密碼
//寄送範例(smtp)： $from_name = mb_encode_mimeheader($from_name, "ISO-2022-JP", "Q"); $to_name = mb_encode_mimeheader($to_name, "ISO-2022-JP", "Q"); $subject = mb_encode_mimeheader($subject, "ISO-2022-JP", "Q"); $mailmsg = mb_convert_encoding($mailmsg, "ISO-2022-JP", "AUTO"); $From = "From: ".$from_name." <fromaddress@domain.com>"; $To = "To: ".$to_name." <toaddress@domain.com>"; $recipients = "toaddress@domain.com"; $headers["From"] = $From; $headers["To"] = $To; $headers["Subject"] = $subject; $headers["Reply-To"] = "reply@address.com"; $headers["Content-Type"] = "text/plain; charset=ISO-2022-JP"; $headers["Return-path"] = "returnpath@address.com"; $smtpinfo["host"] = "localhost"; $smtpinfo["port"] = "25"; $smtpinfo["auth"] = false; $smtpinfo["username"] = "smtp_user"; $smtpinfo["password"] = "smtp_password"; $mail_object =& Mail::factory("smtp", $smtpinfo); $mail_object->send($recipients, $headers, $mailmsg); Mail_Mime寄送說明：

Mail_Mime 這個類別的最主要功用，就是用來產生 multipart messages。
使用 Mail_Mime 製作出 multipart messages 之後，再使用 Mail::send() 來傳送。
產生 multipart messages 的步驟有：
1.使用 Mail_mime() 建立新的 Mail_mime 物件(constructor)。
2.至少要使用 setTXTBody(), setHTMLBody(), addHTMLImage() 或 addAttachment()四者其中之一建立內文或附檔。（當然通常的情況不只使用一個囉）
3.使用 get() 傳回內文。
4.使用 headers() 傳回檔頭。
5.利用傳回的內文與檔頭丟給 Mail::send() 送信。

Mail_mime::Mail_mime() 用來產生一個新的 Mail_Mime 物件。
語法：Mail_mime Mail_mime ([string $crlf = "\r\n"])
$crlf 通常可以不用指定。

Mail_mime::setTxtBody() 設定郵件中的純文字部分。
語法：mixed setTxtBody (string $data [, boolean $isfile = false])
$data 可以是檔名或字串

Mail_mime::setHTMLBody() 設定郵件中的超文件部分。
語法：mixed setHTMLBody (string $data [, boolean $isfile = false])
$data 可以是檔名或字串。

Mail_mime::addHTMLImage() 內嵌圖檔於超文件之中。
語法：mixed addHTMLImage (string $data, string [$c_type = 'application/octet-stream'] [, string $name = '' [, boolean $isfile = true]])
$data 可以是圖檔檔名或本身就是圖檔資料。
$c_type 圖檔的檔案類型，通常不用改。
$name 圖檔的檔名，只有在 $data 本身是圖檔資料時使用。

Mail_mime::addAttachment() 夾帶檔案。
語法：mixed addAttachment (string $data, string [$c_type = 'application/octet-stream'], string [$name = ''], boolean [$isfile = true], string [$encoding = 'base64'])
$data, $c_type, $name 同 addHTMLImage() 的說明。
$encoding 可以指定附加檔所使用的編碼方法，內定 base64。

Mail_mime::&get() 傳回 Mail::send() 用來送信所需的內文($body)。
語法：string &get (array [$param = null])
注意～必須已經有加入內文或附檔才可呼叫 get()。
$param["text_encoding"] 純文字的編碼方法。
$param["html_encoding"] 超文件的編碼方法。
$param["7bit_wrap"] 指定每行最多字元數。
$param["text_charset"] 指定純文字的字元編碼。
$param["html_charset"] 指定超文件的字元編碼。
$param["head_charset"] 指定檔頭的字元編碼。

Mail_mime::&headers() 傳回 Mail::send() 用來送信所需的檔頭($headers)。
語法：array &headers ([array $headerEx = null])
注意～必須呼叫過 get() 才可呼叫 headers()。
$headerEx 為額外的檔頭。

//寄送範例： include('Mail.php'); include('Mail/mime.php'); $text = 'Text version of email'; $html = 'HTML version of email'; $file = '/home/richard/example.php'; $crlf = "\r\n"; $param['text_charset'] = 'big5'; $param['html_charset'] = 'big5'; $param['head_charset'] = 'big5'; $hdrs = array(     'From' => 'you@yourdomain.com',     'Subject' => 'Test mime message'     ); $mime = new Mail_mime($crlf); $mime->setTXTBody($text); $mime->setHTMLBody($html); $mime->addAttachment($file, 'text/plain'); $body = $mime->get($param); $hdrs = $mime->headers($hdrs); $mail =& Mail::factory('mail'); $mail->send('postmaster@localhost', $hdrs, $body); 實做筆記：
如果出現亂碼可以加上以下設定
$headers["Content-Type"] = "text/plain; charset=BIG5";
$headers["Subject"] = iconv ("UTF-8","BIG5","測試主題");