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


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

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

    像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"网页文件(在本地磁盘的小说文件)。

    执行情况例如以下图:






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

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




  • 相关阅读:
    [LeetCode]130 Surrounded Regions(DFS)
    [LeetCode]233 Number of Digit One(数位DP)
    POJ 3225.Help with Intervals-线段树(成段替换、区间异或、简单hash)
    POJ 2528.Mayor's posters-线段树(成段替换、离散数据、简单hash)
    POJ 3468.A Simple Problem with Integers-线段树(成段增减、区间查询求和)
    HDU 1698.Just a Hook-线段树(成段替换、输出总和tree[1])
    POJ 2886.Who Gets the Most Candies? -线段树(单点更新、类约瑟夫问题)
    计蒜客 28437.Big brother said the calculation-线段树+二分-当前第k个位置的数 ( ACM训练联盟周赛 M)
    HDU 5649.DZY Loves Sorting-线段树+二分-当前第k个位置的数
    计蒜客 28449.算个欧拉函数给大家助助兴-大数的因子个数 (HDU5649.DZY Loves Sorting) ( ACM训练联盟周赛 G)
  • 原文地址:https://www.cnblogs.com/lcchuguo/p/5257438.html
Copyright © 2020-2023  润新知