用ASP方式實現擁有動態伸縮層次列表的首頁

來源:互聯網
上載者:User
動態|伸縮|伸縮 微軟公司推出的IE4.X,使得按照HTML4標準製作的網頁一時成為時尚,這類網頁在動態功能方面有了非常大的提高。特別是可以通過頁面內嵌的Script語句,使頁面中的任意一段文字可以在需要時顯示出來,在不需要時隱藏起來,利用這一特性,就可以在頁面上設計出可以伸縮的層次列表出來。這種列表實際表現的是一種分層次的樹狀結構,讀者可以用滑鼠點擊上一層的條目,而展開或收合它的下一層。在明白了HTML4標準中DOM的實現機制及對風格表單的定義之後,很容易可以找到實現這種列表的途徑。但是一般來說,這種列表的條目都比較多,如果每次都用手工製作,不僅非常煩瑣,而且也十分容易出錯,所以要真正應用到實際的頁面製作當中,還必須有一種比較自動的方法。本人通過實驗,用ASP方式完成了一種比較通用的實現過程,稍加變化就可以應用到各種首頁的製作過程當中,非常方便,在這裡我把它寫出來奉獻給大家,希望大家能多提意見嘍。  

簡單的實現  
要在網頁上實現伸縮,首先要清楚如何使頁面中的一段文字按需要隱藏和顯示出來。我們看下面這段HTML格式的片段:  

<Div Id=”test” Style=”Display:none”>要隱藏的文字</Div>  

這是符合HTML4標準的HTML語句,夾在<Div>之間的文本將不顯示在頁面上,因為它風格表單的Display屬性為none。(由於本文不主要介紹HTML4的風格表單,有關祥情請讀者尋找相關資料。)只要能動態地將Display屬性設為空白,即預設值,那麼這段文字就可以動態地被顯示出來。這需要Script的支援,下面就是一個讓上面那樣的文字顯示和隱藏起來的兩個JavaScript函數,只要將自訂的Div的Id值代入,對應的文字就顯示或隱藏起來了:  

<script language="JavaScript">  

function ShowDiv(DivId)  

{  

     document.all[DivId].style.display='';  

     return 0;  

}  

</script>  

function HideDiv(DivId)  

{  

     document.all[DivId].style.display='none';  

     return 0;  

}  

</script>  

有了這兩個函數,就要考慮在什麼時候調用它們。熟悉Script編程的讀者當然已經想到,可以把它們放到事件響應過程之中了。大體的形式可能是這樣:  

<a href=”#” return HideDiv(‘test’);”>隱藏  

將上面的片段組合到一個HTML檔案中,也算是一個完整的例子了,用IE4實驗一下,看看是否達到了預期的效果。(注意:JavaScript是大小寫敏感的,排版時可能出現差錯,實際應用中,最好都用小寫。)  

有了以上的瞭解,製作一個伸縮式的層次列表,只是由簡到繁的過程,所以我也就不必做什麼解釋,只提供一個例子做為參考,這個例子也是我們下一步要用程式來實現的一個結果:  

   

檔案名稱:LsTest.htm  

<html>  

<head>  

<title>DyList Test</title>  

<script language="JavaScript">  

/*  

     根據對象當前的屬性,改變對象的顯示狀態  

*/  

function OnClickDiv(DivId)  

{  

     if(document.all[DivId].style.display=='none')  

       { document.all[DivId].style.display=''; }  

     else  

       { document.all[DivId].style.display='none'; }  

     return 0;  

}  

</script>  

</head>  

<body>  

<h3>List Start</h3><hr>  

<Div Id="dy1" Style=display:>
  


<a href="#" )>國內報刊  

<Div Id="dy2" Style=display:none>
  


人民日報  


光明日報  


<a href="#" )>福士日報  

<Div Id="dy3" Style=display:none>
  


福士日報  


農村福士  


齊魯晚報  


生活日報  


</div>  


</div>  


<a href="#" )>搜尋引擎  

<Div Id="dy4" Style=display:none>
  


雅虎  


搜狐  


</div>  


</div>  

<hr><h3>List End</h3>  

</body>  

</html>  

   

實現自動化  
上面的一大堆東西,誰看了都會眼花繚亂的。不過在IE4上瀏覽的效果,又確實酷得讓人心癢,所以費一點力氣,用程式將這一煩瑣的製作過程自動化一下,是完全值得的。一個簡單的思路:將樹狀階層的資料儲存到一個簡潔的檔案載體當中,寫一段通用的程式從載體檔案中讀取資料,產生我們所要的HTML檔案。那麼頭一步是要選擇什麼樣的載體啦,資料庫方式當然最值得考慮,但這將牽扯出一大堆的問題,我想還是在另一個專題裡來討論吧,在這裡我選擇了Windows平台上常用的.ini檔案,這種檔案很適合於儲存樹狀的層次資料,並且系統平台已經提供了基本的操作函數,可以大大省些力氣。  

我把這一過程製成了ASP(Active Server Page)的形式,這樣拿過來就可以直接使用了,當然有時還是需要靜態HTML檔案,那麼可以把ASP中的代碼轉移到VB程式中,也並不困難。為了能在ASP中處理.ini檔案,用到了我以前寫的一個ActiveX服務物件,這個服務物件將對.ini檔案操作的各種函數函數封裝在一個類(class)中,我用起來已經有順手了(關於這個服務物件的具體說明,請見本人的《設定檔(.ini)在VB5中的應用》一文,聽別人講在什麼刊物上見過我的這篇文章,可我一直也沒有接到任何通知,所以將它也一併附在後面)。  

下面開始我們的程式設計吧,先來看一下樹狀的層次資料儲存在.ini檔案中的形式:  

   

檔案名稱:LsTest.ini  

[root]  

a=國內報刊  

b=搜尋引擎  

   

[a]  

a1=人民日報,http://www.peopledaily.com.cn  

a2=光明日報,http://www.gmdaily.com.cn  

a3=福士日報  

   

[a3]&n



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。