?? 12-1 可自定義的導(dǎo)航列表.htm
字號(hào):
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=GB2312" />
<title>12-1 可自定義的導(dǎo)航列表</title>
<!-- 通用樣式表 -->
<style>
* { font-size:12px; font-family:宋體, Arial; } /*規(guī)定了所有的字體樣式*/
body { overflow:auto; background-color:buttonface; border-style:none; }
.button01 { padding:5px 10px 0px 10px; border-width:1px; margin:3px; text-align:center; }
#lst_hidden, #lst_show { width:200px; height:180px; }
#div_preview { background-color:white; border:2px inset buttonface; height:36px; margin:5px 10px; }
#div_preview a { color:navy; text-decoration:none; height:26px; line-height:26px; margin:0px 3px; padding:2px 15px 0px 15px; border:1px solid white; }
#div_preview a:hover { border:1px solid #555; background-color:#D9E9F9; }
</style>
<script>
// 導(dǎo)航列表的所有項(xiàng)目
var navList = [
"Google", "http://www.google.cn",
"Baidu", "http://www.baidu.com",
"網(wǎng)易", "http://www.163.com",
"藍(lán)色理想", "http://www.blueidea.com",
"MSDN", "http://msdn.microsoft.com"
];
//添加新項(xiàng)目
function addItem(){
for(var i=0; i<$("lst_hidden").options.length; i++){
if($("lst_hidden").options[i].selected){
$("div_preview").add($("lst_hidden").options[i].text, $("lst_hidden").options[i].value);
$("lst_show").appendChild($("lst_hidden").options[i]);
i--;
}
}
}
//刪除項(xiàng)目
function delItem(){
for(var i=0; i<$("lst_show").options.length; i++){
if($("lst_show").options[i].selected){
$("div_preview").del(i);
$("lst_hidden").appendChild($("lst_show").options[i]);
i--;
}
}
}
//項(xiàng)目下移
function downItem(){
if($("lst_show").options[$("lst_show").options.length-1].selected)return;
for(var i=$("lst_show").options.length-1; i>-1; i--){
if($("lst_show").options[i].selected){
$("div_preview").down(i);
$("lst_show").insertBefore($("lst_show").options[i],$("lst_show").options[i+2]);
}
}
}
//初始化頁面的所有事件
function initEvent(){
$("cmdAdd").onclick = addItem;
$("cmdDel").onclick = delItem;
$("cmdUp").onclick = upItem;
$("cmdDown").onclick = downItem;
}
//初始化列表
function initList(){
for(var i=0; i<navList.length; i+=2){
$("lst_hidden").options[$("lst_hidden").length] = new Option(navList[i], navList[i+1]);
}
}
//初始化預(yù)覽欄
function initPreview(){
$("div_preview").add = function(text, url){
var obj;
obj = document.createElement("A");
obj.innerHTML = text;
obj.href = url;
this.appendChild(obj);
}
$("div_preview").del = function(index){
this.removeChild(this.childNodes[index]);
}
$("div_preview").up = function(index){
this.insertBefore(this.childNodes[index],this.childNodes[index-1]);
}
$("div_preview").down = function(index){
if(index+2>this.childNodes.length-1){
this.appendChild(this.childNodes[index]);
}else{
this.insertBefore(this.childNodes[index],this.childNodes[index+2]);
}
}
}
//項(xiàng)目下移
function upItem(){
if($("lst_show").options[0].selected)return;
for(var i=1; i<$("lst_show").options.length; i++){
if($("lst_show").options[i].selected){
$("div_preview").up(i);
$("lst_show").insertBefore($("lst_show").options[i],$("lst_show").options[i-1]);
}
}
}
function $(str){ return(document.getElementById(str)); }
//頁面載入事件
window.onload = function(){
initList();
initPreview();
initEvent();
}
</script>
</head>
<body>
<table>
<tr>
<td>隱藏的項(xiàng)目：</td><td></td>
<td>顯示的項(xiàng)目：</td><td></td>
</tr>
<tr>
<td>
<select id="lst_hidden" size="10" multiple="true" ></select>
</td>
<td valign="middle">
<input type="button" class="button01" value="->" title="添加" id="cmdAdd" /><br/>
<input type="button" class="button01" value="<-" title="刪除" id="cmdDel" />
</td>
<td>
<select id="lst_show" size="10" multiple="true"></select>
</td>
<td valign="middle">
<input type="button" class="button01" value="↑" title="上移選中項(xiàng)目" id="cmdUp" /><br/>
<input type="button" class="button01" value="↓" title="下移選中項(xiàng)目" id="cmdDown" />
</td>
</tr>
<tr>
<td colspan="4">
<fieldset>
<legend>效果預(yù)覽</legend>
<div id="div_preview"></div>
</fieldset>
</td>
</table>
</body>
</html>?? 快捷鍵說明
復(fù)制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號(hào)
Ctrl + =
減小字號(hào)
Ctrl + -