jQuery mobile 之三
生活随笔
收集整理的這篇文章主要介紹了
jQuery mobile 之三
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
貼上一段代碼，jQuery mobile的事件問題；jQuery提供了一些特殊的事件來供我們處理我們要的效果
jQuery Mobile使用指南 簡介：jQuery Mobile框架可以輕松的幫助我們實現非常好看的、可跨設備的Web應用程序。我們將后續的介紹中向大家介紹大量的代碼及實例。 jQuery一直以來都是非常流行的富客戶端及Web應用程序開發中使用的JavaScript類庫,然而一直以來它都是為桌面瀏覽器設計的，沒有特別為移動應用程序設計。 jQuery Mobile是一個新的項目用來添補在移動設備應用上的缺憾。它是基本jQuery框架并提供了一定范圍的用戶接口和特性，以便于開發人員在移動應用上使用。使用該框架可以節省大量的js代碼開發時間，盡管目前的版本還是不是一個穩定的版本。但它的應用效果已經備受矚目。 接下來我們將通過實例向大家展示jQuery Mobile的特性及好處，讓我們看一下這個新框架是怎么幫助你在短時間內建立起一個高質量的移動應用程序,接下來的代碼講解中的代碼最好使用的移動設備平臺是IPhone或Android。或者是PC電腦上使用 Safari瀏覽器調試。 Go on! jQuery Msobile 都能做什么? ? jQuery Mobile為開發移動應用程序提代了非常簡單的用戶接口 ? 這種接口的配置是標簽驅動的，這意味著我們可以在HTML中建立大量的程序接口而不不需要寫一行js代碼 ? 提供了一些自定義的事件用來探測移動和觸摸動作。例如tap(敲擊)、tap-and-hold（點擊并按住）、swipe、orientation change ? 使用一些加強的功能時需要參照一下設備瀏覽器支持列表 ? 使用預設主題可以輕松定制應用程序外觀 jQuery Mobile 基本頁面結構 大部分jQuery Mobile Web應用程序都要遵循下面的基本模板 <!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /><script src="http://code.jquery.com/jquery-1.4.3.min.js"></script><script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> </head> <body> <div data-role="page"><div data-role="header"><h1>Page Title</h1></div><div data-role="content"> <p>Page content goes here.</p> </div><div data-role="footer"><h4>Page Footer</h4></div> </div></body> </html> 要使用 jQuery Mobile，首先需要在開發的界面中包含如下3個內容 ? CSS文件jquery.mobile-1.0a1.min.css ? jQuery library jquery-1.4.3.min.js ? jQuery Mobile library jquery.mobile-1.0a1.min.js 在上面的頁面基本模板中，引入這三個元素采用的是jQuery CDN方式，開發人員也可以下載這些文件及主題到你的服務器上。 我們可以看到頁面中的內容都是包裝在div標簽中并在標簽中加入data-role=”page”屬性。 這樣jQuery Mobile就會知道哪些內容需要處理。說明：data-屬性是HTML5新推出的很有趣的一個特性，它可以讓開發人員添加任意屬性到html標簽中,只要添加的屬性名有“data-”前綴。 在”page”div中，還可以包含”header”， ”content”， ”footer”的div元素,這些元素都是可選的，但至少要包含一個 “content”div。 <div dat-role=”header”></div> 在頁面的頂部建立導航工具欄，用于放置標題和按鈕（典型的至少要放一個“返回”按鈕，用于返回前一頁）。通過添加額外的屬性 data-position=”fixed”，可以保證頭部始終保持屏幕的頂部 <div dat-role=”content”></div> 包含一些主要內容，例如文本內容，圖像，按鈕，列表，表單等等 <div dat-role=”footer”></div> 在頁面的底建立工具欄，添加一些功能按鈕 為了確保它始終保持在頁面的底部，可以給其加上data-position=”fixed” 屬性多個頁面在同一個頁面中有一種建立在一個 HTML頁面基礎之上的頁面結構，即在一個頁面中添加多個data-role=”page”。這意味著瀏覽器僅僅得到一個頁面，就可以實現頁面平滑切換的客戶體驗。參看下面實例：(目前有bug) <!DOCTYPE html> <html> <head> <title>jQuery Mobile: Pages within Pages</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /><script src="http://code.jquery.com/jquery-1.4.3.min.js"></script><script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> </head> <body> <div data-role="page" id="home"><div data-role="header"><h1>Home</h1></div><div data-role="content"> <p><a href="#about">About this app</a></p> </div></div><div data-role="page" id="about"><div data-role="header"><h1>About This App</h1></div><div data-role="content"> <p>This app rocks! <a href="#home">Go home</a></p> </div></div></body> </html> 正如所見，上面的代碼中包含了兩個”page”:主頁（id為home）和”about”(id為about)。從Home鏈接到About頁面采用的是連接地址為#about，about頁面返回到首頁的鏈接地址為#home。jQuery Mobile會自動切換鏈接的目的div顯示到移動瀏覽器中。該框架會隱藏除第一個包含data-role=”page”div以外的其它”page” AJAX 導航 為了實現在移動設備上的無縫客戶體驗，jQuery Mobile默認采用AJAX的方式載入一個目的鏈接頁面。因此，當在瀏覽器中點擊一個鏈接打一個新的頁面時，jQuery Mobile接收這個鏈接，通過AJAX的方式請求鏈接頁面，并把請求得到的內容注入到當前頁面的DOM里。另外還需要確保請求的頁面url唯一標識的。 這樣的結果就是用戶交互始終保存在同一個頁面中。新頁面中的內容也會輕松的顯示到這個頁面里。這種平滑的客戶體驗相比于傳統打開一個新的頁面并等待數秒的方式要好很多。當一個新的頁面做為新的data-role=”page” div插入到主頁面時，主頁面會有效的緩存取到的內容。使得當要訪問一個頁面時能夠盡快的顯示出來。這個工作過程聽起來難以置信的復雜，但是做為開發人員的我們大部份不需要了解其中工作的具體細節。只要能看到效果就OK。 注意:如果你不想采用AJAX的方式加載頁面，而想以原生的頁面加載方式打開一個鏈接頁面，只需要在打開的鏈接上添加屬性 rel=”external”屬性 頁面切換效果 你可以使用多種不同的切換效果來顯示新頁面內容，只需要在鏈接里添加data-transition屬性即可。可能的值如下 slide 從右到左切換（默認） slideup 從下到上切換 slidedown 從上到下切換 pop 以彈出的形式打開一個頁面 fade 漸變退色的方式切換 flip 舊頁面翻轉飛出，新頁面飛入 例如 <p><a href=”#about” data-transition=”flip”>關于頁面</a></p> 在瀏覽器中查看效果 注意：查看以上的效果需要您的瀏覽器支持jQuery Mobile。例如：Mobile Safari, DeskTop Safari,或Chrome。 對話框 通過在鏈接中添加data-rel=”dialog”的屬性，可以使鏈接頁面的顯示方式變為對話框。給顯示的對話框加入切換的效果也是一個不錯的選擇 例如我們將about的鏈接變成一個對話框并加入相應的切換效果。代碼如下 <p><a href="#about" data-rel="dialog" data-transition="slideup">About this app</a></p> 注意：目前的測試版本存在問題，當在一個頁面中寫多個”page”時在以dialog的方式打開一個頁面時，不會出現對話框效果按鈕 按鈕是觸摸式應用程序的一部分，它們扮演鏈接的功能，因為它們提供了更大的目標，當你點擊鏈接的時候（比較適合，手指比較胖的人群）在jQuery Mobile中把一個鏈接變成button的效果，只需要在標簽中添加data-role=”button屬性即可”。例如：<div data-role="content"> <p><a href="#about" data-role="button">About this app</a></p> </div>...<div data-role="content"> <p>This app rocks!</p><a href="#home" data-role="button">Go home</a></div> 另外jQuery Mobile也會自動的轉換像表單元素中的submit，reset，button，或image為按鈕樣式。 還可以利用data-icon屬性建立各式各樣的按鈕，建立行內按鈕和按鈕組（水平或垂直的） 格式化文本 為了使其盡可能的靈活，jQuery Mobile使更多的普通HTML內容更加獨立。加入適當的縮進使內容的可讀性更強。 有兩種布局方法使其格式化變得更簡單：布局表格和可折疊的內容塊 ? 布局表格：組織內容以列的形式顯示，有兩列表格，和三列表格 ? 可折疊的內容：當點擊內容塊的標題，則會將其隱藏的詳細內容展現出來 下面是一個可折疊內容的實例，單擊標題將看到具體的內容，再點擊標題則會將展現的內容隱藏。 <!DOCTYPE html> <html> <head> <title>Collapsible Content Demo</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /><script src="http://code.jquery.com/jquery-1.4.3.min.js"></script><script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> </head> <body> <div data-role="page" id="home"><div data-role="header"><h1>Home</h1></div><div data-role="content"><div data-role="collapsible" data-state="collapsed"><h3>About this app</h3><p>This app rocks!</p></div></div></div></body> </html> 觸摸選擇的表單元素 jQuery Mobile會自動替換標準的HTML表單元素，例如文本框，復選框，列表框。以這種自定義的樣式工作在觸摸設備上的表單元素，易用性更強。 例如，復選框將會變得很大，易于點選。點擊下拉列表時，將會彈出一組大按鈕列表選項，提供給用戶選擇。 該框架支持新的HTML5元素，例如search和range。另外你可以利用列表框并添加data-role=”slider”并添加兩個option選項，創建不錯的”打開/關閉”開關， 另外一個不錯的特點是組合單選框和組合復選框，可以利用fieldset元素添加屬性data-role=”controlgroup”來創建一組單選按鈕或復選框，jQuery Mobile自動格式化他們的格式。使它們看上去更fashion! 一般來說，開發者不需要關心表單的那些高級特性，開發者僅需要以正常的方式創建你的表單，jQuery Mobile框架會幫你完成剩余的工作。另外有一件事情需要開發人員來完成，即使用div或fieldset 屬性data-role=”fieldcontain”包裝每一個label/field。這樣jQuery Mobile會在label/field對之間添加一個水平分割條。這樣的對齊方式可以使其更容易查找。 下面是一個jQuery Mobile版的表單元素 <!DOCTYPE html> <html> <head> <title>jQuery Mobile Form Demo</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /><script src="http://code.jquery.com/jquery-1.4.3.min.js"></script><script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> </head> <body> <div data-role="page" id="home"><div data-role="header"><h1>Ice Cream Order Form</h1></div><div data-role="content"><form action="#" method="get"><div data-role="fieldcontain"><label for="name">Your Name:</label><input type="text" name="name" id="name" value="" /></div><div data-role="controlgroup"><legend>Which flavour(s) would you like?</legend><input type="checkbox" name="vanilla" id="vanilla" class="custom" /><label for="vanilla">Vanilla</label><input type="checkbox" name="chocolate" id="chocolate" class="custom" /><label for="chocolate">Chocolate</label><input type="checkbox" name="strawberry" id="strawberry" class="custom" /><label for="strawberry">Strawberry</label></div> <div data-role="fieldcontain"><label for="quantity">Number of Cones:</label><input type="range" name="quantity" id="quantity" value="1" min="1" max="10" /></div><div data-role="fieldcontain"><label for="sprinkles">Sprinkles:</label><select name="sprinkles" id="sprinkles" data-role="slider"><option value="off">No</option><option value="on">Yes</option></select> </div><div data-role="fieldcontain"><label for="store">Collect from Store:</label><select name="store" id="store"><option value="mainStreet">Main Street</option><option value="libertyAvenue">Liberty Avenue</option><option value="circleSquare">Circle Square</option><option value="angelRoad">Angel Road</option></select></div><div class="ui-body ui-body-b"><fieldset class="ui-grid-a"><div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div><div class="ui-block-b"><button type="submit" data-theme="a">Order Ice Cream</button></div> </fieldset></div></div></div></body> </html>列表視圖 列表視圖是jQuery Mobile中功能強大的一個特性。它會使標準的無序或有序列表應用更廣泛。應用方法就是在ul或ol標簽中添加data-role=”listview”屬性。 下面的一些情景將會用到創建列表視圖 簡單的文件列表項 ? 簡單的文件列表，會有一個好看的盒環繞著每一個列表項 ? 鏈接列表，框架會自動為每一個鏈接加一個箭頭”>”，顯示在鏈接按鈕的右側 ? 嵌套列表，如果你在一個li中嵌套另一個ul，jQuery Mobile會為這個嵌套列表自動建立一個”page”，并為它的父li自動加一個鏈接，這樣很容易實現樹狀菜單選項，設置功能等等。 ? 分隔線的按鈕列表，在一個li中存放2個鏈接，你可以建立一個還垂直分隔條，用戶可點擊左側或右側的列表選項，展現不同的內容 ? 記數氣泡 如果你在列表選項中添加class=”ui-li-count”，框架會在其中生成一個”小泡泡”圖標顯現于列表選項的右側，并在”小泡泡”中顯示一些內容。類似在收信箱中看到已經收到的信息條數 ? 查找過濾 在ul或ol中添加data-filter=”true”屬性。則這個列表項就具備的查詢的功能。”Filter result…”文本框將會顯示在列表項的上面，允許用戶根據條件來將一個大的列表項變小（過濾顯示） ? 列表分隔 將列表項分割，可以在任意列表項上添加屬性data-role=”list-divider ? 列表縮略圖和圖標。將img元素放在在列表項的開始， jQuery Mobile將會以縮略圖的形式來展現，圖片的大小為80 X 80像素。如果添加class=”ui-li-icon”類樣式img元素的大小將會以16 X 16像素的圖標 以下是一個列表項的實例 <!DOCTYPE html> <html> <head> <title>jQuery Mobile Lists Demo</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /><script src="http://code.jquery.com/jquery-1.4.3.min.js"></script><script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> </head> <body> <div data-role="page" id="home"><div data-role="header"><h1>Lists Demo</h1></div><div data-role="content"><h2 style="padding: 1em 0;">A list view</h2><ul data-role="listview" data-inset="true"><li>Cat</li><li>Dog</li><li>Mouse</li><li>Squirrel</li></ul><h2 style="padding: 1em 0;">A list of links</h2><ul data-role="listview" data-inset="true"><li><a href="#">About this app</a></li><li><a href="#">Buy ice cream</a></li><li><a href="#">Find a store</a></li></ul><h2 style="padding: 1em 0;">Nested lists</h2><ul data-role="listview" data-inset="true"><li>Play<ul><li><a href="#">Easy</a></li><li><a href="#">Medium</a></li><li><a href="#">Hard</a></li></ul></li><li>Settings<ul><li><a href="#">Graphics</a></li><li><a href="#">Sound</a></li><li><a href="#">Device</a></li></ul></li><li>Highscores<ul><li><a href="#">View</a></li><li><a href="#">Submit</a></li><li><a href="#">Reset</a></li></ul></li></ul><h2 style="padding: 1em 0;">A split button list with filter</h2><ul data-role="listview" data-inset="true" data-filter="true"><li><a href="#">The Grapes of Wrath</a><a href="#">Buy This Book</a></li><li><a href="#">The Trial</a><a href="#">Buy This Book</a></li><li><a href="#">A Tale of Two Cities</a><a href="#">Buy This Book</a></li> </ul><h2 style="padding: 1em 0;">A list with count bubbles</h2><ul data-role="listview" data-inset="true"><li><a href="#">SuperWidgets</a> <span class="ui-li-count">14</span></li><li><a href="#">MegaWidgets</a> <span class="ui-li-count">0</span></li><li><a href="#">WonderWidgets</a> <span class="ui-li-count">327</span></li> </ul></div></div></body> </html> data-inset=”true”將格式化列表塊為圓角化，如果你使用這種樣式的話，列表條目的寬度拉伸成與瀏覽器窗口的寬度一致 還有好多有趣的列表視圖可以參見jQuery Mobile檔。鏈接如下 http://jquerymobile.com/demos/1.0a1/#docs/lists/index.html 主題jQuery Mobile渲染的灰色、黑色和藍色及圓形的組件使其看起來很漂亮，但是如果你的整個應用都使用這樣的樣式，將會使其變得很乏味。jQuery Mobile允許你自定義官方一些組件的主題。例如： ? Font family ? Drop shadows ? 按鈕和盒狀元素的邊框圓角半徑 ? 圖標組件 另外，每一個主題包含26種不同顏色的切換（標記從a 到z），可以控制前景顏色，背景色和漸變色，典型用法是使頁面元素部分替換，你可以使用data-theme屬性。例如： <!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /><script src="http://code.jquery.com/jquery-1.4.3.min.js"></script><script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> </head> <body> <div data-role="page" id="home"><div data-role="header"><h1>Home</h1></div><div data-role="content"> <a href="#" data-role="button" data-theme="a">About this app</a><a href="#" data-role="button" data-theme="b">About this app</a><a href="#" data-role="button" data-theme="c">About this app</a><a href="#" data-role="button" data-theme="d">About this app</a><a href="#" data-role="button" data-theme="e">About this app</a></div></div></body> </html>事件 框架還提供了簡單的用戶接口，并添加了移動設備支持的特殊事件。<!DOCTYPE html> <html> <head> <title>jQuery Mobile Events</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> <script type="text/javascript">$( function() {//輕擊不放的時間 $('body').bind( 'taphold', function( e ) {alert( 'You tapped and held!' );e.stopImmediatePropagation();return false;} ); //猛擊事件 $('body').bind( 'swipe', function( e ) {alert( 'You swiped!' );e.stopImmediatePropagation();return false;} ); } );</script> </head><body> <div data-role="page" id="home"><div data-role="header"><h1>jQuery Mobile Events</h1></div><div data-role="content"> <p>Try:</p><ul><li>Tapping and holding</li><li>Swiping</li></ul></div></div></body> </html>?
轉載于:https://www.cnblogs.com/weidan/archive/2012/12/29/2839362.html
總結
以上是生活随笔為你收集整理的jQuery mobile 之三的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： discuzX2.5 数据字典
- 下一篇： 新版寡妇的打野出装及玩法推荐。