Night Wind's: jQuery Mobile

顯示具有 jQuery Mobile 標籤的文章。顯示所有文章

顯示具有 jQuery Mobile 標籤的文章。顯示所有文章

漢堡選單

4/02/2018Coding_Web, jQuery Mobile

這是六角學院老師提供的範例。主要功能為PC頁面時顯示右上方選單，Mobile頁面時隱藏起來，直至點選menu才會在下面列出選單來。

詳細講解請訂閱六角學院的教材，以下只放畫面和原始碼：

PC版面：

Mobile版面：

HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="css/all.css">
  <script src="js/jquery-3.1.1.min.js"></script>
  <script src="js/all.js"></script>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
  <div class="wrap">
    <div class="header">
      <div class="logo"></div>
      <ul class="menu">
          <li><a href="#">選單一</a></li>
          <li><a href="#">選單二</a></li>
          <li><a href="#">選單三</a></li>
          <li><a href="#">選單四</a></li>
          <li><a href="#">選單五</a></li>
          <li><a href="#" target="_blank">選單六</a></li>
          <li><a href="#">選單七</a></li>
      </ul>
      <a href="#" class="showmenu">menu</a>
    </div>
    <div class="content">
    <p>
      其際出後心術者，風高動；自觀民發富面大年了夜使開懷布，福大會士是全：軍傷子頭新：已起職別客晚方好沒感她是預學。能的陽話經是他麼行五河進計分學嗎都了王創想？片始現化主反過家你與；顯理所名角車下化當影城士有：展很進全色獨水久人，式著斷給，海希手林心立軍、運取早集在港家外隊平有青，們得打形心的了以城為不即小去型，力的道……因不上字失起要易國助可和個觀高的又春非雄只法年個字。有是只我上都道化體、旅黨小綠天洲領般，一任標綠來起，制試安一國……視對與喜名度說，你的不這修配輕！
      
    </p>
     <p>
一笑馬臺動，一越曾間持青排的爭為但道性。住出子。了這等呢組羅我；更記好。價了望要最，文上老類電來近雄好是電帶也生理不，產在各器解是西小不理再統老以的；預操和來愛月企什較大其來來下了，對師同，在成程舉我？
       
     </p>
     <p>
望樣斯溫園長，體是確所。在白管，快樹員義油方係係？操那中還一。期之加個然少去說身會草，跑比向女孩情業王多，向以不音人不個向，想加山轉時：師小級觀？發過這重同書，跟試場消麼裡外什所影在名就檢特藥去表談同電聞期不題之。
       
     </p> 
    </div>
  </div>
</body>
</html>

css code:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
body{
  background: #0F222B;
  color: #69CA62;
}
a{
  color: #69CA62;
  text-decoration: none;
}
.wrap{
  max-width: 960px;
  margin: 0 auto;
}
.header{
  height: 80px;
  border-bottom: 1px solid #69CA62;
  position: relative;
}
.logo{
  float: left;
  width: 50px;
  height: 50px;
  background: #69CA62;
  border: 3px solid green;
}
.menu{
  float: right;
}
.menu li{
  float: left;
}
.menu li a{
  display: block;
  color: #69CA62;
  padding: 1em;
  text-decoration: none;
}
.content{
  padding: 1em;
  line-height: 1.8;
}
.content p{
  margin-bottom: 1em;
}
/*在PC上隱藏漢堡選單*/
.showmenu{
  display: none;
}
@media (max-width: 767px){
  .menu {
    /*隱藏選單開始*/
    max-height: 0px;
    overflow: hidden;
    /*隱藏選單結束*/
    transition: max-height 2.3s;
    margin-top: 1px;
    /*絕對定位疊在網頁上*/
    position: absolute;
    z-index: 100;
    /*header 80px+1px boder 線條*/
    top: 81px;
    left: 0;
    right: 0;
    background: #0F222B;
  }
  .menu li{
    float: none;
    border-bottom: 1px dashed #69CA62;
  }
  .menu li a{
    transition: all 0.3s;
  }
  .menu li a:hover{
    background: #69CA62;
    color: #fff;
  }
  .showmenu{
    display: block;
    float: right;
    margin: 1em;
  }
  /*jQ點擊後動態在 body 加上 class */
  .menu-show .menu{
    max-height: 500px
  }
}

js code:

$(document).ready(function() {
   $('.showmenu').on('click',  function(e){
      e.preventDefault();
      $('body').toggleClass('menu-show');
  });
});

網頁阻止IE相容性檢視語法

11/04/2014Coding_Web, jQuery Mobile

之前發現自己寫的 jQuery Mobile 網頁在 IE 上會異常。追半天才發現是網站被加入相容性檢視，強制以 IE6 的結果自然是無法呈現 jQuery Mobile 語法了。

解決的方法是在 <head> </head> 中加入這一行程式碼：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

意即使用 IE 來到此網頁時，需以實際的版本或 Chrome 檢視。

其餘相關語法，例如強制相容 IE6 ，請參考：【HTML教學】X-UA-Compatible設置IE兼容模式

Ajax-Loader 測試

7/15/2014jQuery Mobile

在做 jQuery Mobile 時，可能會碰到 mobileinit 事件。以下是模擬 A網頁前往 B網頁，可在B網頁加上載入三秒鐘的資料，藉以得知loading的狀態或圖示。

<script runat="server">
 
  protected void Page_Load(object sender, EventArgs e)
  {
    System.Threading.Thread.Sleep(3000);
  }

</script>

勾選我同意後，出現「下一步」按鈕，可指往第二頁。

7/12/2014jQuery Mobile

當點選我同意時，顯示「下一步」。按「下一步」時導到第二頁。

<!DOCTYPE html>
<html>
<head>
 <title>Agree check</title>
 
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
 <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
 
 <script type="text/javascript">
  $(document).on("change", "#checkbox-agree", function () {
      if ($(this).prop("checked")) {
          $("#NextPage").button("enable");
      } else {
          $("#NextPage").button("disable");
      }
  });
 </script>
</head>
 
<body>
 
<div data-role="page" id="Page1">
 <div data-role="fieldcontain">
     <fieldset data-role="controlgroup" style="width:150px">
      <input type="checkbox" name="checkbox-agree" id="checkbox-agree" class="custom" />
      <label for="checkbox-agree">我同意</label>
     </fieldset>
     <input type="button" id="NextPage" data-inline="true" onclick="javascript:location.href='#Page2'"  value="下一步" disabled/>
 </div>
</div>
 
<div data-role="page" id="Page2">
 This is Page2.
</div>
 
</body>
</html>

jQuery Mobile 按下載鈕後連結檔案失敗

8/30/2013jQuery Mobile

使用 jQuery Mobile設計下載檔案鈕，實作後點該連結卻出現undefined。

後來發現只要加 data-ajax="false" 就正常了。參考網頁：Downloadable files using jQuery mobile

<a href="http://nws.tw/file.zip" data-ajax="false" data-role="button" data-theme="c">File.zip</a>