jquerymobile使用方法_jquery mobile怎麼用

『壹』如何使用jQuery mobile插件

操作方法如下：可以參考w3c school 裡面的jQuery Mobile教程，很詳細的基礎教程

『貳』如何使動態生成的jquery Mobile元素立即生效

需要使用 JQM 提供的 create 方法創建一次，才會附加上 JQM 的樣式，立即生效；

如果是動態添加塊狀元素，如 div、p等：

$('selector').trigger('create');

如果是表單元素，如input、textarea、button等：

$('selector').textinput();

下拉元素，如select：

$('selector')[0].selectedIndex=3;//先給select賦值
$('selector').selectmenu('refresh');//然後刷新

Toggle switch 控制：

varmyswitch=$("#toggle");
myswitch[0].selectedIndex=1;
myswitch.slider("refresh");

slider 控制：

$('selector').val(value).slider('refresh');

listview 元素，如 li：

$('selector').listview('refresh');

radio 元素：

$("input[value=value]").attr('checked',true).checkboxradio('refresh');

checkbox 元素：

$('selector').attr('checked',true).checkboxradio('refresh');

『叄』 jquery mobile怎麼用

如何使用默認調板

jQueryMobile內建了主題控制相關模塊。調板可以使用data-theme屬性來控制。如果你不指定data-theme屬性，將默認採用a調板。以下代碼定義了一個採用默認調板的頁面：

『肆』怎樣使用Jquery Mobile創建表格

使用Jquery Mobile創建表格的完整例子：
思路：頁面引入jquery.mobile-1.4.5.min.js、jquery.min.js這兩個最主要的js。
頁面結構：在<head>和</head>中寫入如下代碼：
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="./libs/jquery/1.10.2/jquery.min.js"></script>
<script src="./libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
</head>
以下是body部分：
<body>
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<h4>jquery mobile創建表格</h4>

<table data-role="table" data-mode="columntoggle" class="ui-responsive" id="myTable">
<thead>
<tr>
<th data-priority="6">CustomerID</th>
<th>CustomerName</th>
<th data-priority="1">ContactName</th>
<th data-priority="2">Address</th>
<th data-priority="3">City</th>
<th data-priority="4">PostalCode</th>
<th data-priority="5">Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Obere Str. 57</td>
<td>Berlin</td>
<td>12209</td>
<td>Germany</td>
</tr>
<tr>
<td>2</td>
<td>Antonio Moreno Taquer</td>
<td>Antonio Moreno</td>
<td>Mataderos 2312</td>
<td>Mico D.F.</td>
<td>05023</td>
<td>Mexico</td>
</tr>
<tr>
<td>3</td>
<td>Around the Horn</td>
<td>Thomas Hardy</td>
<td>120 Hanover Sq.</td>
<td>London</td>
<td>WA1 1DP</td>
<td>UK</td>
</tr>
<tr>
<td>4</td>
<td>Berglunds snabbk</td>
<td>Christina Berglund</td>
<td>Berguvsven 8</td>
<td>Lule</td>
<td>S-958 22</td>
<td>Sweden</td>
</tr>
</tbody>
</table>
</div>
<div data-role="footer">
<h1>底部logo</h1>
</div>
</div>
</body>
</html>

『伍』 JQuery Mobile 的navbar標簽怎麼用

1、頁眉導航條

<div data-role='header' data-theme="t">
<h1>廣電醫療平台</h1>
<div data-role="navbar">
<ul>
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
</div>
</div>

2、頁腳導航條

<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="grid">one</a></li>
<li><a href="#" data-icon="star">two</a></li>
<li><a href="#" data-icon="gear">three</a></li>
</ul>
</div>
</div>

說明：
1、使用data-role="navbar"來定義導航條，默認的，會將鏈接定義成按鈕，無需data-role="button"
2、navbar導航條單行只5個按鈕，如果超過5個，會自動分兩列換行顯示

定位頁眉和頁腳
放置頁眉和頁腳的方式有三種：
Inline - 默認。頁眉和頁腳與頁面內容位於行內。
Fixed - 頁面和頁腳會留在頁面頂部和底部。
Fullscreen - 與 fixed 類似;頁面和頁腳會留在頁面頂部和底部，but also over the page content. It is also slightly see-through
請使用 data-position 屬性來定位頁眉和頁腳：

Inline 定位（默認）<div data-role="header" data-position="inline"></div>
<div data-role="footer" data-position="inline"></div>

Fixed 定位<div data-role="header" data-position="fixed"></div>
<div data-role="footer" data-position="fixed"></div>

Fullscreen 定位<div data-role="header" data-position="fixed" data-fullscreen="true"></div>
<div data-role="footer" data-position="fixed" data-fullscreen="true"></div>

『陸』怎麼引用jquery mobile 框架

要使用 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。

『柒』 jquery mobile切換頁面的幾種方法

有幾種方法來切換頁面
1. $.mobile.changePage ('../path/to/page.
html');
2. $.mobile.changePage ('other/page.html', 'fade', false, false);
可以設定頁面切換效果，以及定義參數來控制頁面是否記錄歷史等
3. var pageData = { url: formresults.php, type: 'get', data:
$('form#myform').serialize () };
$.mobile.changePage (pageData);
將頁面url，類型，數據定義為變數來傳遞。
4. var previousPage = $.mobile.activePage.data ('ui.prevPage');
$.mobile.changePage ([previousPage, anotherPreviousPage], 'pop');
使用changepage來載入第三個頁面
5. $.mobile.pageLoading (); /顯示載入信息
$.mobile.pageLoading (true); //隱藏
pageLoading (boolean done)函數顯示或隱藏頁面載入的提示信息。可以在$.mobile.loadingMessage變數中設置。
6 .$.mobile.silentScroll (100);
silentScroll (number yPos): 在Y軸上（默認為0）滾動頁面而不需要觸發scroll事件

『捌』怎麼使用JQuery Mobile開發移動網站

jQuery Mobile 提供了web 應用程序的框架，操作html5和css適配頁面，在使用方面和js在開發上沒有大的差別。如下，使用jQuery Mobile寫的簡單的網頁： <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="../../code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> <script src="../../code.jquery.com/jquery-1.8.3.min.js"></script> <script src="../../code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>home</h1> </div> <div data-role="content"> <p>content</p> </div> <div data-role="footer"> <h1>foot</h1> </div> </div> </body> </html>

『玖』怎樣使用Jquery Mobile創建表格

步驟

打開DreamWeaver，新建一個htm5的頁面

『拾』怎麼使用JQuery Mobile開發移動網站

方法/步驟
簡單的說明一下JQueryMobile. 它是一個很好的跨平台的移動端網站開發框架。是一個前台的框架。現在要使用這個框架組一個界面，這個界面很簡單，但是麻雀雖小五臟俱全，然後模板實現，知識講解完畢。html要使用HTML5的標准來寫，因為JQueryMobile是基於HTML5的。書寫html5的格式如圖，

既然使用JQueryMobile就要有這個框架，這里可以使用本地引用的方式，和網上引用，也叫做cdn引用。就是比較穩定和快速的引用外部文件的一種方式。這里使用cdn的方式，這樣只要可以上網就可以使用該框架。

在寫移動端的網站的時候，一定要寫一個meta的name為viewport的屬性，因為該屬性代表著網站頁面的自適應。簡單的寫法為：<meta name="viewport" content="width=device-width, initial-scale=1"> 代表著網站為驅動設備的寬度。

然後加入框架之後，寫一個簡單的界面。這裡面JQueryMobile大量的使用了一個data-的屬性，這里使用最多的事data-role。代表著他默認的樣式規則。就是提前定義好了很多的樣式來供你使用。常用的page. 代表著頁面， listview，代表著一個列表視圖。下面是代碼和效果圖

稍微說明一下。
data-role="page" 是代表著一個頁面可以看做該內容下是一個頁面顯示的內容
data-role=」header"代表著頁面的頁頭，就是頁面的最上面顯示的內容這里需要注意，裡面要加上子標簽內容，要不然，就不會居中顯示內容了。推薦使用h1.
data-role="footer"代表著頁腳的內容。也是網站的一個說明信息。或者是一個底部導航菜單。還有一部分，就是data-role="content" 是代表著頁面內容部分，主要的內容在這裡面顯示。
這3個部分構成了一個簡單的頁面。所以，現在可以體驗到它的強大，不用寫太多的代碼一個簡單的框架就好了，下面繼續增加一個listveiw的列表視圖。
完成列表視圖的代碼，增加一個文章列舉表的代碼，這里列表是使用data-role="listview" 來修飾樣式。然後這里只需要加上data-role="listview" 你發現想要的list效果就實現了。這樣我們一個簡單的頁面效果就實現了。

導航:首頁 > 使用方法 > jquerymobile使用方法

jquerymobile使用方法

與jquerymobile使用方法相關的資料