苹果浏览器应用实战篇（一）

浏览数：14 / 时间：2015年06月11日

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

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