苹果浏览器应用实战（二）

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

本篇介绍与菜单设计有关的工具条。

上篇介绍的菜单其实已经包含了工具条，只不过没有加背景看不出来。

加上背景以及加多一些实际功能后如下图

图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>

菜单和工具条大致就如图显示的那个样子。

功能实现过程：

$("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(); //显示正文的函数；
});

是不是很简单？

苹果浏览器应用实战（二）,,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

苹果浏览器应用实战（二）