星期一, 12月 29, 2008

log4net導致SerialPort無法catch Exception

不知道為什麼
當用SerialPort,又在專案裡有用到log4net時
在發生UnauthorizedAccessException例外時
會直接跳出視窗告之錯誤訊息,無法catch住
將LogManager.GetLogger註解掉 就可以catch到...
即使是在另一個class宣告logger,似乎也會造成該exception無法被catch

後來發現
有時候還是無法catch
據說是.net的bug
這該怎麼辦咧
網路上有提到的鏈結
都是說在專案的app.config加上
< configuration>
< runtime>
< legacyUnhandledExceptionPolicy enabled="1"/>
</runtime>
</configuration>


Reference:
1.CLR 中未處理之例外狀況的處理機制
2.SerialPort Crashes after disconnect of USB COM port
3.UnauthorizedAccessException - SerialPort - USB

星期一, 12月 15, 2008

.net 隱藏form

怪了
記得以前就直接hide() 就ok啦...
怎麼最近又要用到藏form
結果失敗了...
用了半天才發現要
this.WindowState = System.Windows.Forms.FormWindowState.Minimized;
this.Hide();

星期五, 10月 31, 2008

安裝Meadroid的ScriptX

Step1.下載smsx.cab
載點:smsx.cab
進入後的畫面如下
有兩個載點,一個是可測試完整的功能
另一個就是直接載smsx.cab,後面有說明,記得改version到6,4,xxx


下載smsx.cab後
將檔案放到你自己指定的Server位置

Step2.在網頁的body放入Object
<!-- MeadCo Security Manager -->
<object style="display: none;" classid="clsid:5445be81-b796-11d2-b931-002018654e2e" codebase="http://[your path here]/smsx.cab#Version=6,4,438,06">
<param name="GUID" value="{19CF4AF5-CCD8-4840-BA3C-85EB66D69A6E}">
<param name="Path" value="http://[your path here]/sxlic.mlf">
<param name="Revision" value="0">
</object>
<!-- MeadCo ScriptX -->
<object id="factory" style="display: none;" classid="clsid:1663ed61-23eb-11d2-b92f-008048fdd814">
</object>


Step3.設定參數
這裡有兩個地方需設定
codebase及param的Path
其中codebase指定到剛你設定的[Server Url/smsx.cab]位置

而Path要放的是MeadCo的unique publishing license(即sxlic.mlf的位置)
只是用免費的功能話 就可以把拿掉Path及Revision這兩行拿掉
<!-- MeadCo Security Manager -->
<object style="display: none;" classid="clsid:5445be81-b796-11d2-b931-002018654e2e" codebase="http://[your path here]/smsx.cab#Version=6,4,438,06">
<param name="GUID" value="{19CF4AF5-CCD8-4840-BA3C-85EB66D69A6E}">
<param name="Path" value="http://[your path here]/sxlic.mlf">
</object>


Step4.自定列印畫面配置
用完就可以開心的用免費版的功能
<script defer>
window.onload=function(){
factory.printing.portrait = true; //直印,false:橫印
factory.printing.header = ""; //頁首,空白為不印頁首,也就不會佔空間
factory.printing.footer = ""; //註腳,空白為不印註腳,也就不會佔空間
factory.printing.leftMargin = 0; //左邊界
factory.printing.topMargin = 0; //上邊界
factory.printing.rightMargin = 0; //右邊界
factory.printing.bottomMargin = 0; //下邊界
}
</Script>

css 23事

CSS 語法教學

1.匯入CSS方法
外部連接套用
< link rel="stylesheet" href="style.css" type="text/css" media="【媒體類別】">

嵌入套用
< style type="text/css" media="【媒體類別】">

匯入套用
@import url("style.css") 【媒體類別】;

2.優先權
從最高優先權到最低優先權的排名如下:
* 內行套用的樣式表 (Inline stylesheet)
* 嵌入套用的樣式表 (Embedded stylesheet)
* 匯入套用的樣式表 (Imported stylesheet)
* 外部連接套用的樣式表 (Linked stylesheet)
* 瀏覽器本身的樣式表 (Browser's own stylesheet)

References:
1.CSS串接

3.CSS選擇器 (selector)
同一個選擇器可以有不同的 instance
tag a和tag b有相同class,但可以利用下面的方法設定
【型類選擇器】.【選擇器名稱】{
}
ex. < h1 class='Class_A'/> < h2 class='Class_A' />
.Class_A.h1{
}
.Class_A.h2{
}


References:
CSS選擇器

星期四, 10月 30, 2008

CSS設定

.contents {
/* 一次解決版面撐開、英文斷字、避頭尾、段落左右邊界不齊問題 */
/* by:meiji 200701 */

/* 防止撐開 */
table-layout: fixed;
/* 英文單字自動換行 */
word-wrap: break-word;
/* 正常避頭尾 */
word-break: normal;
/* 文字左右對齊 */
text-align:justify;
text-justify:inter-ideograph;
}

利用Html網頁列印

1.去頁首頁尾問題
官網:http://www.meadroid.com/
檔案:透過email,會給下載網址

目前看比較好的方法還是透過meadroid這家公司的ActiveX
有免費版本,當然有些限制,不過至少可解大部份的問題了
1.直印、橫印
2.印不印頁首(頁尾)
3.上下左右邊界
安裝Meadroid的ScriptX

References:
HTML實現列印(三)頁首、註腳、邊界與列印方向設定

2.CSS排版問題
有時預覽列印時,會發現調用的CSS都無效了
那是因為
<link rel="stylesheet" type="text/css" href="CSS位置" media="screen" />
的media設為screen而沒設為列印時的參考,加入print就ok了,即
<link rel="stylesheet" type="text/css" href="CSS位置" media="screen,print" />
只加入print沒有screen還不行咧,怪哉

3.利用CSS分列印頁
<div STYLE="page-break-after: always;"> </div>

Media Types說明
值 適用於
all 所有媒體類別
aural 言語合成器
braille 布拉耶點字法 (盲人用) 媒體
handheld 掌上型媒體
print 列印
projection 投射媒體
screen 電腦螢幕
tty 固定字寬 (fixed-pitch) 的媒體
tv 電視類的媒體

Reference:
列印 HTML 網頁強制換頁的方式
7個Media Types

4.列印背景圖\
*調browser的設定或利用list-item
*利用@media print{ }

星期五, 10月 10, 2008

嘗試到string相加的威力了

跑個字串相加迴圈直覺沒什麼
for (i=0;i<10;i++)
a += b;

不跑了5萬次才知覺得慢跑了30多秒
本以為是正常的 跑個5萬次很多啦
不過搞硬體的同事說其實這點小迴圈只是這小咖
電腦1秒內就可以算完

想了半天才想到
一定是相加時 是new了新的字串來接
所以多耗了需多時間及記憶體
馬上就改用.net裡的StringBuilder
StringBuilder aa = new StringBuilder();
for (i=0;i<50000;i++)
aa.apend(b);

才一按執行 就已經結束迴圈了
這速度也差太多了...
還以為自己沒按到執行
這下真嘗試到string相加的威力了

星期四, 10月 09, 2008

.net部署

手動增加「立即更新」
使用ClickOnce部署VS2005中的WinForm应用程序
private void UpdateApplication()
{
if (ApplicationDeployment.IsNetworkDeployed == true)
{
ApplicationDeployment ad = ApplicationDeployment.CurrentDeployment;
Text = "目前版本:" + ad.CurrentVersion;
UpdateCheckInfo checkInfo = ad.CheckForDetailedUpdate();
if (checkInfo.UpdateAvailable == true)
{
if (MessageBox.Show("檢測到新的版本:" + checkInfo.AvailableVersion + ",現在需要更新嗎?\n您也可以稍後手工更新到最新版本!", "", MessageBoxButtons.YesNo, MessageBoxIcon.Question) == DialogResult.Yes)
{
ad.Update();
MessageBox.Show("更新完畢,將要重新啟動程序!");
Application.Restart();
}
}
}
}


References
說明
ClickOnce技術與Windows Installer關鍵特徵對比一覽表
ClickOnce 部署概觀
選擇 ClickOnce 部署策略
新增信任發行者至 ClickOnce 應用程式的用戶端電腦

office小撇步

免算號!3秒破解Word/Excel的保護密碼

星期日, 10月 05, 2008

html的table裡放圖片總會有空白

利用table來組圖片常會發生兩種情況
1.沒合起,分成三段
利用table來動態增長中段文字時,常會發生這種情況


2.td尾端總有留空去不掉(藍色部份)


解決方法
1.沒合起,分成三段
當要用table來動態拉圖時,要對table tag加入
cellpadding="0" cellspacing="0"
再試一次就ok啦


2.td尾端總有留空去不掉(藍色部份)
這個問題真是氣死人
花了我一個週末,什麼碗糕屬性全設了
還是失敗,最後在網路上看到.....
「因為td tag裡有空白」 ...

看了一下html,雖然是沒有,但有IDE切的斷行
<td>
  <img src="xxx">
</td>
於是就抱著期待又想譙人的心情設為
<td><mg src="xxx"></td>
一試果然成功了...嗚 感動


想想這感覺是個好明顯的問題「空白」,可是卻看不出來
真想搥人...

星期三, 10月 01, 2008

浮動div

1.jQuery本身draggable
jQuery UI/Draggable
include三個檔案即可使用
< script src="http://code.jquery.com/jquery-latest.js">< /script>
< script src="http://ui.jquery.com/latest/ui/ui.core.js">< /script>
< script src="http://ui.jquery.com/latest/ui/ui.draggable.js">< /script>


只要對某tag下draggable()就ok啦
$(".block").draggable();


2.jquery插件:任意位置浮动固定层
demo DEMO下載

可以任意定住div的在網頁的位置,在滾動頁面時也會保持在同一個位置
下載檔案後,解開將"jquery.floatDiv.js"檔include即可使用

/*调用:
1 无参数调用:默认浮动在右下角
$("#id").floatdiv();

2 内置固定位置浮动
//右下角
$("#id").floatdiv("rightbottom");
//左下角
$("#id").floatdiv("leftbottom");
//右下角
$("#id").floatdiv("rightbottom");
//左上角
$("#id").floatdiv("lefttop");
//右上角
$("#id").floatdiv("righttop");
//居中
$("#id").floatdiv("middle");

3 自定义位置浮动
$("#id").floatdiv({left:"10px",top:"10px"});
以上参数,设置浮动层在left 10个像素,top 10个像素的位置
*/

跨iframe呼叫js function

iframe name = aaa
js function = bbb

呼叫iframe裡的js function
window.aaa.bbb();

呼叫iframe外的js function
parent.bbb();

呼叫iframe外的另一個iframe裡的js function (自己都快看不懂了)
parent.aaa.bbb();

星期日, 9月 28, 2008

WebBrowser.Document.InvokeScript 發生指定的轉換無效

利用WebBrowser要invoke Javascript時
發生了「指定的轉換無效」
查了半天找不到原因,也沒有看到有人有相同的狀況
後來想到一定是用了thread要動到.net的元件(WebBrowser)
就利用先前的 跨執行緒作業無效
果然解決了

利用array建立jqGrid

官方的example裡有寫
http://trirand.com/jqgrid/jqgrid.html
進入「Loading Data」就會看見Array Data
API說明:Array Data章節

1.plugin參數設定
datatype要設為"clientSide" //或是local
jQuery("#list4").jqGrid({ 
    datatype: "local", 
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], 
    colModel:[ 
        {name:'id',index:'id', width:60, sorttype:"int"},  
        {name:'invdate',index:'invdate', width:90, sorttype:"date"},   
        ...
        {name:'note',index:'note', width:150, sortable:false} 
    ], 
    ...

2.陣列宣告
配合colModel的欄位名稱設定
var mydata = [ 
    {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},     \
    {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, 
    {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
]; 

3.再一個個加入jgGrid
for(var i=0;i<=mydata.length;i++) 
    jQuery("#list4").addRowData(i+1,mydata[i]); 

4.其他資料
Related options in options array: datatype
Related options in colModel: sorttype, datefmt
Related methods : getRowData, delRowData, setRowData, addRowData

要清除Grid所有資料可下 clearGridData()

星期四, 9月 25, 2008

php要改檔頭時,出現錯誤

當php要改檔頭時,
如:
header("Content-Transfer-Encoding: 8bit");
header("Content-Type: application/octet-stream");
header("Content-Disposition: attachment; filename=test.jpg");
header("Content-Length: $size");

有時會出現
Cannot modify header information - headers already sent by ...

解決方法:
除了網路上說明的,要將php tag

之前及之後的空格刪乾淨外
php檔案編碼也會有問題,用utf-8就掛了,但一律用ansi編號不會出問題

星期二, 9月 16, 2008

firefox套件


  • 第三屆 Top 15 套件
  • gTranslate可翻譯網頁上的文字,不過還是裝google toolbar比較方便點,因為還得反白單字,再右鍵看翻譯
  • DownloadHelper



    快速下載YouTube影片...
    除了flv,還可直接下載mp4...真是好東西....

好用的 Firefox 附加元件 - 11月號

  • blog編輯
覺得blogspot的編輯器太陽春了
沒想到firefox就超強的套件 ScribeFire
整合blog帳號後 就可以直接發文或編輯
還有其他強大功能 看別人介紹比較快
download:https://addons.mozilla.org/en-US/firefox/addon/1730
介紹:
1.ScribeFire 1.4.2:Firefox上的部落格文章編輯器

使用方法:

Getting Started With ScribeFire

1.Press F8
2.建立Blog帳號連結,click "新增"
3.輸入自己的blog網址
4.輸入帳密
連結成功後,就會把在blog的文章list拉進來,就可以新增文章或編輯文章

SQL語法

將select出來的欄位插入成新的資料

Insert into tableA (columeX,columeY)
SELECTcolumeX,columeY
FROM tableB


取得所有資料,相同的A欄位不重覆,但當A欄位裡的B欄位不同,需再顯示,但不重覆
hint:Group By兩個欄位

SELECT columeA,columeB
FROM tableA
Group By columeX,columeY


group by欄位A相同的群值,但組內的欄位B不同時,挑較大的顯示

SELECT columeA,max( columeB ) columeB
FROM tableA
GROUP BY columeA

星期三, 9月 03, 2008

PHP Server路徑

$_SERVER[HTTP_HOST]
說明:取得此server的url
Demo:www.google.com/a/b/c.html
=>www.google.com

$_SERVER['HTTP_REFERER'] 但HTTP request可以造假

$_SERVER["REQUEST_URI"]
說明:取得完整的參數路徑URI(不含localhost的位置)
Demo:www.google.com/a.html?b=c;
=>a.html?b=c;
$_SERVER['PHP_SELF']
說明:相對路徑
Demo: www.google.com/a/b/c/d.html
=>a/b/c/d.html

1.取得完整的uri
$_SERVER[HTTP_HOST].$_SERVER["REQUEST_URI"]

2.取得到目前的資料夾(含檔名)
$_SERVER[HTTP_HOST] . $_SERVER['PHP_SELF']

3.取得https or http

if(isset($HTTP_SERVER_VARS[HTTPS])){
$_FULL_URL = 'https://'.$SERVER_NAME;
}else{
$_FULL_URL = 'http://'.$SERVER_NAME;
}

星期二, 9月 02, 2008

透過jQuery取得tag name

沒看到API上有提供取得的方法
google上看到惟一的方法是直接.tagName取得
但要透過.each(),否則會有一堆錯誤
範例:
$("#text").each(function(){
this.tagName;
});

星期五, 8月 22, 2008

jQuery Plugin: Tablesorter

jQuery Plugin: Tablesorter官方網址

相當方便的套件
只需啟動就提供全欄位的排序

1.安裝
載好jquery.tablesorter.js檔案
2.啟動

$("#table1").tablesorter(); //對指定的table
$("table").tablesorter(); //對所有table做啟動tablesorter,即可有排序的能力

當然也可設定某些欄位不提供排序功能

$(document).ready(function() {
$("table").tablesorter({
// pass the headers argument and assing a object
headers: {
// assign the secound column (we start counting zero)
1: {
// disable it by setting the property sorter to false
sorter: false
},
// assign the third column (we start counting zero)
2: {
// disable it by setting the property sorter to false
sorter: false
}
}
});
});

另外完整的範例包也有設定css
效果也滿不錯的,例如被點選要排序的欄位會反白的效果
要直接套用,只需在該table再加上class="tablesorter" //css中的class名

動態加入新資料
當已完成.tablesorter() 後
如增加了新的資料列,需要改用update
$("table").trigger("update");
// set sorting column and direction, this will sort on the first and third column
var sorting = [[2,1],[0,0]];
// sort on the first column
$("table").trigger("sorton",[sorting]);


官方說明
*Sort table using a link outside the table
可由外部trigger sorting

星期二, 8月 19, 2008

組織管理

PDCA循環
上班族的工作管理–PDCA的運用

PDCA重點
 (1)計畫(P):應採目標管理,注意要領包括: 5W2H
   a.訂定目標
   b.決定目標達成的方法
   c.決定目標達成否的評估基準
=> 訂里程碑,每個階段要看到的成果

 (2)執行(D):依據計畫實施且為了能夠確實落成計畫,此階段應進行一個小型的PDCA循環。
=> 掌控資源

 (3)查核(C):依據先前擬定的評估基準查核實際績效,也就是將目標值與實績相對照。
=>檢查每個時間點的成果、計劃,如果不合,要診斷原因
1.系統性Error
2.隨機Error
 (4)處置(A):在查核後如果發現未能達成目標,首先採取緊急對策,消除該現象,然後再進一步進行PDCA循環設法防止相同的問題重複發生。利用不斷的應用PDCA循環完成「循環」的真義。若是達成目標,甚而超越目標,則應將此新對策標準化,儲存成為公司的技術規範,提昇公司的能力與市場競爭力。

組織中最重要的因素:「執行力」
團隊中的執行力
1.對的人,對的位置
2.好的習慣(文化)
-確實
-小事做好,大事就好
-標準(共同接受的標準) 慢慢提升

企業日常運作
報表產生確定,檢核確實,下情上達,組織運作透明

單一事件、一次性事件
=>不易評估,故只用時間、目標

Dos的Shell操作

利用bat執行exe時,如何關閉dos視窗等操作
@echo off //不列出執行過程
cd test\ //移到該執行檔的資料夾
START test //執行test.exe, exe不用寫了,Start指啟動新程序,所以此視窗就可關了
exit //關閉此dos視窗

星期一, 8月 11, 2008

Windows Form 的事件(Event)

Windows Form 中事件(Event)的順序

啟動事件:

* Control.HandleCreated
* Control.BindingContextChanged
* Form.Load
* Control.VisibleChanged
* Form.Activated
* Form.Shown

應用程式關閉時,會以下列順序引發主要表單的關閉事件:
*Form.Closing
*Form.FormClosing
*Form.Closed
*Form.FormClosed
*Form.Deactivate

MSDN備註:Closing 事件在 .NET Framework 2.0 中已過時,請改用 FormClosing 事件。

Form.Closed 和 Form.Closing 事件不是在呼叫 Application.Exit 方法來結束您的應用程式時引發。如果您在這些必須執行的任一事件中有驗證程式碼,您應該在呼叫 Exit 方法前個別地為每個開啟的表單呼叫 Form.Close 方法。

星期四, 8月 07, 2008

Literal Strings

就字面來看...就是文字字串...
有些key word是被保留的
如path c:\等,無法直接存到string變數
因此加上"@" => 例:string path = @"c:\1.txt";
即可存,含有key word的文字字串


Ref:Manipulating Strings in C#

星期二, 8月 05, 2008

透過JavaScript列印

1.JavaScript列印
轉:完美的WEB友善列印- 史考特部落格園地

由於javascript都會列印一整個網頁
但通常需要的都只是某個div
導致直接印也不是,另外再做一個網頁也不是

這裡的做法便是將要列印的div內容取代目前的網頁
待列印完後,再window.history.go(0) //回上頁
效果滿不錯的

2.列印設定
轉:ActiveX 控制列印設定
由於javascript無法控制這些設定
安裝此ActiveX便可以設定列印格式
不想要安裝呀...想要其他方法?
目前沒有哩... 你寫一個吧
有寫出來記得給我一份

星期一, 8月 04, 2008

MS Office 標點符號表

問題:MS Office沒有「符號表」?
進入「工具/自訂」後
在「工具列」清單中,最後一項是「符號表」
勾選後,就會在下面的工具列出現「符號表」

問題:如果沒有「符號表」選項?
就必需安裝符號表程式
1.Office XP 標點符號安裝程式 SymSetup.exe
不過此檔似乎已不提供了,也找不到

2.手動加入符號表套件 - Symbar.wll
(1)下載 Symbar.wll
(2)c:/program files/Microsoft office/office/Startup/
重開Office後,再到「工具/自訂」,手動勾選,就會出現了

星期四, 7月 31, 2008

常見錯誤

GDI+ 有泛型的錯誤
1.資料夾權限未開
2.無此路徑

列印Double 數值
由於會自動做四捨五入等惱人的動作
String.Format("{0:r}",
先format過後,就可完整印出

常見問題

*Access denied for user 'kevyu'@'' (using password: YES)
ans: mysql 未設定此帳號kevyu具有remote,從遠端登入的權限

取得last insert id

MySQL新增完後
會將資料留在DB Connection

PHP--
PHP有提供相關函數
執行mysql_insert_id(),即最後新增的id


.Net-- (http://forums.mysql.com/read.php?38,98672,98868#msg-98868)
string strSQLSelect = "SELECT @@IDENTITY AS 'LastID'";
MySqlCommand dbcSelect = new MySqlCommand(strSQLSelect, conDBConnection);
MySqlDataReader dbrSelect = dbcSelect.ExecuteReader();

dbrSelect.Read();
int intCounter = Int32.Parse(dbrSelect.GetValue(0).ToString());

dbrSelect.Dispose();
conDBConnection.Close();
MessageBox.Show("Test: " + intCounter.ToString());

星期三, 7月 30, 2008

2008 聚餐

12月份聚餐
訂位時間: 12/26 (星期五) 中午12點
餐廳: 謝阿姨美食坊
網址: http://blog.yam.com/elsachen/article/15342243
地址: 台北市博愛路122號B1(世運麵包店斜對面)
電話: 2388-1012


11月份聚餐
餐廳: 福臨門- 港式飲茶吃到飽
地址: 台北市北投區大業路700號(新北投捷運站)
網址: http://flm.wahot.com/ind/modules/news/article.php?storyid=135

10月份聚餐
羅斯福路上的....忘了

9月份聚餐
餐廳: 小春 (日式料理, 請大家吃飽飽!)
網址: http://www.kuharu.com.tw/inner1.php

地點: 您可以搭乘捷運板南線,到忠孝敦化下車,走安和路一段出口,也就是誠品敦南店的出口,右轉進安和路102巷走到底就看到小春。小春位於敦化南路與信義路交叉口,玉山銀行旁第二條巷子進去到底。


8月份聚餐
時間: 8/22 (五) 中午12:00
餐廳: 韓首爾
地址: 台北市敦化南路一段160巷23號 (請閱: 地圖在附件中)
電話: 2752-2653
相關介紹網址:
http://tw.myblog.yahoo.com/h02-27522653
http://tw.myblog.yahoo.com/jw!gY4ig0SfGQTuNBVaNTLyUacWJFI-/article?mid=2673

由於月底部份同事要到美國出差
所以就提早吃
牛、雞、豬、羊都有 還不錯
有提供明治冰淇琳也挺好吃的

7月份聚餐
KiKi restaurant
中式料理
藍心湄開的餐廳
唔...後來臨時改去另一家餐廳

「府岸海產城」....也是中式料理
地點: 台北市大安區永康街8巷7號1樓
http://tw.lifestyle.yahoo.com/biz.html?bizid=86a64a5f58132e35&sid=152959622&city=%E5%8F%B0%E5%8C%97%E5%B8%82&b=6&sort=-rating

6月份聚餐
神州客棧(神州時尚精緻料理)
地址: 忠孝東路五段508-8號
中式料理

5月份聚餐
小護士餐廳
地址:新生北路3段7號

4月份聚餐
泰式料理

3月份聚餐
忘了叫什麼 >"<

2月份聚餐
1月份聚餐+尾牙
陽明山的...一時想不起來

2007---

9月份聚餐
Mo-Mo-Paradise
忠孝店
9月份

星期三, 7月 23, 2008

jQuery語法

找未加入html裡的tag
利用jQuery找tag時,如 $("#test")
id為test的tag需已存在html

但當要找的tag還未加入html裡時,就會找不到test
可以利用此法
var panel=jQuery("<div id='test'>");
$('#test',panel)
});


一次設定多個屬性及事件
滿方便的...不錯
$('#test')
.text("this is div") //屬性
.click(function(){ //方法
alert($(this).text());
});
//一行來設定屬性就是
$('#test').text("this is div").html("").css("");
//看起來怪怪的,不過還挺簡潔的

星期一, 7月 21, 2008

利用JavaScript做print preview

source:http://www.programmer-club.com/pc2020v5/forum/showSameTitleN.asp?board_pc2020=javascript&id=4823&keyword=

var OLECMDID = 7;
/* OLECMDID values:
* 6 - print
* 7 - print preview
* 1 - open window
* 4 - Save As
*/
var PROMPT = 1; // 2 DONTPROMPTUSER
var WebBrowser = '';
document.body.insertAdjacentHTML('beforeEnd', WebBrowser);
WebBrowser1.ExecWB(OLECMDID, PROMPT);
WebBrowser1.outerHTML = "";
}

其他的用法,列举如下:
WebBrowser.ExecWB(1,1) 打开
Web.ExecWB(2,1) 关闭现在所有的IE窗口,并打开一个新窗口
Web.ExecWB(4,1) 保存网页
Web.ExecWB(6,1) 打印
Web.ExecWB(7,1) 打印预览
Web.ExecWB(8,1) 打印页面设置
Web.ExecWB(10,1) 查看页面属性
Web.ExecWB(15,1) 好像是撤销,有待确认
Web.ExecWB(17,1) 全选
Web.ExecWB(22,1) 刷新
Web.ExecWB(45,1) 关闭窗体无提示

星期四, 7月 17, 2008

讀文字 JSON

直接宣告
//陣列物件
var json1 = {[
{"id":1,"name":"台灣"}
{"id":2,"name":"美國"}
]};

//物件(含陣列)
var json2 = {"bindings": [
{"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"},
{"ircEvent": "PRIVMSG", "method": "deleteURI", "regex": "^delete.*"},
{"ircEvent": "PRIVMSG", "method": "randomURI", "regex": "^random.*"}
]};


讀文字
var myJSONtext = "文字型態的 json 的格式... "; //同上例的格式,注意不用加分號
var myObject = eval('(' + myJSONtext + ')'); //再前後加上小刮號,利用eval即可得


JSON 的安全性

references:
JSON官網

jqGrid

jqGrid官方網址

install
1.download package
jQuery Grid Plugin 3.2 with docs
解壓後,放到自建的jqGrid資料夾

2.建立html page
放在jqGrid下,並include jqGrid的js及css
//1.jquery core
<script type="text/javascript" src="jquery.js"></script>
//2.jqGrid的js
<script type="text/javascript" src="jquery.jqGrid.js"></script>
//3.jqGrid的css
<link rel="stylesheet" type="text/css" media="screen" href="themes/basic/grid.css" /> </code>

3.environment配置
有3個地方需要調整

(1)js的路徑
在jquery.jqGrid.js裡,有個pathtojsfiles變數
var pathtojsfiles = "js/"; // need to be ajusted
此為設定要載入的js檔路徑

(2)CSS路徑

href就指到預設的位置
>link rel="stylesheet" type="text/css" media="screen" href="lib/jqGrid/themes/basic/grid.css" /<

(3)圖檔路徑
在實作時,要給圖片的位置

var gridimgpath = 'themes/basic/images'; //預設的圖片
jQuery("#tbRecordList").jqGrid({
colNames: ['日期', '分數',
...
imgpath: gridimgpath, //設定gridimgpath
});


**有的沒的
//清空grid內容
$("#_TableName").clearGridData();

**備註
1.每個欄位長度至少要60以上,不然排序的icon(遞增,遞減)會看不見 (新版的不會了)
2.當遇到p.mutliselect是null時,代表設定table id不一致或未啟動jqGrid()的設定
3.利用jquery.load進來的頁面,如果也有include jquery.js會導致無法使用jqgrid的method,

星期二, 7月 08, 2008

jQuery套件

A.選單

1.仿apple的滑動選單


2.Google jtab


B.Masked Input
1.Masked Input Plugin 輸入遮照

C.自動完成
http://www.pengoworks.com/workshop/jquery/autocomplete.htm
滿不錯的套件,搭配php讀資料庫
還利用cache,節省重覆的讀取字完

D.Validation
Validation

E.Table
jqGrid demo
滿不錯的table套件,Demo也很豐富


F.Sorting
jQuery plugin: tablesorter
可輕易的對table欄位做sorting的工作

G.loading block
jQuery BlockUI Plugin


H.提示

ToolTip_MooTools Demo
畫面風挺不錯的,滑動出現tooltip
jQuery plugin: Tooltip Demo
這個也挺酷的,效果多,可選擇

I.圖表類
1.JavaScript Diagram Builder
2.Google Flotchart Demo
3.Google Chart API

I.Treeview
jQuery Treeview Plugin




其他套件
1.45個新鮮出爐的jQuery插件
2.37個更加出色的jQuery插件
3.jQueryのプラグイン33+1選 -2007年9月 日本人寫的
4.Ajax Rain

5. 10 beautiful Sliding Panel with jQuery Tutorials

JavaScript的圖表工具 Diagram Builder

JavaScript Diagram Builder
下圖為pie chart的圖示
滿不錯的...選到右方的單位 還會有小動畫分離pie


畫面雖然沒有google的flot chart漂亮
不過圖可以自己換
主要有我想要的信賴區間圖 感謝同事的協助
ㄟ...你說沒有信賴區間的選項...傻孩子 是自己一個圖一個圖貼上的



**教學
1.背景
D.SetGridColor("#EBECE4"); //嗯...就格線的顏色囉
D.Draw("#FCF6CF","#0000FF",false,"點我呀","DiagramClick()");
D.Draw(底色,框色,false,說明文字,click後呼叫的function名稱);

2.line
new Line(D.ScreenX(10), D.ScreenY(5), D.ScreenX(10), D.ScreenY(45), "#cc9966", 4, "tip");

3.dot
new Dot(D.ScreenX(10), D.ScreenY(45), 8, 5, "#000000");
//也可自行套圖
new Dot(x, D.ScreenY(0), Size, 'smile.gif', "", "Type: smile.gif, Size:"+Size);
4.box
範例:new Box(j-12, y, j+12, y0, "#0000FF", "v_blue.gif", "#FFFFFF", 1, "#000000");
說明:new Box(x1座標, y1座標,x2座標, y2座標, 研究中, "檔名", 研究中, 框粗, 框線色);

備註:當此chart是包在一個iframe時,除了此頁的js去畫面,如果用到parent的js來畫chart,也就是有兩個不同的網頁(1個自己,1個是parent網頁)可以來畫chart,這個時候,圖片的路徑就會跟著改變

還是直接看官方的說明比較快

星期三, 6月 25, 2008

CSS Hover在ie下無法顯示

在css裡設定hover在ie下總是無法正常顯示

  • 外掛做法
    這裡提供了csshover.htc可以解決
    主要的做法是在css裡,遇到hover改成用mouseover等改寫
    1. 下載csshover.htc
      Version 1.42.060206 (:hover and :active) download
    2. 設定path
      path: 就先放在同一資料夾吧
    3. 程式碼
      (1)在CSS裡
      已產生的dom可直接在css裡下
      body{
        behavior:url(csshover.htc)
      }

      (2)在JS裡
      動態產生的dom,因為放在css裡的已執行過,所以之後才產生的html tag似乎不會被改變,因此要javascript再跑一次
      if (document.all && /MSIE (5\.5|6)/.test(navigator.userAgent) 
        &&  document.styleSheets 
        && document.styleSheets[0] 
        && document.styleSheets[0].addRule)
      {
        document.styleSheets[0].addRule('*', 'behavior:url(csshover.htc)');  //csshover.htc的路徑
      }

    備註:
    動態再呼叫javascript跑csshover.htc似乎會造成程式花了很多時間改寫hover
    有建議將hover指定詳細 減少搜尋改寫hover的時間
    #menu li:hover ul { //指定li hover 再指出ul下
    ...
    }
  • 指定html版本
    其他方法
    據說設為W3C 4.01, ie就會乖乖聽話了
    在html檔裡,最前面加上以下字串
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
Reference

html table常見問題

jQuery無法改table caption
當dom裡的caption是空白時,browser似乎會省略
導致後制的jQuery找不到caption
$('table caption').text('test'); <=無法出現test
因此得避免caption為空


table裡每列加form導致該td多一空白列
查半天都看不出為什麼那一列多出一個行空白
本以為是css設定問題
後來才發現在每個td利用form包一個input
就會造成該td多一個空白 可能是擠不下的關係 所以多出一列
氣死...平麼padding, margin全設了 還是不行
把form刪了就ok了

仿apple的滑動選單

很漂亮的滑動選單
http://jqueryfordesigners.com/slide-out-and-drawer-effect/



*在ie下無法正常顯示
由於此選單透過png做透明
但ie5,6下對png支援不好 所會出搥
不過已經有解決方案了
檔案:http://www.twinhelix.com/
說明:只改动CSS让IE6支持透明PNG

主要讀圖時透過twinhelix上提供的iepngfix.htc讀取就可以完成了

星期三, 6月 11, 2008

jquery radiobox取值,checkbox取值,radio選中,checkbox選中,select選中,及其相關

  • textbox
    $("#text").val();     //get
    $("#text").val("hi"); //set
  • radiobox
    • 取得被選中的值
      var item = $('input[name=items][@checked]').val();
      //or
      $('input[name=items]:checked').val();
    • 使第二個radiobox被選中 (無法用在checkbox上)
      $('input[name=items]').eq(1).checked = true; //法1
      $("input[type=radio]").eq(1).attr("checked",true); //法2
    • 觸發click事件
      $("input[type=radio]").eq(1).trigger('click');  
      
      //由於利用程式選中,並不會觸發click,所以結合兩者
      $("input[type=radio]").eq(1).attr("checked",true).trigger('click'); 
      
    • 取得多組 (:enabled, :disabled,:selected都同方法)
      $('input:checked').each(funciton(){
          ...
      });
      
      //:select 方法差不多,不過多個option
      $("select option:selected").each(function () {
           ...
      });
  • checkbox
    checkbox取值,給值
    alert($("#checkbox").attr("checked")); //是否勾選 true or false
    $("#checkbox").attr("checked",false);  //不打勾
    $("#checkbox").attr("checked",true);  //打勾

  • select
    $("#sel").attr("value",'-sel3');  //設置value=-sel3的項目為當前選中項
    $("11112222").appendTo("#sel");  //添加下拉框的option

事件
用click 觸發改變事件(用change 還得再點旁邊才會觸發)
//html
<input name="RadioName" value="hi">
//js
$("input[name='RadioName']").click(function(){
   $(this).val(); //即hi
});

References:

星期二, 6月 10, 2008

jQuery each迴圈中的continue及break

continue :return true;
break :return false;
也可以利用return即可跳出jQuery

星期五, 6月 06, 2008

td裡文字無法置中前面的圖片

明明對td設定了style="vertical-align:middle"
但就是沒辦法置中


氣到...又請出源大師出馬
果然幫我解決了
不過也不知原因...總之在img tag裡也加入style="vertical-align:middle"
就ok啦,原td的style甚至不用設定了

星期四, 6月 05, 2008

jQuery 套件

1.jQuery Treeview Plugin

jQuery有個project提供了Treeview plugin,看起來還不錯的樣子
Demo網址


用法
1.先下載pack,目前v3
2.方便測試,在demo檔案夾裡,新增一個html當自己的測試檔
3.打開demo檔案夾裡的index.html,看html碼直接把下列這幾行貼到自己的html裡
< link rel="stylesheet" href="../jquery.treeview.css">
< script src="../lib/jquery.js" type="text/javascript">
< script src="../lib/jquery.cookie.js" type="text/javascript">
< script src="../jquery.treeview.js" type="text/javascript">


4.demo.js是原本的javascript檔,可直接改這裡來測試,如果自己寫新的js的話,記得加上$("#browser").treeview();才會完整啟動treeview,不然會像下圖一樣

星期四, 5月 29, 2008

用PHP和MySQL保存和輸出圖片

//存blob格式
用PHP和MySQL保存和輸出圖片


//存文字格式
$data = fread(fopen($up_file, "r"), filesize($up_file));

1 fopen($up_file, "rb") 二進位讀檔。

2.放進資料庫前先編一下碼再放進去。
  $data =base64_encode($data);
輸出的時候請先用base64_decode()恢復二進位編碼再輪出。


//讀出二進位
print $bytes["RawData"];


remark============
1.存文字格式會使圖檔變大2,3倍
2.php會將轉傳的stream的最前頭加上3個byte (dom) //說明用UTF-8格式 ,尚不知如何去掉
就自己濾掉前3碼吧
if (responseBytes[0] == 0xEF) && (responseBytes[1] == 0xBB) && (responseBytes[2] == 0xBF)
3.有時候stream前面還會多0x20,一般來說是php tag的最前面有空白...所以一併傳進去了,導至多了一個空白

星期五, 5月 23, 2008

複製xml node至另一個xml document

同文件可用 (XmlNode)xmlnode.Clone()
不同文件得用 ImportNode
格式:ImportNode(XmlNode node,bool deep) //deep 要不要複製該node的子node
範例:
XmlNode newNode = xmldocument.ImportNode(xmlNode,true)
xmldocument.SelectSingleNode("//xxx").appendchild(newNode );


***注意***
在importNode時,常會先把本身的child node刪掉
再將加入新的
//1.先清除舊的
XmlNodeList oldNodes = xmlNode.SelectNodes("//AA").ChildNodes;
foreach (XmlNode oldNode in oldNodes )
xmlNode["AA"].RemoveChild(oldNode );

直覺沒問題,執行也沒問題
但不過AA的child有幾個,迴圈也只會執行一次
因為刪了一個node,該list就會少了一個
所以當迴圈再跑下一個時,其實已重讀該list
而第一個又為null,所以就執行一次就跳出迴圈了
以上純屬虛構...如有巧合....

不過真的只會執行一次,程式又沒錯
所以都不會發現
總之改用while,每次刪第一個就好了
while (xmlNode["AA"].ChildNodes.Count > 0) xmlNode["AA"].RemoveChild(xmlNode["AA"].ChildNodes[0]);

*後記
不知在耍什麼白痴
要清掉childenodes 為什麼要用這麼麻煩的方法
直接node.innerxml=""; 不就好了................

星期一, 4月 28, 2008

JavaScript觸發 select 的option

直接設定都會說「無法設定selected的內容」
氣到....請出智源大師解決了
原本下面這樣就可以了...但卻發現要先加個alert才會成功
document.getElementById("cmbCountry").selectedIndex=1;
document.getElementById("cmbCountry").fireEvent("onchange");

完整版...
也不知真正原因為何,原正就先設0..再設1就ok了
document.getElementById("cmbCountry").selectedIndex=0;
document.getElementById("cmbCountry").fireEvent("onchange");
document.getElementById("cmbCountry").selectedIndex=1;
document.getElementById("cmbCountry").fireEvent("onchange");

星期五, 4月 25, 2008

MySQL中的DATETIME, DATE和TIMESTAMP類型

DATE跟DATETIME就如字意上 只差TIME
而DATETIME跟TIMESTAMP是存相同的內容
網路上看的差別在
一個UPDATE設置一個列為它已經有的值,這將不引起TIMESTAMP列被更新

reference
DATETIME, DATE和TIMESTAMP類型

星期日, 4月 20, 2008

jQuery與XML

//刪除node
不知jQuery怎麼刪,就先用javascript原本的做法吧
var deleteMe = xmlDoc.getElementsByTagName("AAA")[0]; //刪第一個AAA
xmlDoc.documentElement.removeChild(deleteMe);

//複製AAA加入BBB
var AAA = $(xmlDoc).find("AAA").clone();
$(xmlDoc).find("BBB").append(AAA);

星期五, 4月 04, 2008

Ajax筆記


1.Ajax開發精要
詳細說明ajax各項技術(含html,css等),提供常用的屬性,也可當工具書查詢。
coding會遇到的問題也會提出來,像亂碼等 還會提供solution。
對於ajax也有簡單的基礎程式教學,比較容易上手,不錯的入門書籍。
各章節都討論的滿詳細的...光看每頁的字數都超多的,應該就會有同感了

2.Ajax in action
嗯...應該是適合有一段經驗的ajax人員...對初學者有難度哩...看好久都看不懂,最簡單的範例是雙動態combobox的應用,寫了一多......看嘸...幾個月後再回來看有沒有感覺

星期四, 4月 03, 2008

java, C# 與serial port通訊

需下載java commapi
由於會讀取javax.comm.properties
而此檔因OS不同所以commapi有不同OS版本
不要載錯

主要有三個配置檔
存放路徑
此是安裝JRE的軟體
1.C:\Program Files\Java\j2re1.4.2\bin\win32com.dll
2.C:\Program Files\Java\j2re1.4.2\lib\javax.comm.properties
3.C:\Program Files\Java\j2re1.4.2\lib\ext\comm.jar

Or
此是安裝J2sdk的軟體
1. C:\j2sdk1.4.1_01\jre\bin\win32com.dll
2. C:\j2sdk1.4.1_01\jre\lib\javax.comm.properties
3. C:\j2sdk1.4.1_01\jre\lib\ext\comm.jar

關於javax.comm.properties 的位置
ㄟ..好像是跟程式碼放一起哩...

If you instead got the message “no ports found”, there are a couple of possibilities:

* There actually aren't any serial ports available on your system—either the low-level comm port drivers are not installed right, or other programs have them open.
* The javax.comm drivers are not installed properly.


reference

JAVA Communication API(RS232/485)
JAVA RS232實作
java comm安裝
Installing & Configuring Java for HC11 Code Download

===============================================
c#讀rs232
SerialPort (RS-232 Serial COM Port) in C# .NET

星期二, 4月 01, 2008

jQuery Tabs出version 3了

http://www.stilbuero.de/jquery/tabs_3/

後記:Tabs套件已經跟jQuery UI整併了,直接看jQuery UI - Tabs

利用jQuery完成的tab
比上一版多了
1.Tabs Extensions
2.Rotating tabs 會輪播
3.Nested tabs 就多層tab

除了多新功能外
原本的使用上也更加方便
也解決了一些問題
原來只能固定用#container-n
這些原先設定的div現在都可以自訂了
加上更操作上都以jQuery的存取方式設計
coding上更加便利...只要copy...paste.....

  • 取得目前選取的tab
    var $tabs = $('#example').tabs().data('selected.tabs');
    原本只能在ie跑,firefox會印出undefine 後來套件有更新, firefox就可以用相同的方式取得
  • 取得目前tab名
    var selected =$('#container-tab').tabs().data('selected.tabs');
    var tabName=$("#container-tab" > ul > li").eq(selected).text();
    上述方法可以取到值,但會導致tab無法切換了
    所以就照著官網寫的方法
    var selected =$('#container-tab > ul').data('selected.tabs');
  • 自訂jTab
    jTab裡也可以加圖示進去

    把編輯、刪除放在同一格里還滿實用的
    不過似乎jtab多了一層,使得點擊圖示會trigger,但cursor不會改變 ... 慘念
    前面也可加個「新增」鈕,當然要自己加囉

星期四, 3月 20, 2008

利用CSS更改滑鼠圖案

滑鼠不可用.jpg. gif. BMP 等圖片格式, 定要用 cur. ani. 等圖片格式.

改用其他圖式
body{cursor:url(http://xxxxx.cur);}/*移到網頁時的滑鼠游標*/
a{cursor:url(http://xxxx.ani);}/*移到超連結時的滑鼠游標*/

預設基本符號:
用法:body{cursor:Pointer;}

Move the mouse over the words to see the cursor change:
1.Auto
2.Crosshair
3.Default
4.Pointer
5.Move
6.e-resize
7.ne-resize
8.nw-resize
9.n-resize
10.se-resize
11.sw-resize
12.s-resize
13.w-resize
14.text
15.wait
16.help

*注意
Pointer (手指)
hand (手指) 僅ie支援

reference
1.如何更改滑鼠圖案
2.w3school

星期三, 3月 19, 2008

'a' tag的href會重讀

原本為了讓文字有超鏈結的底線而加了href屬性
但在firefox下 似乎會變成重讀頁面(ie不會)
只要加個#,即href='#' 即可。

在網路上另外看到
提交
的方式,通過一個偽鏈接來調用javascript方法.這種方法有一個問題是:
雖然點擊該鏈接的時候不會跳轉頁面.但是滾動條會往上滾,解決的辦法是返回一個false.
如下所示:
< a href="#" onclick="javascript:方法;return false;">提交< /a>

< a href="javascript:void(0)" onclick="javascript:方法;return false;"提交
javascript:void(0)就不會向上跳了:) >

還有一個方法是 #this
< a href="#this" onclick="javascript:方法">

星期二, 3月 18, 2008

jQuery對select tag的操作

  • get
    • 取出選擇的值
      $("select#Club").val();
      $('select#Club option:selected').text(); 
      以上2方法在單選時相同,但複選時,
      val()會用逗號分開 ex. AA, BB
      text()不會 ex. AABB
    • 取出array
      $("select#Club").children("[@selected]").each(function(){
          alert(this.text());
      });
  • set
    • 使某option變為selected
      //使aaa為selected
      $("#select1").children().each(function(){
          if ($(this).text() == "aaa"){
              //jQuery給法
              $(this).attr("selected","true"); //或是給selected也可
      
              //javascript給法
              this.selected = true;   
          ;}
      });
      
      //直接指定... 上面的方法變的有點蠢... 誰寫的... 我....
      $('#select1').val("aaa");
      
      
    • 新增option
      $('select').append(new Option('text', 'value')); //之前好像誤寫成 jQuery("new option"); 歹勢呀~
    • 讓新增的option直接為selected
      //new Option([text], [value], [defaultSelected], [selected]
      var option = new Option(
                   'text'
                   , 'value'
                   , true     //html裡顯示selected
                   , true     //第四個參數即為selected
                 ); 
      $('select').append(option);
      
    • select下拉框的第二個元素為當前選中值
      $('select#Club)[0].selectedIndex = 1;//不知為何要加[0]
      ===== K. T. Chen 提到 =====
      在$("")加[0]的意思是把jQuery物件轉為DOM物件。這樣子jQuery物件才能使用DOM底下的selectedIndex方法。
  • event
    //改變時的事件
    $("select#Club").change(function(){ //事件發生
        //一次印出
        alert($(this).val());
    
        //印出選到多個值
        jQuery('option:selected', this).each(function(){ 
            alert(this.value);  
        });
    });
  • 移除 removeOption(index/value/regex[, selectedOnly])
    $('select#Clubs option:selected').remove();
//純javascirpt
<select onchange="alert('Index: ' + this.selectedIndex
    + '\nValue: ' + this.options[this.selectedIndex].value)">
    ...
</select>

參考

星期一, 3月 17, 2008

Google code - flot 圖表

http://code.google.com/p/flot/
example

利用jQuery完成的圖表
也不用設定css,而是透過程式裡的參數
這點滿不錯的,免得影響到其他的設定
也滿容易上手的...
雖然偶爾還是卡住... >"<

*自訂x座標文字tick
//1.先做tick array
var titleName = [];
for(i){
//依display順序填入array
titleName.push([i, title_Name])
}

//2.再設定x座標
xaxis: {
min: 0,
ticks: titleName
}


常見問題:
卡住的地方
flot透過一個id名為placeholder的div裡做圖表
雖然是在html裡下的id,但似乎在google裡的js檔還是有靜態命稱
在js檔裡是沒找到placeholder,但當更改命名時,再透過$.plot($("#divName")
就畫不出來,但只要名稱一樣就沒問題

*隱藏圖表問題
如果將圖表隱藏後,得先顯示才能畫
否則Y軸的title會"黏"在原點的Y軸上
或出現錯誤息:throw一個錯誤未handle

星期二, 3月 11, 2008

JavaScript對ie與firefox的支援性

真是搞死人了...
先寫下來 以後方便查...
雖然Aptana有提示..
不過還是先寫下來好了...氣死

1.innerText
firefox不支援,可利用jQuery的.text即可完成,以td為例
$(td).text();  //取值
$(td).text("要放的值");  //設定值


2.下拉選單option的selected
$("optionA").value //如果value沒給值 firefox會以text代替,而ie則顯示無字串

3.動態產生的html tag
利用jQuery隱藏的物件
例如$('tr#hideTR').hide("slow"); //當hide有下參數slow,normal,fast時
再$('tr#hideTR').show("slow"),整行tr如有3個td,則都會縮成一個td
在ie可以跑 但在firefox會怪怪
其實在hide的同時就table已經變的怪怪的了
但如果show不掛效果的話 還是會正常顯示,不會縮成一個td

4.html tag的宣告
一般< script type=text/javascript>< /script>
ie不支援< script / >, firefox可以

5.jQuery在ie上的問題
有些程式在firefox可以跑,但在ie會有問題時
除了一些支援性的問題外
有可能是在一些語法上的錯誤
firefox可自動避開這些問題
但ie卻會當掉...例如
$.ajax({
dataType: "xml", <====少了逗號時,ie便無法讀
...
success:function(GCList){
...
}, <===================多了逗號也會造成ie無法讀
});

6.href
ie會自動加入完整路徑
ex.
href="a.html" <==在ie下就會變成c:\a.html之類的

jQuery常用方法

整理一下比較常用到的jQuery API v.1.4

Selector
  • 找tag的id, class
    $("a"); //找到a的tag
    $("a#myId"); //找到id為myId的a tag
    $(".classA"); //找到class為classA的a tag

  • .eq(index) 取得第index個子節點
    $('ul').children.eq(3).text(); //即可取得第三個子節點
  • 利用屬性內容找節點
    $("input[name='newsletter']"); //找出name為'newsletter'的input
    $("input[name*='news']"); //找name的包含'news'字眼的input
    $("input[name^='news']"); //找name的開頭字串包含'news'字眼的input

  • .lt(index), .gt(index) 取得此index前(後)的所有節點
  • 其他如:radio :even ...
    $("input:radio"); //找出input type為radio
    $("tr:even"); //找出偶數的tr
Manipulation
  • 新增一個tag
    var div = $('< div>Some text< /div>');//= js的createElement('div')
    *****注意*****
    jQuery('div'); //找div tag,不是新建div tag
  • append(), prepend(), appendTo(), prependTo()

    $(div).append("last"); //將span加到此node的最後
    $(div).prepend("first"); //將span加到此node的最前
    $(div).appendTo(document.body); //將div加到body最後
    $(div).prependTo(document.body); //將div加到body最前

    其他after(), before(), clone()自己看囉
  • .css() 如同寫html裡的style
    $("span").css("color","red");
  • addClass(), removeClass() class的新增、移除
    $("#test").addClass("aaa");
    $("#test").removeClass("aaa");
    $("#test").removeClass("aaa bbb"); //一次移除多個class,利用whitespace即可

Events

  • .click(), .change(). focus(). blur()
    $('p').click(function() {
    $(this).css('background-color', 'red'); }); //Set up paragraphs so that when you click them they turn red.
    jQuery('p:first').click(); //觸發click事件
  • keyup(), .mouseup() 多了鍵值
    ('#target').keyup(function(event) {
    if (event.keyCode == '13') {
    event.preventDefault();
    }
    xTriggered++;
    var msg = 'Handler for .keyup() called ' + xTriggered + ' time(s).';
    $.print(msg, 'html');
    $.print(event);
    });
  • hover()
    $("li").hover(
    function () {
    $(this).append($(" ***"));
    },
    function () {
    $(this).find("span:last").remove();
    }
    );

Effects

  • .show(), .hide(), toggle()
    $('.target').show(); //顯示target
    $('.target').hide(); //隱藏target

    //動畫效果
    $('.target').show("slow"); //顯示target

Traversing
  • .children()
    找該node下的children
    $(clubs).children.each(function(){
    //所有子節點
    });

  • .siblings() 與此node屬一個parent的其他nodes
    <ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li class="third-item">list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
    </ul>
    --
    $('li.third-item').siblings().css('background-color', 'red'); //全都會變紅

  • .first(),.last() 集合中的first(last)節點
    <ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li class="third-item">list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
    </ul>
    --
    $('li').first().css('background-color', 'red'); //第一個變紅
    $('li').last().css('background-color', 'red'); //最一個變紅


Ajax
  • $.ajax()
    $.ajax({
    type: "GET", //指定method
    url: 'ajax/test.html',
    success: function(data) {
    $('.result').html(data);
    alert('Load was performed.');
    }
    });

  • 讀html, xml, txt
    //讀html
    $("#htmDoc").load("test.html");

    //讀XML
    $.get("test.xml",function(xml){
    var text = $("title",xml).text();
    $("#xmlDoc").html(text);
    });

    //讀txt
    $.get("test.txt",function(txt){
    alert(txt);
    });

CSS範例

整體網站
CSS Beauty

Table樣式
CSS Table Gallery

綜合
CSS樣式表文章庫

JavaScript範例


  • Tab
    dynamicdrive 也有許多利用javascript做的範例
    http://www.scbr.com/docs/products/dhtmlxTabbar/
    http://www.stilbuero.de/jquery/tabs/#fragment-17 利用jQuery完成
  • 畫圖
    http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm
  • data table
    http://www.joostdevalk.nl/code/sortable-table/
  • 有的沒的
    http://www.powerpc.idv.tw/script.htm
    http://www.dynarch.com/
    http://hk.geocities.com/nuen_fai/teach.htm

星期一, 3月 10, 2008

轉貼- 介紹幾套好用的檔案上傳元件

1.
SWFUpload

採用 JavaScript + Flash 進行上傳動作,功能強大、一應俱全,雖然每有 ASP.NET 現成的控制項可用,但是有提供使用 ASP.NET 的範例可以參考,是個值得推薦使用的套件!

其功能有:
- 可一次上傳多個檔案。
- 支援 JavaScript 的 Callback 事件。
- 可在檔案開始上傳前取得部分檔案資訊。
- 可以透過 XHTML 與 CSS 客製化上傳的元件。
- 可得知檔案上傳進度。
- 上傳檔案不需要 PostBack,可以等上傳檔案完成後再 PostBack 出去。
- 只要是 Flash 支援的 Browser 都可以用。
- 就算 Flash 或 JavaScript 都無效的時候,也可以正常上傳。
- 可以在「檔案上傳之前」就先判斷檔案大小,超過限制可以不進行上傳。
- 可以在瀏覽檔案時篩選特定的檔案類型
- 支援上傳檔案佇列功能,可以在還沒上傳檔案之前將新增要上傳的檔案或移除要上傳的檔案。

2.
FancyUpload
這個套件就像他的名字一樣很花俏(Fancy),看過他的 Demo 就是到他的威力了。
其功能有:
- 可一次上傳多個檔案。
- 可以在瀏覽檔案時篩選特定的檔案類型
- 支援 JavaScript 的 Callback 事件。
- 可在檔案開始上傳前取得部分檔案資訊。
- 可以在「檔案上傳之前」就先判斷檔案大小,超過限制可以不進行上傳,也可限制上傳檔案數的上限。
- 只要是支援 Flash 8 的 Browser 都可以用。
- 支援上傳檔案佇列功能,可以在還沒上傳檔案之前將新增要上傳的檔案或移除要上傳的檔案。
- 所有功能都可以設定,文件
- 可得知檔案上傳進度。
- 上傳檔案不需要 PostBack,可以等上傳檔案完成後再 PostBack 出去。
- 就算 Flash 或 JavaScript 都無效的時候,也可以正常上傳。

3.
AjaxFileUpload
這是一個 jQuery Plugin,也算是不錯用,只是功能沒像上面兩個那麼多功能,因為這套是用 JavaScript + IFRAME 的技巧實做的。

如果你想找其他 jQuery Plugins 可以來這裡:http://plugins.jquery.com/

--
jQuery File Upload Plugin
    Uploadify jQuery + Flash 可限制檔案類型,單一檔,或同時多個

其他jQuery Plugins

Reference
介紹幾套好用的檔案上傳元件

星期四, 3月 06, 2008

取出$.get資料

var txtContentA; //global變數
function getText(){
var txtContentB;
$(document).ready(function() {
$.get('1.txt', function(data){
txtContentA=data;
txtContentB=data;
});
});
alert(txtContentA); //有資料
alert(txtContentB); //無資料
}

global變數(txtContentA)可以取得1.txt內容
而區域變數txtContentB就沒有了...
另外可直接把data傳給自訂的function
$(document).ready(function() {
$.get('1.txt',Test);
});
function Test(data,status){
alert(data); //data 就是要的東西
alert(status); //status 回報是否成功
}

直接呼叫function name,也不用理參數
不需再delegate的做法
是很方便,不過太簡單反而想好久
多虧老大試出來了...

來吧 jQuery 沒在怕的

星期三, 3月 05, 2008

Flash 取Datagrid的值

搞了好久,總算解決了
看了flash的sdk看半天還是搞不懂
總算在網路上找到了
而且是在庫存檔... 阿密陀佛
原來datagrid.getItemAt(i)
取到的是第幾列...因為要再給定哪一行...
好感動...

//印出所有的資料
function showdata(datagrid){
var fields = datagrid.getColumnNames();
var i,j,tempfield="",temprow="",temprec="";

trace("--Recordset Properties--");
trace("Recordset length: " + datagrid.getLength());
trace("Fields: " + fields);
trace("Begin records...");

for (var i = 0; i< datagrid.getLength(); i++) {
temprec =datagrid.getItemAt( i );
for(var j=0; j < fields.length; j++){
tempfield = fields[j];
temprow += tempfield + ': "' + temprec[tempfield] + '"; ';
}
trace(temprow);
temprow="";
}
trace("End records...");
trace("--End Recordset Properties--");
}

JavaScript取得html tag

< div id="divA">
< input type="image">
< input type="button">
< ddiv>

//取得divA
var divA = document.getElementsByTagName("div")[0]; //會取出所有的div,所以是個array
var divA =  document.getElementsById("divA");       //如有設id,可直接取id

//要取得div下的所有input
-doucument.all("divA").getElementsByTagName(input);
-doucument.divA.getElementsByTagName(input);


例2:http://www.javascriptkit.com/jsref/checkbox.shtml
< form name="test">
< input type="checkbox" name="checkgroup" checked />
< iinput type="checkbox" name="checkgroup" />
< iinput type="checkbox" name="checkgroup" checked />
< form>

for (i=0; i < document.test.checkgroup.length; i++){
  if (document.test.checkgroup[i].checked==true)
  alert("Checkbox at index "+i+" is checked!")
}


tag "a" 的href屬性
利用void(0)避開超鏈結時,要注意其他設定要在這之前,不然會被略過
< a href="javascript:void(0); name='test'"> //再利用javascript會抓不到test
< a name='test'" href="javascript:void(0); > //先將name放在前面就ok

星期二, 3月 04, 2008

JavaScript動態產生html tag

//table
var tr = document.createElement("tr");
var td = document.createElement("td");
td.innerText = "this is the text of td";
tr.appendChild(td);


//button
butt = document.createElement('BUTTON');
butt.appendChild(document.createTextNode('click me!'));
butt.onclick = downloadCourse;


//a
var aElement = document.createElement("< a href=javascript:go() >< /a>");
a的href可以直接呼叫javascript的function


//input
var input1 = document.createElement("input"); // create input node
input.type = "checkbox"; // set type, others like text,radio
input.name ="chk"; // set name as its id

*要在input後面加字,即利用appendChild(document.createTextNode('xx'))

*快速產生
var input2 = document.createElement("< input type=button>"); 


//add attribute
var div = document.getElementById('div1'); 
var attr = document.createAttribute('class'); 
attr.value = 'cssClass1'; 
div .setAttributeNode(attr);

flash與xml

1.查詢
//顯示level為4的節點的title值

trace (kingdaXML.item.(level == 4).title);

//顯示level>2的節點的title值,本處結果大於1,所以是一個XML Array。

trace (kingdaXML.item.(level > 2).title);

//使用屬性用@開頭即可。真方便。

trace (kingdaXML.item.(level > 2).@id);

2.添加或者修改屬性
方便的不能再方便,直接寫即可。爽翻天啊。



//把id == 1的節點level值改為2

kingdaXML.item.(@id==1).level = 2;

//把id==1的節點添加一個屬性 page

kingdaXML.item.(@id==1).page = 100;

trace (kingdaXML.item.(@id==1));

*
name() 取得 => ABC
toXMLString() //印出從開始tag到結束tag
toString() //印出tag間的字
setName("tagName"); //可改tag name

*利用xpath抓的到是nodelist
var stateNode:XML=XmlDoc.region;會失敗
因此要用list接
或加上陣列[0]

*如果只有一個子節點
.children()會抓不出來

flash cs3 熱鍵

Ctrl+enter 執行
Ctrl+F7 開啟UI元件面板
shift+F7 元件參數面板
F9 開啟actionscript視窗(focus在影格上)

星期三, 2月 13, 2008

NoClassDefFoundError: org/jaxen/JaxenException

當使用dom4j,jdom等來讀xml時
會有NoClassDefFoundError: org/jaxen/JaxenException發生
因為dom4j不包含SAX與DOM"接口"
所以要多下載jaxen包

下載並解開取出jaxen.jar 引用即可以

星期三, 1月 23, 2008

抽象class與介面interface

Abstract class
可擺放實做的method,也可放抽象的method,目的在擴充,所以抽象類別是未定義完全的類別,需繼承才能使用,抽象的method可實做(擴充),可不實做(擴充)

Interface
只定義不實做method,目的讓父類別可以呼叫子類別method,因此當有多個子類別實作父類別的method,即可只透過父類別(介面)的參考呼叫各子類別的method
*interface預設public及abstract,因此有加沒加沒差

星期二, 1月 22, 2008

MySQL亂碼

在網路上找半天
原因是MySQL預設文字編碼是 cp1252 West European (latin1)
因此儲進去的格式已變成latin1了 所以用其他編碼讀取來當然會錯

最簡單的解法方法
1.網頁上 (如phpMyAdmin)
=>讓資料庫的儲存格與讀取的編碼相同
1.將文字編碼cp1252 West European (latin1) 改為utf8
2.sql connection string =>Host=localhost;Database=xxx;charset=utf8
加上編碼utf8即可正常顯示

至於原本已經存latin1的...
還沒找到解決方法


另外利用連線取資料
如果資料庫設為utf,則建利連線後
可下 mysql_query("SET CHARACTER SET 'utf8'");

星期五, 1月 18, 2008

C#動態創建類的實例

C#動態創建類的實例: "

C#動態創建類的實例,如果對性能要求不是很高,而且需要動態創建類的實例的時候可以考慮使用以下的方法:

1. 定義兩個類:
// 基類
public class BaseBusiness
{ }

// 子類
public class SampleBusiness : BaseBusiness
{ }

2. 動態創建類的實例

// 程序集名稱
string assemblyName = "abc.Business";
// 類名稱
string className = "SampleBusiness";

// 獲得指定名稱的類型:程序集名稱 + 類名稱
Type type = Type.GetType(assemblyName + "." + className);

// 創建類型的一個實例
object obj = Activator.CreateInstance(type);

// 將實例強制轉換成指定的類型
BaseBusiness curBusiness = (BaseBusiness)obj;

(編輯:IT資訊之家 www.it55.com )


**如何invoke method
續上例
invoke method有兩種,
1.實體化(new一個實體再invoke)

法1. 透過實體直接使用
curBusiness.Invoke(obj,new string[]{"test"}); //test => 字串參數,如果沒有就放null

法2. 透過type取得method
System.Reflection.MethodInfo method = type.GetMethod("go"); //go => method name


2.靜態呼叫(如Math.abs的static物件,不用new)
method = type.GetMethod("MethodtoUpperCase");//有個static的method名稱
string a = (string)method.Invoke(null,new [] object{"lowercase"}); //要傳object陣列型態
p.s 沒有參數,就給null,如同沒有實體的null
==>LOWERCASE


Reference:C#反射實例講解

星期一, 1月 14, 2008

強名稱

看半天看不懂什麼叫強名稱
似乎是為了讓 dll名稱唯一
從MSDN上抄來的

具有強名稱的程序集
強名稱是由程序集的標識加上公鑰和數字簽名組成的。其中,程序集的標識包括簡單文本名稱、版本號和區域性信息(如果提供的話)。強名稱是使用相應的私鑰,通過程序集文件(包含程序集清單的文件,並因而也包含構成該程序集的所有文件的名稱和散列)生成的。

通過簽發具有強名稱的程序集,您可以確保名稱的全局唯一性。強名稱還特別滿足以下要求:

*強名稱依賴於唯一的密鑰對來確保名稱的唯一性。任何人都不會生成與您生成的相同的程序集名稱,因為用一個私鑰生成的程序集的名稱與用其他私鑰生成的程序集的名稱不相同。
*強名稱保護程序集的版本沿襲。強名稱可以確保沒有人能夠生成您的程序集的後續版本。用戶可以確信,他們所加載的程序集的版本出自創建該版本(應用程序是用該版本生成的)的同一個發行者。
*強名稱提供可靠的完整性檢查。通過 .NET Framework 安全檢查後,即可確信程序集的內容在生成後未被更改過。但請注意,強名稱中或強名稱本身並不暗含信任級別,例如由數字簽名和支持證書提供的信任。

在引用具有強名稱的程序集時,您應該能夠從中受益,例如版本控制和命名保護。如果此具有強名稱的程序集以後引用了具有簡單名稱的程序集(後者沒有這些好處),則您將失去使用具有強名稱的程序集所帶來的好處,並依舊會產生 DLL 衝突。因此,具有強名稱的程序集只能引用其他具有強名稱的程序集。

星期三, 1月 09, 2008

Log4net

日誌記錄,可分Debug、Info、Warn、Error、Fatal等級
相關文件:
1.史帝芬心得筆記--log4net
2.Log4Net使用指南

Installation
Step1. 下載log4net
http://logging.apache.org/log4net/

Step2. 設定log4net.snk
似乎是存讓dll存取本機檔案的key,所以不同的電腦都需重新執行下列指令
*注意,log4net.snk是經由下列程式產生,並不會存在任何pack裡
command:sn -k log4net.snk
p.s. sn一般存放在C:\Program Files\Microsoft.NET\FrameworkSDK(xxx版本)\Bin\
執行完後便會產生log4net.snk
再移到解壓的根目錄(log4net預設位置讀取log4net.snk的位置)

Step3.編譯log4net.dll
在解壓的src目錄下將log4net.sln載入Visual Studio .NET,編譯後可以得到log4net.dll

p.s. 未產生log4net.snk會出現以上錯誤訊息「...讀取金鑰檔'log4net.snk' 發生錯誤 -- 系統找不到指定的檔案。」


===重建金鑰,不必重新compiler==
下面是網路上找到的

1. 創建一個新的隨機密鑰對。
d:\temp> sn -k test.snk

2. 反編譯目標程序集(假設是 a.dll)。
d:\temp> ildasm a.dll /out=a.il

3. 重新編譯,附帶強命名參數。
d:\temp> ilasm a.il /dll /resource=a.res /key=test.snk /optimize

4. 驗證簽名信息。
d:\temp> sn -v a.dll


*找不到ilasm.exe
用搜尋找一下吧...找到後,在同一資料夾還有fusion.dll


MSIL 組譯工具 (Ilasm.exe)
MSIL 反組譯工具 (Ildasm.exe)

星期二, 1月 08, 2008

xmlDoc.load跟xmlDoc.loadXml的不同

xmlDoc.load:可讀取xml檔案(dtd未定義)
xmlDoc.loadXml:直接讀取已定義的xml檔...

如過用loadXml讀未定義的xml檔
會出現「在根層次的資料無效。 第 1 行,位置 1。」
應該是這樣吧...智源大師開導後的心得

例外可用.net裡的XmlTextWriter建立語式正確的 XML

以 XmlTextWriter 建立語式正確的 XML