苹果浏览器实战(三)

上两篇介绍菜单、工具栏以及实际使用的功能实现。其实已经违背老师教导(自己去发明明轮)。js中有一现成的下拉列表(select ->option)。

大家一定非常熟悉,而且select 下拉列表还有(onchange)使用非常方便。为什么还要自己设计类似的菜单和列表框呢?

1. 如果js的下拉列表条目很多,可能会消耗较多的系统资源(至少在我的电脑上运行时,其它窗口会闪烁)。

2. 如果工具栏隐身,虽然苹果浏览器还保留下拉列表(其它浏览器连下拉列表也不见了),但好像选择无效。

3. 只能在自身的网页中编辑修改内容,动态更改好像很困难。

先看一下有点夸张的上拉列表:

图1.小说阅读器(图片版):因为是一张张的图片,网页可以更简单,只要如下几行:

<html>

<head>

<meta charset="gb2312">

<title>Javascript</title>

<link href="turnpage.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript" src="turn.min.js"></script>

<script type="text/javascript" src="turnpage.js"></script>

</head>

<body onload="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();

});

用滚动条选择你想阅读的章节,就翻到那里。

翻动效果如下:

苹果浏览器实战(三),布布扣,bubuko.com

时间: 2024-10-12 20:22:46

苹果浏览器实战(三)的相关文章

苹果浏览器应用实战(四)

上篇实例为图片浏览器是从小说阅读器直接将图片分页替换文本分页,还是双页显示.页面小阅读比较吃力,本篇拟改动几行代码,用全屏显示,看看效果如何. #pgnumber{position:fixed;font-size:12px;left:200px;height:25px;top:10px;width:200px;z-index:1;}  原top改成10px,也就是从页脚改到页眉,可以动态根据屏幕大小改动,为了简单,这里只做静态改动. 图片分页用以下代码,上篇的网页文件有(onload="getI

苹果浏览器应用实战篇(一)

前面介绍了苹果浏览器的友好界面及良好的兼容特性.如今能够进入实战阶段了. 老师教导:程序设计时不要去又一次发明明轮.也就是鼓舞我们採取拿来主义. 像js中的很多现成的应用.我们直接拿来用即可了.但也不尽然, 如:jquery为什么不用呢?特别是苹果浏览器良好的本地系统支持,不用考虑上传.下载. 存在硬盘上使用即放心又快捷(回答:放心使用). 那么苹果系统为什么不用falsh呢? 如今电脑速度快感觉区别不大,在过去,个人感觉载入有falsh的应用的程序能够先抽支烟等待(回答:能够不用尽量不用).

苹果浏览器(safari)应用实战(五)

自己动手打造windows版的ibook 前几篇我们很少涉及网页中"锚"标签,现在该<a>标签登场了.输入以下代码并保存为html文件(如:bookrack.html): <html> <head> <title></title> <meta charset="gb2312" /> <style type="text/css"> .page {position:a

苹果浏览器应用实战(二)

本篇介绍与菜单设计有关的工具条. 上篇介绍的菜单其实已经包含了工具条,只不过没有加背景看不出来. 加上背景以及加多一些实际功能后如下图 图1:浅灰色的就是工具条,苹果浏览器在全屏的时候,地址栏和工具条是隐藏的,鼠标到屏幕顶边才显示.自己设计的工具条也应该不需要时隐藏起来. 鼠标移到工具条在蓝色"大字体"上点一下,改变字体,菜单上蓝色"大字体" 自动变成"小字体,正文立刻也变成小字体.如图2 图2:工具条不见了,字体变小了.由于正文(小说)是分页显示,所以滚

Python机器学习实战&lt;三&gt;:k-邻近算法

安装说明参考openssl源码文件夹下INSTALL.W32 step1 环境搭建 安装perl,Visual Studio 2008 下载Openssl最新版源码.我下的版本为OpenSSL-1.0.0g. step2 启动Visual Studio 2008 Command Prompt 运行bin\vcvars32 设置 环境变量 注意: 如遇反馈"此处不应该有/Microsoft",参考错误1. step3 VS命令行窗口cd至openssl源码文件夹 执行以下命令 $perl

基于.net开发chrome核心浏览器【三】

原文:基于.net开发chrome核心浏览器[三] 本篇我们讲解怎么用CefGlue开发一个最简单的浏览器 一: CefGlue是建立在Cef项目之上的,Cef项目是C/C++的项目:CefGlue只不过是通过PInvoke来访问Cef项目生成的一些dll下面我们来看看Cef项目生成的一些dll和资源都是做什么用的打开这个目录\cef_binary_3.1453.1236_windows_xilium\Releaselibcef.dll-------------------------->Cef

苹果浏览器样式重置submit

大家刚接触写手机页面 或许都会遇到的 修复iPhone的safari浏览器上submit按钮圆角bug 修改前  修改后: 在CSS中加  -webkit-appearance: none; 便可以解决. 苹果浏览器样式重置submit

苹果浏览器Safari对JS函数库中newDate()函数中的参数的解析中不支持形如“2020-01-01”形式

苹果浏览器safari对new Date('1937-01-01')不支持,用.replace(/-/g, "/")函数替换掉中划线即可 如果不做处理,会报错:invalid date 本解决方案参考:http://stackoverflow.com/questions/4310953/invalid-date-in-safari

机器学习实战三(Naive Bayes)

机器学习实战三(Naive Bayes) 前两章的两种分类算法,是确定的分类器,但是有时会产生一些错误的分类结果,这时可以要求分类器给出一个最优的猜测结果,估计概率.朴素贝叶斯就是其中一种. 学过概率论的人对于贝叶斯这个名字应该是相当的熟悉,在学条件概率的时候,贝叶斯公式可谓是一针见血.这里的"朴素贝叶斯",是因为在计算贝叶斯概率的时候只考虑最原始.最简单的假设. Naive Bayes(朴素贝叶斯) 优点:在数据较少的情况下依然有效,可处理多类别问题. 缺点:对于输入数据的格式要求严