jQuery

Size: px

Start display at page:

Download "jQuery"

琬经
7 years ago
Views:

1 jquery & jquery Mobile 建國科技大學資管系饒瑞佶 2013/4 V1 2015/9 V2 2016/9 V3

2 目前網站 / 頁設計趨勢與難題應付不同螢幕尺寸問題自適應網站設計 RWD(Responsive Web Dseign) 技術可以自己設計 RWD, 也可以用既有框架支援 RWD 的框架技術很多, 包括 : jquery 與 jquery Mobile- 解決行動裝置版面多樣化與美工問題 BootStrap- 解決非美工咖問題

3 框架特色這些框架多數都使用 JavaScript 語言多數屬於前端工程許多延伸框架應用到 Web App 開發上, 例如 PhoneGap 降低開發的門檻, 讓既有廣大的網頁開發人員也可以進入 App 開發領域

4 jquery & jquery Mobile 針對行動裝置做過優化的一組 Javascript 與 CSS 框架 jquery 強調控制處理標籤,jQuery Mobile 強調版面美化與控制搭配 HTML5 IE10 以上 Chrome Firefox 等瀏覽器才支援可用於開發 Web App 使用宣告式定義, 開發簡單

5 注意事項大小寫有差要先選擇處理對象 ( 網頁標籤 ) 接著宣告怎麼表現處理對象或結合 Javascript 撰寫需要的處理程序

6 開始前

7 HTML Hyper Text Markup Language(HTML) 定義與告訴瀏覽器怎麼顯示內容 ( 稱為 HTML 標籤 ) HTML 本身並非程式, 只不過是標示 (Markup) 強調及組織一般性的文字需透過瀏覽器翻譯標記後方可呈現目前最新版本為 5.0 除標準 HTML 標記外, 各瀏覽器廠商也自訂專屬的標記所以有些網頁在 IE 與 Chrome 上執行結果不同

8 HTML Tag( 標籤 ) 使用中括號來定義標記應該有頭有尾, 中間夾住所要顯示的文字或圖形 <a href= > 建國科技大學 </a> 每個標記都有已經定義好的意義例如 <a> 定義超連結純文字檔 ( 使用一般的文字編輯器就可以作業 ) 無大小寫之分副檔名需要是.htm 或是.html 不同標籤的用法與定義, 請大家再自行研究

9 HTML 5 網頁架構 <!DOCTYPE HTML> <html> <head> <title> 網頁標題 </title> </head> <body> 一定要有這個宣告 HTML4 本來就有 </body> </html>

10 如何使用 jquery & jquery Mobile 建構在既有的 HTML5 架構上加入 jquery & jquery Mobile 框架 ( 放入需要的 CSS 與 javascript 程式, 這些程式都以檔案方式存放 ) 可以使用文字編輯器從 0 開始寫起這裡選用 Visual Studio.NET 這個工具來撰寫

11 VS 2015 ASP.NET + jquery/jquery Mobile 使用 NuGet 安裝需要的 jquery 與 jquery Mobile

12 啟動 NuGet

13 搜尋 jquery mobile

14 完成後, 看一下專案 css javascript

15 首先加入 CSS

16 其次加入 2 個 JS

17 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 min.css" rel="stylesheet" /> <script src="scripts/jquery min.js"></script> <script src="scripts/jquery.mobile 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.

18 加入內容 <!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 min.css" rel="stylesheet" /> <script src="scripts/jquery min.js"></script> <script src="scripts/jquery.mobile 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.

19 透過 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 min.css" rel="stylesheet" /> <script src="scripts/jquery min.js"></script> <script src="scripts/jquery.mobile 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', '');

20 看看發生了什麼事?

21 jquery 的動作強調控制處理標籤 1. 選定要處理的標籤 2. 針對選定的標籤設定處理動作 ( 事件 ) 3. 在動作內撰寫需要處理的內容, 例如改變底色

22 jquery 選定要處理的標籤

23 jquery 選擇 HTML 標籤方式 $( p ) : 選擇 <p> 標籤, 其他以此類推 $( p.intro ) : 選擇所有 class= intro 的 <p> 標籤 $( p#demo ) : 選擇 id= demo 的第一个 <p> 標籤

24 jquery 屬性選擇方式 $( [href] ) : 選擇所有具有 href 屬性的標籤 $( [href= # ] ) : 選擇所有具有 href 值等於 # 的標籤 $( [href!= # ] ) : 選擇所有具有 href 值不等於 "#" 的標籤 $( [href$=.jpg ] ) : 選擇所有 href 值以 ".jpg" 结尾的標籤

25 其他 $(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" 的標籤

26 針對選定的標籤設定處理動作 ( 事件 )

27 提示! 使用 $( 標簽名 ) 選擇處理對象透過 bind() 讓標籤結合 Javascript $( 標簽名 ).bind( 事件,function(){ }); $( 標簽名 ). 事件 (function(){ }); 事件可以有 click change keyup keydown focus blur(lost focus) 等透過 unbind() 讓標籤脫離 Javascript 控制

28 再做個例子加入一段內容 <select> <option value="1"> 台灣 </option> <option value="2"> 日本 </option> <option value="3"> 美國 </option> </select>

29 透過 jquery 控制 select 標籤 $('select').change(function () { alert(' 您選擇了 ' + $(this).val()); });

30 行動網頁框架 jquery Mobile 強調版面美化與控制

31 需要的東西 jquery Library( 基礎 ) jquery.js jquery Mobile Library jquerymobile.css jquerymobile.js 前面已經透過 NuGet 加入

32 jquery Mobile 框架利用 <div> 標籤, 透過屬性宣告定義版面與內容

33 為了行動裝置加入 Viewport 表示這頁可以給行動裝置讀寬度用手機現有寬度預設的縮放大小是原大小 <title></title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link href="content/jquery.mobile min.css" rel="stylesheet" /> <script src="scripts/jquery min.js"></script> <script src="scripts/jquery.mobile min.js"></script>

34 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>

35 jquery Mobile 頁面基本架構 <div data-role="page"> <div data-role="header"> </div> <div data-role="content"> </div> <div data-role="footer"> </div> </div>

36 加上 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>

37 顯示資料列表用 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> 瞬間變身

38 加上 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>

關於本書 l 3 PhoneGap Appcelerator Titanium Sencha Touch (wrapper framework) Native App PhoneGap Build Native App Hybrid App Java Objective-C Android SDK

關於本書 l 3 PhoneGap Appcelerator Titanium Sencha Touch (wrapper framework) Native App PhoneGap Build Native App Hybrid App Java Objective-C Android SDK 2 l 跨裝置網頁設計 Android ios Windows 8 BlackBerry OS Android HTML 5 HTML 5 HTML 4.01 HTML 5 CSS 3 CSS 3 CSS 2.01 CSS 3 2D/3D PC JavaScript