jQueryMobile快速入門-創(chuàng)新互聯(lián)

what

jQuery Mobile是jQuery 在手機(jī)上和平板設(shè)備上的版本。它不僅會給主流移動平臺帶來jQuery核心庫，而且會發(fā)布一個完整統(tǒng)一的jQuery移動UI框架。支持全球主流的移動平臺。
jQueryMobile快速入門

創(chuàng)新互聯(lián)專注于網(wǎng)站建設(shè)|網(wǎng)站建設(shè)維護(hù)|優(yōu)化|托管以及網(wǎng)絡(luò)推廣，積累了大量的網(wǎng)站設(shè)計與制作經(jīng)驗，為許多企業(yè)提供了網(wǎng)站定制設(shè)計服務(wù)，案例作品覆蓋門簾等行業(yè)。能根據(jù)企業(yè)所處的行業(yè)與銷售的產(chǎn)品，結(jié)合品牌形象的塑造，量身制作品質(zhì)網(wǎng)站。

使用

要使用 jQuery Mobile，首先需要在開發(fā)的界面中包含如下3個內(nèi)容：

CSS文件jquery.mobile-1.4.5.min.css
jQuery類庫文件 jquery.min.js
jQuery Mobile文件 jquery.mobile-1.4.5.min.js
```
<link rel="stylesheet" ></script>
```

結(jié)構(gòu)

一個jQuery Mobile頁面時你需要創(chuàng)建三塊基本內(nèi)容（頭，正文，尾），要在html文檔中的 head 標(biāo)簽內(nèi)填寫：

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"><link rel="stylesheet"  是顯示在瀏覽器中的頁面
data-role="header" 創(chuàng)建頁面上方的工具欄（常用于標(biāo)題和搜索按鈕）
data-role="content" 定義頁面的內(nèi)容，比如文本、圖像、表單和按鈕，等等
data-role="footer" 創(chuàng)建頁面底部的工具欄
在jQuery Mobile中，可以在單一 HTML 文件中創(chuàng)建多個頁面。通過唯一的id來分隔每張頁面，在后面的代碼編寫中，推薦使用以上的構(gòu)建方法來建立頁面。
超鏈接
jQuery Mobile中的一個“page”結(jié)構(gòu)一般使用一個DIV來組織?，F(xiàn)在你可以使用前一節(jié)中的模板來創(chuàng)建一個包含三個跳轉(zhuǎn)到其他頁面的鏈接的導(dǎo)航頁面：
<div data-role="page" id="menu">
   <div data-role="header"><h2>Menu</h2></div><!-- /header -->
   <div data-role="content">   
      <p>What vehicles do you like?</p>      
      <p><a href="#Cars">Cars</a></p>
      <p><a href="#Trains">Trains</a></p>
      <p><a href="#Planes">Planes</a></p>      
   </div><!-- /content -->
   <div data-role="footer" data-position="fixed"><h5>Page Footer</h5></div><!-- /footer --></div><!-- /page -->
上面創(chuàng)建的導(dǎo)航頁是我們在瀏覽器看到的第一個頁面，接下來我們再添加三個“page”，他們有不同的id：Cars， Planes，Trains。
<div data-role="page" id="Cars">
   <div data-role="header">
      <h2>Cars</h2>
   </div><!-- /header -->
   <div data-role="content">   
      <p>We can add a list of cars</p>
   </div><!-- /content -->
   <div data-role="footer">
      <h5>Page Footer</h5>
   </div><!-- /footer --></div><!-- /page --><!-- Start of third page --><div data-role="page" id="Trains">
   <div data-role="header">
      <h2>Trains</h2>
   </div><!-- /header -->
   <div data-role="content">   
      <p>We can add a list of trains</p>
   </div><!-- /content -->
   <div data-role="footer">
      <h5>Page Footer</h5>
   </div><!-- /footer --></div><!-- /page --><!-- Start of fourth page --><div data-role="page" id="Planes">
   <div data-role="header">
      <h2>Planes</h2></div><!-- /header -->
   <div data-role="content">   
      <p>We can add a list of planes</p>
   </div><!-- /content -->
   <div data-role="footer">
   <h5>Page Footer</h5></div><!-- /footer --></div><!-- /page -->
現(xiàn)在我們已經(jīng)建立完成了，去試一試吧
button

在jQuery Mobile中，按鈕可通過三種方式創(chuàng)建：
使用 < button > 元素
使用 < input > 元素
使用帶有 data-role="button" 的 < a >元素
<button>按鈕</button><input type="button" value="按鈕"><a href="#" data-role="button">按鈕</a>
在 jQuery Mobile 中，按鈕會自動樣式化，讓它們在移動設(shè)備上更具吸引力和可用性。我們推薦使用帶有 data-role="button" 的< a >元素在頁面間進(jìn)行鏈接，使用< input >或< button >元素進(jìn)行表單提交。
默認(rèn)情況下，按鈕占滿整個屏幕寬度。如果你想要一個僅是與內(nèi)容一樣寬的按鈕，或者如果您想要并排顯示兩個或多個按鈕，請?zhí)砑?data-inline="true"，如果想組合按鈕，可以使用 data-role="controlgroup" 屬性和 data-type="horizontal|vertical" 一起使用來規(guī)定是否水平或垂直組合按鈕。
<a href="#pagetwo" data-role="button" data-inline="true">訪問第二個頁面</a><div data-role="controlgroup" data-type="horizontal">
    <a href="#anylink" data-role="button">按鈕 1</a>
    <a href="#anylink" data-role="button">按鈕 2</a>
    <a href="#anylink" data-role="button">按鈕 3</a></div>
可折疊塊
可折疊塊允許您隱藏或顯示內(nèi)容 - 對于存儲部分信息很有用。如需創(chuàng)建一個可折疊的內(nèi)容塊，需要為容器添加 data-role="collapsible" 屬性。在容器（div）內(nèi)，添加一個標(biāo)題元素（H1-H6），后跟您想要進(jìn)行擴(kuò)展的 HTML 標(biāo)記，默認(rèn)情況下，內(nèi)容是被折疊起來的。如需在頁面加載時展開內(nèi)容，請使用 data-collapsed="false"：
<div data-role="collapsible" data-collapsed="false">
    <h2>點(diǎn)擊我 - 我可以折疊!</h2>
    <p>我是可折疊的內(nèi)容。</p></div>
當(dāng)然可折疊塊允許嵌套，如下代碼：
<div data-role="collapsible">
    <h2>點(diǎn)擊我 - 我可以折疊!</h2>
    <p>我是被展開的內(nèi)容。</p>
    <div data-role="collapsible">
        <h2>點(diǎn)擊我 - 我是嵌套的可折疊塊！</h2>
        <p>我是嵌套的可折疊塊中被展開的內(nèi)容。</p>
    </div></div>
panel
jQuery Mobile中的面板會在屏幕的左側(cè)向右側(cè)劃出?？梢酝ㄟ^指定id的div元素添加 data-role="panel" 屬性來創(chuàng)建面板。
<div data-role="panel" id="myPanel">
  <h3>面板標(biāo)題..</h3>
  <p>文本內(nèi)容..</p></div>
panel標(biāo)記必須置于頭部、內(nèi)容、底部組成的頁面之前或之后。
<div data-role="page" id="pageone">
  <div data-role="panel" id="myPanel"> 
    <h3>面板頭部..</h3>
    <p>面板中的一些文本內(nèi)容..</p>
  </div>
  <div data-role="header">
      <h2>匯智網(wǎng)</h2>
   </div>
 </div>
要訪問面板，需要創(chuàng)建一個指向面板的鏈接，點(diǎn)擊該鏈接即可打開面板：
<a href="#myPanel" class="ui-btn ui-btn-inline">打開面板</a>
默認(rèn)情況下，面板會顯示在屏幕的左側(cè)。如果想讓面板出現(xiàn)在屏幕的右側(cè)，可以指定 data-position="right" 屬性。
<a href="#myPanel" class="ui-btn ui-btn-inline" 　data-position="right">打開面板</a>
可以通過使用 data-display 屬性來控制面板的展示方式:
<div data-role="panel" id="overlayPanel" data-display="overlay"> <!--覆蓋顯示--><div data-role="panel" id="revealPanel" data-display="reveal">   <!--滑動顯示--><div data-role="panel" id="pushPanel" data-display="push">       <!--推動顯示--></div></div></div>
可以使用按鈕來關(guān)閉面板：僅需要在面板的div中添加 data-rel="close" 屬性。
<div data-role="panel" id="myPanel"> 
  <h3>面板頭部..</h3>
  <p>面板中的一些文本內(nèi)容..</p>
  <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline">關(guān)閉面板</a></div>
更多示例內(nèi)容及在線練習(xí)參考：
http://www.hubwiz.com/course/5640589f9bb934437751117b/
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
            
                分享題目：jQueryMobile快速入門-創(chuàng)新互聯(lián)
                

                文章源于：http://jinyejixie.com/article8/eghip.html
            
            
                成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、小程序開發(fā)、網(wǎng)站營銷、網(wǎng)站排名、品牌網(wǎng)站制作、網(wǎng)站收錄            
            
                廣告
                
            
            
                聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：
                創(chuàng)新互聯(lián)