「使用者:Xacid」修訂間的差異
出自 MozTW Wiki
（getElementById("") 做選單） |
|||
| 行 2： | 行 2： | ||
== 關於網頁技術 == | == 關於網頁技術 == | ||
| + | === getElementById("") 做選單 === | ||
| + | 其實應該可以完全用 CSS 寫，可是好像沒辦法點一次開、再點一次收。 | ||
| + | <pre> | ||
| + | <html> | ||
| + | |||
| + | <head> | ||
| + | <script language="JavaScript"> | ||
| + | function modifyMenu(menuId){ | ||
| + | menu=document.getElementById(menuId); | ||
| + | if( menu.style.display == "none") | ||
| + | menu.style.display = "block"; | ||
| + | else | ||
| + | menu.style.display = "none"; | ||
| + | } | ||
| + | </script> | ||
| + | <style type="text/css"> | ||
| + | #menu1, #menu2{ | ||
| + | display:none; | ||
| + | } | ||
| + | </style> | ||
| + | </head> | ||
| + | |||
| + | <body> | ||
| + | <div onmousedown="modifyMenu('menu1')">選單之一 | ||
| + | <ul id="menu1"> | ||
| + | <li>次選單一</li> | ||
| + | <li>次選單二</li> | ||
| + | <li>次選單三</li> | ||
| + | </ul></div> | ||
| + | <div onmousedown="modifyMenu('menu2')">選單之二 | ||
| + | <ul id="menu2"> | ||
| + | <li>次選單一</li> | ||
| + | <li>次選單二</li> | ||
| + | <li>次選單三</li> | ||
| + | </ul></div> | ||
| + | </body> | ||
| + | |||
| + | </html> | ||
| + | </pre> | ||
=== position:fixed 的使用 === | === position:fixed 的使用 === | ||
於 2005年3月16日 (三) 20:51 的修訂
其實不知道要寫什麼，就隨便放一些筆記。
關於網頁技術
getElementById("") 做選單
其實應該可以完全用 CSS 寫，可是好像沒辦法點一次開、再點一次收。
<html>
<head>
<script language="JavaScript">
function modifyMenu(menuId){
menu=document.getElementById(menuId);
if( menu.style.display == "none")
menu.style.display = "block";
else
menu.style.display = "none";
}
</script>
<style type="text/css">
#menu1, #menu2{
display:none;
}
</style>
</head>
<body>
<div onmousedown="modifyMenu('menu1')">選單之一
<ul id="menu1">
<li>次選單一</li>
<li>次選單二</li>
<li>次選單三</li>
</ul></div>
<div onmousedown="modifyMenu('menu2')">選單之二
<ul id="menu2">
<li>次選單一</li>
<li>次選單二</li>
<li>次選單三</li>
</ul></div>
</body>
</html>
position:fixed 的使用
看到一個關於固定圖層的討論，麻煩的是 IE 不能用 position:fixed ，還會把 body 多加空的捲軸；而 Firefox 不能使用滑鼠滾輪捲動 overflow:scroll 製造的捲軸。於是很 dirty 的利用 IE 不能用的 selector ，製造出固定的圖層，而且在 Firefox 中也可以用滑鼠捲動。其實根本是純粹無聊， IE 沒有的東西不要管他就好了。
<html>
<head>
<style type="text/css">
<!--
body{
padding:0;
margin:0;
overflow:auto;
}
#main{
position:absolute;
height:100%;
width:100%;
overflow:auto;
}
body > div#main{
height:auto;
overflow:visible;
}
#fixed{
position:absolute;
top:100px;
right:100px;
z-index:100;
background-color:#aaaaff;
}
body > div#fixed{
position:fixed;
}
-->
</style>
</head>
<body>
<div id="fixed">
<h1>Fixed!</h1>
</div>
<div id="main">
*********************<br />
*********************<br />
*********************<br />
*********************<br />
(repeats)
</div>
</body>
</html>
