首页 > 代码库 > 苹果浏览器应用实战（二）
苹果浏览器应用实战（二）
本篇介绍与菜单设计有关的工具条。
上篇介绍的菜单其实已经包含了工具条，只不过没有加背景看不出来。
加上背景以及加多一些实际功能后如下图
图1：浅灰色的就是工具条，苹果浏览器在全屏的时候，地址栏和工具条是隐藏的，鼠标到屏幕顶边才显示。自己设计的工具条也应该不需要时隐藏起来。
鼠标移到工具条在蓝色“大字体”上点一下，改变字体，菜单上蓝色“大字体” 自动变成“小字体，正文立刻也变成小字体。如图2
图2：工具条不见了，字体变小了。由于正文（小说）是分页显示，所以滚动条也不用了（保持屏幕整洁）。
图3：浏览器右上角点一下变换大小，小屏幕显示。点一下”参考译文“加载译文文件，正文中任一段落的参考译文跳出的小窗口显示。
工具条和菜单实现过程如下：
首先在上篇<style></style>之间加一些内容：
.playmd{ font-size:14px;height:25px;width:1024px;position:fixed; left:0px; top:0px;background:#ddd;z-index:1;}
然后在<body>后加上：
<div class="playmd" id="playmd">
<ss><img src=http://www.mamicode.com/"images/menuicon.gif">文件 ▼
<input id="bt1" type="button" value=http://www.mamicode.com/"刷新" />
<ss>中字体</ss><select id="fnt" size=1 onChange="getStyle()" >
</div>
菜单和工具条大致就如图显示的那个样子。
功能实现过程：
$("ss:eq(1)").live("click",function(){ //ss:eq(1) 表示ss菜单（蓝色字体）从左到右0开始数。如eq（1）是”章节“菜单名。
checkPage();
$("#chaptMenu").show();
$("#chaptMenu li").show();
});
$("ss:eq(2)").live("click",function(){
ileft.location=chineseF;
});
$("ss:eq(3)").live("click",function(){
if ($("ss:eq(3)").text()=="中字体"){
getElement("div1").style.fontSize="19px";
getElement("div2").style.fontSize="19px";
$("ss:eq(3)").text("大字体");
}
else if ($("ss:eq(3)").text()=="大字体"){
getElement("div1").style.fontSize="14px";
getElement("div2").style.fontSize="14px";
$("ss:eq(3)").text("小字体");
}
else if ($("ss:eq(3)").text()=="小字体"){
getElement("div1").style.fontSize="17px";
getElement("div2").style.fontSize="17px";
$("ss:eq(3)").text("中字体");
}
});
工具栏隐藏实现：
$("body").mousemove(function(e){ //大概意思是：如果鼠标小于多少（快到工具条位置）时就显示。
var positionY=e.pageY,positionX=e.pageX;
if (positionY <50) {
$(".playmd").show();
}
else {
$(".playmd").hide();
}
});
大小窗口变换实现过程：
$(window).resize(function(){
initialize(); //根据变化的数据初始化函数（需要编写，也就是几行代码）
showPage(); //显示正文的函数；
});
是不是很简单？