2012年2月23日 星期四

dTree config 說明

配置
名稱類型默認描述
targetStringtrue所有節點的打開方式
folderLinksBooleantrue點擊文件夾節點(即非最終節點)的時候是否可以關閉或打開節點
useSelectionBooleantrue選中某節點的時候,該節點是否可以高亮顯示
useCookiesBooleantrue是否通過使用cookies記住當前節點的關閉打開狀態
useLinesBooleantrue是否使用虛線來直觀的展示目錄結構
useIconsBooleantrue是否顯示圖標
useStatusTextBooleanfalse在瀏覽器的狀態欄顯示name或者url
closeSameLevelBooleanfalse同一時刻只有一個節點可以被展開
inOrderBooleanfalse加速父節點樹的顯示
folderLinks
true的話則只有點1處才會關閉或打開節點,false的話無論單擊1還是2處都可以打開或關閉節點
folderLink
useSelection
true高亮,false不高亮
useSelection
useLines
false沒虛線,true有
useLines
useIcons
true顯示,false不顯示
useIcons
useStatusText
true顯示name,false顯示url
useStatusText
closeSameLevel
當為true的時候最多只能出現下面的情況,若此時再選my picture 則會這樣
closeSameLevel

用dtree實現樹形菜單 dtree使用說明

dtree是一個由JavaScript編寫成的簡單的樹形菜單組件,目前免費並且開源。 
目前有很多的樹形菜單組件(比如ext),dtree是一種簡單易懂的js組件, 
不需要複雜的操作即可生產,同時支持動態從數據庫引入數據 
解壓後有以下幾部分: 
img文件夾: 包含樹形菜單顯示需要的圖標 
api.html : 作者寫的dtree幫助文檔    
dtree.css: 樹形菜單的樣式 
dtree.js : js核心文件,代碼都在其中 
example01.html:樹形菜單實例 dtree主要方法介紹: 
dtree主要方法介紹: 
add(parameters):添加一個樹節點,實際參數有9個add(id,pid,name,url,title,target,icon,iconOpen,open); 
位置 參數別名 類型 功能 
1 id int 節點自身的id(唯一) 
2 pid int 節點的父節點id 
3 name string 節點顯示在頁面上的名稱 
4 url string 節點的鏈接地址 
5 title string 鼠標放在節點上顯示的提示信息 
6 target string 節點鏈接所打開的目標frame 
7 icon string 節點關閉狀態時顯示的圖標 
8 iconOpen string 節點打開狀態時顯示的圖標 
9 open bool 節點第一次加載是否打開 
註:dtree.js文件中是一些默認圖片的路徑,可以自己配置圖片和路徑,我下載的在44~57行 
openAll()打開全部節點,可在樹對象創建前或創建後調用 
closeAll()關閉全部節點,可在樹對象創建前或創建後調用 
openTo(id,select)打開指定id的節點,可以傳兩個參數: 
id 指定需要打開的節點的唯一id 
  select 是否讓該節點處於選中狀態 
config配置 
變量 類型 默認值 描述 
target string 所有節點的target 
folderLinks bool true 文件夾可被鏈接 
useSelection bool true 節點可被選擇高亮 
useCookies bool true 樹可以使用cookie記住狀態 
useLines bool true 創建帶結構連接線的樹 
useIcons bool true 創建帶有圖表的樹 
useStatusText bool false 用節點名替代顯示在狀態欄的節點url 
closeSameLevel bool false 同級節點只允許一個節點處於打開狀態 
inOrder bool false 加速父節點樹的顯示 
例如:tree.config.closeSameLevel=true;表示打開某級節點時,該級其他處於打開狀態的同級節點會被關閉 
示例代碼: 
複製代碼代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
<title>Tree</title> 
<link rel="StyleSheet" href="dtree.css" type="text/css" /><!-- 引入css樣式表 --> 
<script type="text/javascript" src="dtree.js"></script><!-- 引入js腳本 --> 
</head> 
<body> 
<div class="dtree"><!--創建一個div層,指定class為「dtree」,此時該層就引用了dtree的樣式 --> 
<script type="text/javascript"> 
d = new dTree('d');//new一個樹對象 
//設置樹的節點及其相關屬性 
d.add(0,-1,'My example tree'); 
d.add(1,0,'Node 1','example01.html'); 
d.add(2,0,'Node 2','example01.html'); 
d.add(3,1,'Node 1.1','example01.html'); 
d.add(4,0,'Node 3','example01.html'); 
d.add(5,3,'Node 1.1.1','example01.html'); 
d.add(6,5,'Node 1.1.1.1','example01.html'); 
d.add(7,0,'Node 4','example01.html'); 
d.add(8,1,'Node 1.2','example01.html'); 
d.add(9,0,'My Pictures','example01.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif'); 
d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir'); 
d.add(11,9,'Mom\'s birthday','example01.html'); 
d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif'); 
//config配置,設置文件夾不能被鏈接,即有子節點的不能被鏈接。 
d.config.folderLinks=false; 
document.write(d); 
</script> 
</div> 
</body> 
</html> 

2012年2月14日 星期二

讓Webbrowser中的js直接呼叫Winform的function

在Winform中內嵌Webbrowser想來也是一個很普遍的功能吧,一般我們在Winfrom中內嵌Webbrowser的使用大概也分不開幾種吧:
1.內嵌網頁View
2.擷取網頁內容做處理
3....
不過今天我們聽到一個很有趣的需求,使用者希望,當點選網頁上的某個按鈕後,要在client執行某個winform系統,通常我們在純Webform上聽到這個需求,都會覺得有些許荒謬,叫Webform去叫Winform程式?應該是搞錯了吧?難道又要我使用很不想使用的ActiveX嗎?沒有更簡單一點的方法了嗎?
後來想到我現在是個Winform的程式,不知道有沒有機會透過Webbrowser中內嵌的Web form,透過javascript來呼叫我的Winform程式,然後由Winform程式來呼叫我client端的Winform程式呢?搜尋了一下,找到這篇:WinForm透過WebBrowser與JavaScript溝通
看了一下總覺得他的方法太過複雜,我就想起之前我們組有個小工具好像有類似的功能,翻了一下它的說明文件,酷喔,還真的有這樣的功能呢?看了一下它code的寫法,一整個簡潔,只要作些簡單設定就好了,下面我們先來看一下它如何達成我們以上的功能:
先在Winform程式中拉一個Webbrowser元件,並將Url指定到某個網頁:
image
接著在Winform程式中先寫一個簡單的function叫justMessageBox準備保留讓javascript呼叫:
1public void justMessageBox(string pMessage)
2{
3    MessageBox.Show(pMessage);
4}
接著到我目標的網頁去,我只有放一個button,這個button按下去後會透過window.external去呼叫我剛剛在Winform中寫好的justMessageBox function:
image
好了,這樣應該可以使用了吧,按下建置-->執行,網頁載入完成後,我按下Button1,結果卻出現這個錯誤訊息:
image
window.external竟然是null,我應該是漏了什麼步驟吧,又檢查了一下,發現人家程式中有用到一個Webbrowser的隱藏屬性,這個屬性在屬性視窗中是看不到的,趕快在我的建構函式中加入這一行:
1webBrowser1.ObjectForScripting = this;
這個屬性蠻少用到的,我們參考一下MSDN的說明:http://msdn.microsoft.com/en-us/library/system.windows.forms.webbrowser.objectforscripting.aspx
image
不過它網頁提到,除了上頭那個屬性設定外,也需要在class的屬性上多加上這兩行:
1[PermissionSet(SecurityAction.Demand, Name="FullTrust")]
2[System.Runtime.InteropServices.ComVisibleAttribute(true)]
PermissionSet這部分或許我們在之後的應用程式安全中可再多做說明,而在此處我們先設為FullTrust,代表完全信任;而ComVisibleAttribute這個屬性主要是在設定這個class或者assembly是否為COM可見的型別,如果我把這一行拿掉,我們程式執行時會出現這樣的錯誤:
image
當我們做完以上的工作後,再次執行程式,讓人振奮的,我希望的結果出現了,我透過javascript呼叫到我Winform程式中的justMessgeBox function:
image
接著我再改一下我要做的事情,我寫這樣,嘗試由Webbrowser中要Winform去幫我叫起client端的notepad,執行的結果也是OK的。
1public void justMessageBox(string pMessage)
2{
3    Process tProc = new Process();
4    tProc.StartInfo.FileName = "notepad.exe";
5    tProc.Start();
6}
試出來的做法比前面找到的那篇來的簡單,自己玩了一下也還沒有遇到太特別的問題,這個功能對MSN這類型的小工具實在是一項利器,太棒了,這邊分享給各位。

參考資料: