首页 > 代码库 > 苹果浏览器实战（三）
苹果浏览器实战（三）
上两篇介绍菜单、工具栏以及实际使用的功能实现。其实已经违背老师教导（自己去发明明轮）。js中有一现成的下拉列表（select ->option）。
大家一定非常熟悉，而且select 下拉列表还有（onchange）使用非常方便。为什么还要自己设计类似的菜单和列表框呢？
1. 如果js的下拉列表条目很多，可能会消耗较多的系统资源（至少在我的电脑上运行时，其它窗口会闪烁）。
2. 如果工具栏隐身，虽然苹果浏览器还保留下拉列表（其它浏览器连下拉列表也不见了），但好像选择无效。
3. 只能在自身的网页中编辑修改内容，动态更改好像很困难。
先看一下有点夸张的上拉列表：
图1.小说阅读器（图片版）：因为是一张张的图片，网页可以更简单，只要如下几行：
<html>
<head>
<meta charset="gb2312">
<title>Javascript</title>
<link href=http://www.mamicode.com/"turnpage.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src=http://www.mamicode.com/"jquery.min.js"></script>
<script type="text/javascript" src=http://www.mamicode.com/"turn.min.js"></script>
<script type="text/javascript" src=http://www.mamicode.com/"turnpage.js"></script>
</head>
<body onl oad="getImages()">
<div id="book"></div>
<div id="chaptMenu"></div>
<div id="pgnumber"><ss>章节 ▼</ss><ss>page </ss>总:<ss>ttlpage</ss>页</div>
</body>
</html>
蓝色菜单名“章节”右边的箭头应该向上（是字符符号也可以用图标），列表框的内容是根据原书目录编辑一个文件用后缀.htm（因为有中文、列表标签等）保存。
格式大致如下：
<meta charset="gb2312">
<li><span>25</span> javascript 概述</li>
<ul><li><span>26</span> 1.1 什么是JavaScript</li>
<li><span>26</span>1.2 JavaScript 的版本</li>
<li><span>27</span>1.3 客户端 JavaScript</li>
<li><span>33</span>1.4 其他环境中的 JavaScript</li>
<li><span>33</span>1.5 JavaScript 探秘</li>
</ul>
<li><span>39</span> 词法结构</li>
<ul><li><span>39</span> 2.1 字符集</li>
<li><span>40</span> 2.2 大小写敏感</li>
。。。也就是一般的列表list，加上 $("#chaptMenu").load("menu1.htm"); menuIdex=true; 两句代码。目录就可以用了。
鼠标点一下蓝色“章节”，以下代码显示列表框
$("#pgnumber ss:eq(0)").live("click",function(){
if(!menuIdex) return;
$("#chaptMenu").show();
$("#chaptMenu li").show();
});
用滚动条选择你想阅读的章节，就翻到那里。
翻动效果如下：
