jquery & jquery Mobile 建國科技大學資管系饒瑞佶 2013/4 V1 2015/9 V2 2016/9 V3
目前網站 / 頁設計趨勢與難題 應付不同螢幕尺寸問題 自適應網站設計 RWD(Responsive Web Dseign) 技術 可以自己設計 RWD, 也可以用既有框架 支援 RWD 的框架技術很多, 包括 : jquery 與 jquery Mobile- 解決行動裝置版面多樣化與美工問題 BootStrap- 解決非美工咖問題
框架特色 這些框架多數都使用 JavaScript 語言 多數屬於前端工程 許多延伸框架應用到 Web App 開發上, 例如 PhoneGap 降低開發的門檻, 讓既有廣大的網頁開發人員也可以進入 App 開發領域
jquery & jquery Mobile 針對行動裝置做過優化的一組 Javascript 與 CSS 框架 jquery 強調控制處理標籤,jQuery Mobile 強調版面美化與控制 搭配 HTML5 IE10 以上 Chrome Firefox 等瀏覽器才支援 可用於開發 Web App 使用宣告式定義, 開發簡單
注意事項 大小寫有差 要先選擇處理對象 ( 網頁標籤 ) 接著 宣告怎麼表現處理對象或 結合 Javascript 撰寫需要的處理程序
開始前
HTML Hyper Text Markup Language(HTML) 定義與告訴瀏覽器怎麼顯示內容 ( 稱為 HTML 標籤 ) HTML 本身並非程式, 只不過是標示 (Markup) 強調及組織一般性的文字 需透過瀏覽器翻譯標記後方可呈現 目前最新版本為 5.0 除標準 HTML 標記外, 各瀏覽器廠商也自訂專屬的標記所以有些網頁在 IE 與 Chrome 上執行結果不同
HTML Tag( 標籤 ) 使用中括號來定義 標記應該有頭有尾, 中間夾住所要顯示的文字或圖形 <a href= http://www.ctu.edu.tw > 建國科技大學 </a> 每個標記都有已經定義好的意義 例如 <a> 定義超連結 純文字檔 ( 使用一般的文字編輯器就可以作業 ) 無大小寫之分 副檔名需要是.htm 或是.html 不同標籤的用法與定義, 請大家再自行研究
HTML 5 網頁架構 <!DOCTYPE HTML> <html> <head> <title> 網頁標題 </title> </head> <body> 一定要有這個宣告 HTML4 本來就有 </body> </html>
如何使用 jquery & jquery Mobile 建構在既有的 HTML5 架構上 加入 jquery & jquery Mobile 框架 ( 放入需要的 CSS 與 javascript 程式, 這些程式都以檔案方式存放 ) 可以使用文字編輯器從 0 開始寫起 這裡選用 Visual Studio.NET 這個工具來撰寫
VS 2015 ASP.NET + jquery/jquery Mobile 使用 NuGet 安裝需要的 jquery 與 jquery Mobile
啟動 NuGet
搜尋 jquery mobile
完成後, 看一下專案 css javascript
首先加入 CSS
其次加入 2 個 JS
jquery 架構 <!DOCTYPE html> jquery <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <link href="content/jquery.mobile-1.4.5.min.css" rel="stylesheet" /> <script src="scripts/jquery-1.8.0.min.js"></script> <script src="scripts/jquery.mobile-1.4.5.min.js"></script> <script> $(document).ready(function () { // 在這寫你的程式 }); </script> </head> <body> </body> </html> 當整個 DOM 載入完成後才執行
加入內容 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <link href="content/jquery.mobile-1.4.5.min.css" rel="stylesheet" /> <script src="scripts/jquery-1.8.0.min.js"></script> <script src="scripts/jquery.mobile-1.4.5.min.js"></script> <script> $(document).ready(function () { // 在這寫你的程式 }); </script> </head> <body> <ul> <li> 台灣 </li> <li> 日本 </li> <li> 美國 </li> </ul> </body> </html>
透過 jquery 加入 javascript <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <link href="content/jquery.mobile-1.4.5.min.css" rel="stylesheet" /> <script src="scripts/jquery-1.8.0.min.js"></script> <script src="scripts/jquery.mobile-1.4.5.min.js"></script> <script> $(document).ready(function () { // 在這寫你的程式 $('li').click(function () { $(this).css('background-color','red'); }); }); </script> </head> <body> <ul> <li> 台灣 </li> <li> 日本 </li> <li> 美國 </li> </ul> </body> </html> 點選後原來的顏色要去除! $('li').css('background-color', '');
看看發生了什麼事?
jquery 的動作 強調控制處理標籤 1. 選定要處理的標籤 2. 針對選定的標籤設定處理動作 ( 事件 ) 3. 在動作內撰寫需要處理的內容, 例如改變底色
jquery 選定要處理的標籤
jquery 選擇 HTML 標籤方式 $( p ) : 選擇 <p> 標籤, 其他以此類推 $( p.intro ) : 選擇所有 class= intro 的 <p> 標籤 $( p#demo ) : 選擇 id= demo 的第一个 <p> 標籤
jquery 屬性選擇方式 $( [href] ) : 選擇所有具有 href 屬性的標籤 $( [href= # ] ) : 選擇所有具有 href 值等於 # 的標籤 $( [href!= # ] ) : 選擇所有具有 href 值不等於 "#" 的標籤 $( [href$=.jpg ] ) : 選擇所有 href 值以 ".jpg" 结尾的標籤
其他 $(this): 目前 HTML 標籤 $( p ): 所有 <p> 標籤 $( p.intro ): 所有 class="intro" 的 <p> 標籤 $(.intro ): 所有 class="intro" 的標籤 $( #intro ):id="intro" 的第一个標籤 $( ul li:first ): 每个 <ul> 的第一个 <li> 標籤 $( [href$=.jpg ] ): 選擇所有 href 值以 ".jpg" 结尾的標籤 $( div#intro.head ):id="intro" 的 <div> 元素中的所有 class="head" 的標籤
針對選定的標籤 設定處理動作 ( 事件 )
提示! 使用 $( 標簽名 ) 選擇處理對象 透過 bind() 讓標籤結合 Javascript $( 標簽名 ).bind( 事件,function(){ }); $( 標簽名 ). 事件 (function(){ }); 事件可以有 click change keyup keydown focus blur(lost focus) 等 透過 unbind() 讓標籤脫離 Javascript 控制
再做個例子 加入一段內容 <select> <option value="1"> 台灣 </option> <option value="2"> 日本 </option> <option value="3"> 美國 </option> </select>
透過 jquery 控制 select 標籤 $('select').change(function () { alert(' 您選擇了 ' + $(this).val()); });
行動網頁框架 jquery Mobile 強調版面美化與控制
需要的東西 jquery Library( 基礎 ) jquery.js jquery Mobile Library jquerymobile.css jquerymobile.js 前面已經透過 NuGet 加入
jquery Mobile 框架 利用 <div> 標籤, 透過屬性宣告定義版面與內容
為了行動裝置加入 Viewport 表示這頁可以給行動裝置讀寬度用手機現有寬度預設的縮放大小是原大小 <title></title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link href="content/jquery.mobile-1.4.5.min.css" rel="stylesheet" /> <script src="scripts/jquery-1.8.0.min.js"></script> <script src="scripts/jquery.mobile-1.4.5.min.js"></script>
jquery Mobile 頁面組成架構 <head> <body> HTML5 網頁 <div data-role=page> <div data-role=header> <div data-role=content> jquery 控制的部份在 div 上直接給定義其他都是 html 語法 <div data-role=footer> </body>
jquery Mobile 頁面基本架構 <div data-role="page"> <div data-role="header"> </div> <div data-role="content"> </div> <div data-role="footer"> </div> </div>
加上 HTML 標籤與內容後 <div data-role="page"> <div data-role="header"> <h1> 這裡是標題 </h1> </div> <div data-role="content"> <ul> <li> 台灣 </li> <li> 日本 </li> <li> 美國 </li> </ul> <select> <option value="1"> 台灣 </option> <option value="2"> 日本 </option> <option value="3"> 美國 </option> </select> </div> <div data-role="footer"> <h1> 這裡是頁尾 </h1> </div> </div>
顯示資料列表 用 ul 或 ol 都可以 加上 data-role="listview" <div data-role="content"> 多加入這個 <ul data-role="listview"> <li> 台灣 </li> <li> 日本 </li> <li> 美國 </li> </ul> <select> <option value="1"> 台灣 </option> <option value="2"> 日本 </option> <option value="3"> 美國 </option> </select> </div> 瞬間變身
加上 a, 自動就會有向右箭頭 <div data-role="content"> <ul data-role="listview"> <li><a> 台灣 </a></li> <li> 日本 </li> <li> 美國 </li> </ul> <select> <option value="1"> 台灣 </option> <option value="2"> 日本 </option> <option value="3"> 美國 </option> </select> </div>