天天看点

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

前面介绍了苹果浏览器的友好界面及良好的兼容特性。现在可以进入实战阶段了。

老师教导:程序设计时不要去重新发明明轮。也就是鼓励我们采取拿来主义。像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;width:800px;}

  .mmenu {position:fixed;top:20px;left:10px;width: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();

    },

      $("#menu1").hide();

    });

  $("#menu2").hover(

      $("#menu2").show();

      $("#menu2").hide();

  $("#menu3").hover(

      $("#menu3").show();

      $("#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();

$("#menu2").show();

  $("#menu2 li").show();

$("#ssmenu ss:eq(2)").live("hover",function(){

$("#menu1").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>

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

运行情况如下图:

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

附带说明:中英文小说共享同一阅读器。自动分页、自动生成章节索引、模拟翻书效果。

继续阅读