首頁 > 開發者 > 手機程式開發

蘋果瀏覽器應用實戰（二）

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：瀏覽器   javascript   應用程式   蘋果   

本篇介紹與菜單設計有關的工具條。

上篇介紹的菜單其實已經包含了工具條，只不過沒有加背景看不出來。

加上背景以及加多一些實際功能後如

圖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(); //顯示本文的函數；
  });

是不是很簡單？



本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關文章
（十）——WebApp
win10提示“無法設定行動熱點 請開啟WLAN”的解決方案
c#通過app.manifest使程式以管理員身份運行
解決Android 6.0擷取wifi Mac地址為02:00:00:00:00:00問題【轉】
Android TextView加底線的幾種方式
《Android應用效能最佳化》 第8章 圖形

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More