码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2014-05-18 09:33:23      阅读:284      评论:0      收藏:0      [点我收藏+]

标签:浏览器   javascript   应用程序   苹果   

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

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

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

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

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

bubuko.com,布布扣

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

bubuko.com,布布扣

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

bubuko.com,布布扣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(); //显示正文的函数;
  });

是不是很简单?



苹果浏览器应用实战(二),布布扣,bubuko.com

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

标签:浏览器   javascript   应用程序   苹果   

原文地址:http://blog.csdn.net/wwjianlao/article/details/26027859

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!