zoukankan      html  css  js  c++  java
  • 苹果浏览器实战(三)

    上两篇介绍菜单、工具栏以及实际使用的功能实现。事实上已经违背老师教导(自己去发明明轮)。

    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 client 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();
    });

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



    翻动效果例如以下:






  • 相关阅读:
    去掉移动端页面 input, textarea, button, a 标签获取焦点时显示的黑影
    屏蔽敏感词的正则表达式
    flex弹性布局详解
    解决微信小程序手机请求数据不返回的问题
    基于Express框架开发接口
    window平台下MongoDB安装和环境搭建
    搭建基于Express框架运行环境
    详解闭包(推荐)
    解决浏览器兼容ES6特性
    ES6之promise的使用
  • 原文地址:https://www.cnblogs.com/jzssuanfa/p/6888877.html
Copyright © 2011-2022 走看看