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


    前面介绍了苹果浏览器的友好界面及良好的兼容特性。如今能够进入实战阶段了。

    老师教导:程序设计时不要去又一次发明明轮。也就是鼓舞我们採取拿来主义。

    像js中的很多现成的应用。我们直接拿来用即可了。但也不尽然,

    如:jquery为什么不用呢?特别是苹果浏览器良好的本地系统支持,不用考虑上传、下载。

    存在硬盘上使用即放心又快捷(回答:放心使用)。

    那么苹果系统为什么不用falsh呢? 如今电脑速度快感觉区别不大,在过去,个人感觉载入有falsh的应用的程序能够先抽支烟等待(回答:能够不用尽量不用)。

    假设有好的工具或平台。程序设计能够即简单又轻松。实战第一篇就从菜单设计開始:

    图1:


    图1是苹果浏览器界面:简单的地址栏加上工具条。把大部分的空间留给用户去发挥。

    不知道大家注意到了没有,工具条更像是一行文本而不是菜单。那么,我们就用一行文本来设计一组菜单:

    首先在<body>開始输入<ss>菜单设计一</ss><ss>菜单设计二</ss><ss>菜单设计三</ss>

    说明括号内为标记,尽量不和js的标签同名。为了方便这里用ss。也能够这样<caidan>,但要记得像标签一样用</ss></caidan>结束。

    然后给标签标记显示属性(颜色、鼠标形状等)。三组菜单就完毕了,如图蓝色文本。接下来安排下拉框和菜单内容。

    下面是源程序:

    <html>
    <head>
    <meta charset="gb2312">
    <style>
      #ssmenu {position:fixed;top:0px;left:10px;height:20px;800px;}
      .mmenu {position:fixed;top:20px;left:10px;auto ;height:auto;display:none;
      border:1px solid #ccc;overflow-y:auto;background:#ffc;z-index:1;}
      .mmenu li{list-style:none;display:none;cursor:pointer;}
      .mmenu li:hover{background:pink;}
        ss {font-size:14px;padding-left:10px;padding-right:10px;color:blue;font-size:12px;}
      ss:hover{color:brown;background:#acc;padding-top:3px;padding-bottom:3px;}
    </style>


    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
     
    $(document).ready(function(){
      var mnu1=document.getElementById("menu1");
      var mStr="<li>janaic.html</li><li>rebecca.html</li><li>deceptpoint.html</li>
        <hr><li>abcdefghijk</li><li>abcdefghijk</li>";  
      mnu1.style.left="10px";
      mnu1.innerHTML=mStr+"<hr>";
      var mnu2=document.getElementById("menu2");
      mnu2.style.left="110px";
      mnu2.innerHTML=mStr+"<hr><hr>";
      var mnu3=document.getElementById("menu3");
      mnu3.style.left="210px";
      mnu3.innerHTML=mStr+"<hr><hr><hr>";
    });


    $(function(){  
      $("#menu1").hover(
        function(){
          $("#menu1").show();
        },
        function(){
          $("#menu1").hide();
        });
      $("#menu2").hover(
        function(){
          $("#menu2").show();
        },
        function(){
          $("#menu2").hide();
        });
      $("#menu3").hover(
        function(){
          $("#menu3").show();
        },
        function(){
          $("#menu3").hide();
      });
    });  


    $("#ssmenu ss:eq(0)").live("hover",function(){
      $("#menu2").hide();
      $("#menu3").hide();
    $("#menu1").show();
      $("#menu1 li").show();
    });
    $("#ssmenu ss:eq(1)").live("hover",function(){
      $("#menu1").hide();
      $("#menu3").hide();

    $("#menu2").show();
      $("#menu2 li").show();
    });
    $("#ssmenu ss:eq(2)").live("hover",function(){
    $("#menu1").hide();
      $("#menu2").hide();
      $("#menu3").show();
      $("#menu3 li").show();
    });
      
    $('#menu1 li').live("click",function(e) {
      e.preventDefault();
      var fname=$(this).text();
      location.assign(fname);
      $("#chaptMenu").hide();
    });


    </script>
    </head>


    <body>
    <div id="menu1" class="mmenu"></div>
    <div id="menu2" class="mmenu"></div>
    <div id="menu3" class="mmenu"></div>
    <div id=ssmenu>
    <ss>菜单设计一▼</ss><ss>菜单设计二▼</ss><ss>菜单设计三▼</ss>
    </div>
    </body>
    </html>

    把程序中菜单文本换成就变成带图标的菜单了:

    <ss><img src="images/menuicon.gif">  菜单设计一</ss>
    <ss><img src="images/menuicon.gif">  菜单设计二</ss>
    <ss><img src="images/menuicon.gif">  菜单设计三</ss>


    如图单击手型鼠标执行”deceptpoint.html"网页文件(在本地磁盘的小说文件)。

    执行情况例如以下图:






    附带说明:中英文小说共享同一阅读器。

    自己主动分页、自己主动生成章节索引、模拟翻书效果。




  • 相关阅读:
    Codeforces Round #680 (Div. 2, based on Moscow Team Olympiad)(A->C(质因子分解))
    Acwing 143. 最大异或对(字典树+贪心)
    字典树学习笔记(板子)
    关于位运算(>>,<<,|,&,^)的笔记总结
    第 45 届国际大学生程序设计竞赛(ICPC)亚洲网上区域赛模拟赛 A.Easy Equation(差分数组)(a+b+c=d的种数)
    A
    Educational Codeforces Round 97 (Rated for Div. 2)B. Reverse Binary Strings(反转子串)
    Educational Codeforces Round 97 (Rated for Div. 2) A. Marketing Scheme
    UI测试 常用检查点
    负载测试、压力测试
  • 原文地址:https://www.cnblogs.com/lcchuguo/p/5257438.html
Copyright © 2020-2023  润新知