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
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...