|
引用 | 編輯
keigo
2005-08-30 22:03 |
樓主
▼ |
||
x0
其實這只是JavaScript+CSS的一點小應用而已，廢話不多說，先來看下列的Code：  在Body裡面我放了一個Form，又用了Div來把表單切成兩部份： 一部份是姓名跟信箱的登打欄杆；另一部份是電話跟地址的登打欄杆，這一部份也就是做為我們進階表單的欄位。我放了一個進階選項的CheckBox，在它被Click時，會觸發show()這個方法。 讓我們先來看這兩個Div除了id以外到底有什麼不一樣的地方，不知道你們發現了沒，我在第二個Div裡面加了一段style="display:none"，這一段就是我們今天的主角。 display這個性質可設定整個元件要不要顯示，以及顯示的方式。它可用的參數這裡一一介紹。none代表不顯示，且此元件不占任何空間。block代表顯示，並視為區塊，前後緊臨的元件將換行顯示。inline代表顯示，但前後緊臨的元件會排在其左右，並不會換行。list-item代表顯示，與block大致相同。table-header-group只能用在，代表表格在多頁時（如列印），此區之表格將會自動加在有此表格之頁面的第一列。table-header-group與table-footer-group相似，但用於，作用是表格在多頁時，此區之表格將會自動加在有此表格之頁面的最末列。所以使用如display:none表示此元件就被隱藏了。 既然知道怎樣隱藏跟顯示，再來的就簡單多了。我們來看當勾選了進階選項的CheckBox後，所觸發的方法。 當觸發onClick時，會把CheckBox本身的參考一起傳給show()這個方法，這樣我們才比較好得知到底是有沒有勾選了進階選項這個CheckBox。當CheckBox的checked值為true時，表示被勾選了，s2這個Div要顯示出來讓使用者填寫；為false時，表示未被勾選，所以s2這個Div要隱藏起來。 相信在了解display的用法後，這一小段的Javascript應該是難不倒你們。  範例瀏覽： http://abgne.myweb.hinet.net/0001/0001.html 以上內容於2005/08/30發表在小弟的Blog裡http://blog.xuite.net/abgne/diary1/3847951  x0
|
|||
