jQuery Mobile筆記

来源:http://www.cnblogs.com/zhangxiaoxun/archive/2016/12/16/6188831.html
-Advertisement-
Play Games

1.獲取jQuery mobile 文件,訪問jQuerymobile網站下載 (貌似使用jquery mobile後,jquery會自動在網頁中添加一些class類,第一次知道的我是被嚇呆的!!) 2.需要使用數據屬性,數據屬性是HTML5引入的,以data-開頭 比如data-role可以用於定 ...


1.獲取jQuery mobile 文件,訪問jQuerymobile網站下載 (貌似使用jquery mobile後,jquery會自動在網頁中添加一些class類,第一次知道的我是被嚇呆的!!) 2.需要使用數據屬性,數據屬性是HTML5引入的,以data-開頭 比如data-role可以用於定義頁眉,頁腳,內容,頁面等
  • data-role="page" 是在瀏覽器中顯示的頁面。
  • data-role="header" 是在頁面頂部創建的工具條 (通常用於標題或者搜索按鈕)
  • data-role="main" 定義了頁面的內容,比如文本, 圖片,表單,按鈕等。
  • "ui-content" 類用於在頁面添加內邊距和外邊距。
  • data-role="footer" 用於創建頁面底部工具條。
3.當jquery mobile中定義多個頁面,:page時,在移動端會預設只出現一個頁面 4.當遇到連接時,如果是同一個頁面的其他內容,或者是同個伺服器上的其他內容,會使用ajax載入頁面 而當遇到外部網站,會執行常規的連接操作 如果要禁用jquery mobile 的操作,則用數據屬性:data-ajax=“false” 5.jquery頁面設置 頁面標題:在頁面標簽中用data-title設置,也可以在header標簽中設置 預取內容 在一個站點中,有幾個網頁是經常被用戶載入的,為了提高載入速度,可以讓瀏覽器後臺在主頁面載入時預先讀取。具體設置為在相應連接中添加data-prefetch=“true” 修改頁面的過度方式 data-transition:poo(彈出視窗),fade,flip,flow,slide(從右到左滑動),slidedown(從上到下滑動),slidefade,turn,none 6.頁眉添加按鈕 在header頁面中添加按鈕,添加a連接 只在頁眉右邊添加一個按鈕:class=“ui-btn-right” 可以在按鈕中添加圖標  data-icon 7.添加返回按鈕 添加data-add-back-btn="true" 設置a連接為空,並設置data-rel=“back” 在頁腳中添加按鈕,他不會在按鈕四周保持空間,需添加“ui-bar類型   8.固定頁眉和頁腳 在頁眉頁腳中添加data-position=“fixed” 全屏的頁眉頁腳:data-fullscreen="true" 9.創建導航欄 在div標簽中添加data-role=“navbar”,然後創建無序列表 在激活的按鈕加上“uibtn-active”的類型標簽 一行最多只能添加五個按鈕,過多按鈕會被拆分 10.多頁面持久頁腳 所有頁面使用的data-id相同 需要添加“ui-btn-active,ui-state-persist” class標簽 11.列表功能 無序列表中ul添加data-role=“listview” 在li中添加a連接後,列表中會添加箭頭icon 內嵌列表:ul中添加data-inset=“true” 列表分隔符:li中添加data-role=“listdriver”或ul中加data-autodrivers=“true”   12.在列表中添加縮略圖或圖標 在li中添加img,或在添加“ui-li-icon”的class類型,圖標要指定位置,不然圖標不顯示: ui-btn-icon-top/bottom/left 拆分行的列表,在ul中添加data-spliticon=“delete” 13.列表的搜索過濾 在ul中添加data-filter=“true” 預設不去分大小寫,通過ajax方式檢索 14.使用tel和mailto自動調用手機的撥號和電子郵件功能  15.表單的提交功能 在jquery-lmobie中都是通過ajax提交的 表單組件會自動優化 表單提交的div中添加data-role="fieldcontain"   16.選擇菜單 如需隱藏標簽,請使用 class ui-hidden-accessible。這在您把元素的 placeholder 屬性作為標簽時經常用到 我們可以使用 data-clear-btn="true" 屬性來添加清除輸入框內容的按鈕 (一個在輸入框右側的 X 圖標) jQuery Mobile 通過 AJAX 自動處理表單提交,並將試圖集成伺服器響應到應用程式的 DOM 中。
  • <form> 元素必須有一個 method 和一個 action 屬性
  • 每個表單元素必須有一個唯一的 "id" 屬性。id 必須是整個站點所有頁面上唯一的。這是因為 jQuery Mobile 的單頁導航機制使得多個不同頁面在同一時間被呈現
  • 每個表單元素必須有一個標簽。設置標簽的 for 屬性來匹配元素的 id
使用效果與使用平臺有關 17.搜索組件與滑塊組件   開關組件 <form method="post" action="demoform.php">   <label for="switch">切換開關:</label>     <input type="checkbox" data-role="flipswitch" name="switch" id="switch" data-on-text="True" data-off-text="False"  checked>(預設選中) </form>   滑塊組件,類型改為range   18.禁用原生表單控制項 data-role="none" 迷你組件:data-mini="true"   19.創建模態對話框(以下兩種辦法都可以) a鏈接中添加data-rel="dialog" page中添加data-dialog="true"   20.使用網格進行內容佈局 在div標簽中添加class=“ui-grid-a”,(a表示兩列網格,b表示三列網格,以此類推) 在div標簽中再添加class=“ui-block-a”(從a到d)   21.讓html元件響應式的只能適應不同尺寸 在現有網格中添加class=“ui-reponsive” 摺疊框:data-role=“collapsible”(初始情況下展開:再添加data-collapsible=“false”) 可將收縮icon挪到右邊:data-iconpos=“right” 可摺疊集合: data-role=“collapsible-set”   22.彈出式視窗 首先寫一個區塊:data-role=“popup” 然後寫一個a鏈接作為按鈕(以啟動事件): <a href="#f" data-role="button" data-rel="popup" data-position-to="window">sss</a>   23.表格(響應式:列迴流和列切換) 在table標簽中添加data-role=“table” class="ui-responsive table-stroke"(分別是響應式和出現表格邊框) (添加響應式後,原先橫版的表格,會在解析度改變時變為豎版的)   可以根據用戶需要過濾性的顯示數據 添加data-mode="columntoggle" 然後在thead中給列標題添加權重:data-priority="1~10" 對按鈕文本改變:data-column-btn-text=“??”   24.添加面板 添加data-role=“panel”,而且必須在content外添加 data-position=“left/right”可以設置面板的方向 通過設置data-display屬性來訂正顯示方式:reveal、push、overveal   25.創建按鈕
  • 使用 <button> 元素
  • 使用 <input> 元素
  • 使用帶有 data-role="button" 的 <a> 元素
組合按鈕(水平/豎直): data-role="controlgroup" 和 data-type="horizontal|vertical" 後退按鈕: <a href="#" data-role="button" data-rel="back">返回</a>   26.juqery mobile定義了多種主題,也可以自定義 http://www.runoob.com/jquerymobile/jquerymobile-themes.html   27.jquery mobile事件    jQuery on() 方法用於綁定事件到選中的元素上。   <script>
$(document).on("pagecreate","#pageone",function(){

   // jQuery 事件...

}); </script>   旋轉事件: window.orientation 屬性針對縱向視圖返回 0,針對橫向視圖返回 90 或 -90。 頁面載入: jquery應用一般都是用$(document).ready來進行初始化,但是jquery mobile這一點卻不怎麼好用,因為jquery mobile使用ajax載入頁面, $(document).ready只對第一個頁面有效 因此需要使用pagecreate事件              
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 序:前段時間公司一次研討會上,一市場部同事展現了同行業其他公司的3D機房,我司領導覺得這個可以研究研究,為了節約成本,我們在網上大量檢索,最後找到一位前輩的博文【TWaver的技術博客】,在那篇博文的評論區終於找到了那位前輩的源碼,可惜下載後發現是壓縮過的.min.js文件。經過各種研究發現,那是人 ...
  • 一、pic1.html頁面代碼如下:二、模擬資料庫數據的實體類Photoes.cs代碼如下:三、伺服器返回數據給客戶端的一般處理程式Handler1.ashx代碼如下:總結:前段時間學習了瀑布流佈局與圖片載入等知識,做了一個簡單的示例,希望能鞏固一下自己所學的知識。不斷總結,不斷鞏固,不斷提升。。。 ...
  • 一、jsonp方式 1.伺服器搭建: 文件jsonpcli.js:作為客戶端伺服器 jsonp.html:請求頁 文件jsonpser.js:作為服務端伺服器 process_get:響應頁 運行這兩個文件,客戶端埠為8082,服務端埠為8081,跨域。 2.跨域請求 文件jsonp.html( ...
  • Lazy Load 是一個用 JavaScript 編寫的 jQuery 插件. 它可以延遲載入長頁面中的圖片. 在瀏覽器可視區域外的圖片不會被載入, 直到用戶將頁面滾動到它們所在的位置. 這與圖片預載入的處理方式正好是相反的.在包含很多大圖片長頁面中延遲載入圖片可以加快頁面載入速度. 瀏覽器將會在 ...
  • 序 一個以js驗證表單的簡潔的註冊登錄頁面,不多說直接上圖 效果 主要文件 完整代碼 1 sign_up.html 註冊表單 2 log_in.html 登錄表單 3 common_form.css 表單css樣式 4 common_form_test.js 註冊登錄腳本 5 form_logo.p ...
  • 下載鏈接:http://www.bootcss.com/p/flat-ui/ 一、什麼是Flat UI? Flat UI 是一種漂亮的Boostrap主題。我們重新設計了它的很多組件,使得其看起來扁平化。 其中的大部分組件,都是用起來很簡單的。但是,為了確保其中一些組件外觀和我們想要的一樣,我們最終 ...
  • JQ選擇器與CSS/CSS3選擇器非常類似,對於學過CSS/CSS3的朋友來說可以是快速上手,下麵總結了比較常用的選擇器。 $('ul') ( 選取'ul'標簽 ) $('#one>span') $('[class]') ( 所有具有'class'屬性的元素 ) $('li[class]') ( 選 ...
  • 前些天在練習寫一個小例子的時候用到了定時器,發現在setInterval和setTimeout中傳入函數時,函數中的this會指向window對象,如下例: 從上述例子中可以看到setTimeout中函數內的this是指向了window對象,這是由於setTimeout()調用的代碼運行在與所在函數 ...
一周排行
    -Advertisement-
    Play Games
  • 前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器,其界面簡潔大方,操作體驗流暢。該播放器支持多種音頻格式(如 MP4、WMA、OGG、FLAC 等),並具備標記、實時歌詞顯示等功能。 另外,還支持換膚及多語言(中英文)切換。核心音頻處理採用 FFmpeg 組件,獲得了廣泛認可,目前 Git ...
  • OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統,完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面,查看已創建應用的Client ID和Clien ...
  • 解決了這個問題:《winForm下,fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自:https://www.fcnsoft.com/Home/Sho ...
  • 國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面,接收裸 Win 32 的 WM_Pointer 消息,從消息裡面獲取觸摸點信息,使用觸摸點 ...
  • 前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能,還集成了高性能的輕量級 POS 解決方案,確保頁面載入速度極快,提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI: ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的,因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 問題 問題是這樣的:第三方的webapi,需要先調用登陸介面獲取Cookie,訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面,返回的Headers中沒有找到Cookie信息。 分析 首先,使用Postman測試該登陸介面,正常返回Cookie信息,說明是HttpCli ...
  • 國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低,主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上,.NET曾因微軟的閉源策略發展受限,儘管後來推出了跨平臺的.NET ...
  • 在WPF開發應用中,動畫不僅可以引起用戶的註意與興趣,而且還使軟體更加便於使用。前面幾篇文章講解了畫筆(Brush),形狀(Shape),幾何圖形(Geometry),變換(Transform)等相關內容,今天繼續講解動畫相關內容和知識點,僅供學習分享使用,如有不足之處,還請指正。 ...
  • 什麼是委托? 委托可以說是把一個方法代入另一個方法執行,相當於指向函數的指針;事件就相當於保存委托的數組; 1.實例化委托的方式: 方式1:通過new創建實例: public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...