苹果浏览器应用实战(二)

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

上篇介绍的菜单事实上已经包括了工具条,仅仅只是没有加背景看不出来。

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

图1:浅灰色的就是工具条,苹果浏览器在全屏的时候,地址栏和工具条是隐藏的,鼠标到屏幕顶边才显示。自己设计的工具条也应该不须要时隐藏起来。

鼠标移到工具条在蓝色“大字体”上点一下,改变字体,菜单上蓝色“大字体” 自己主动变成“小字体,正文立马也变成小字体。如图2


图2:工具条不见了,字体变小了。因为正文(小说)是分页显示,所以滚动栏也不用了(保持屏幕整洁)。


图3:浏览器右上角点一下变换大小,小屏幕显示。点一下”參考译文“载入译文文件,正文中任一段落的參考译文跳出的小窗体显示。

y

工具条和菜单实现步骤例如以下:

首先在上篇<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="images/menuicon.gif">文件 ▼</ss><ss>章节 ▼</ss><ss>參考译文</ss>
  <input id="bt1" type="button"  value="刷新" />
  <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(); //显示正文的函数;
  });

是不是非常easy?



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

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