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

what

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

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

使用

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

  • CSS文件jquery.mobile-1.4.5.min.css

  • jQuery類(lèi)庫(kù)文件 jquery.min.js

  • jQuery Mobile文件 jquery.mobile-1.4.5.min.js

    <link rel="stylesheet" ></script>

結(jié)構(gòu)

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

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"><link rel="stylesheet"  是顯示在瀏覽器中的頁(yè)面
  • data-role="header" 創(chuàng)建頁(yè)面上方的工具欄（常用于標(biāo)題和搜索按鈕）
  • data-role="content" 定義頁(yè)面的內(nèi)容，比如文本、圖像、表單和按鈕，等等
  • data-role="footer" 創(chuàng)建頁(yè)面底部的工具欄
    • 在jQuery Mobile中，可以在單一 HTML 文件中創(chuàng)建多個(gè)頁(yè)面。通過(guò)唯一的id來(lái)分隔每張頁(yè)面，在后面的代碼編寫(xiě)中，推薦使用以上的構(gòu)建方法來(lái)建立頁(yè)面。
    超鏈接
    jQuery Mobile中的一個(gè)“page”結(jié)構(gòu)一般使用一個(gè)DIV來(lái)組織?，F(xiàn)在你可以使用前一節(jié)中的模板來(lái)創(chuàng)建一個(gè)包含三個(gè)跳轉(zhuǎn)到其他頁(yè)面的鏈接的導(dǎo)航頁(yè)面：
    <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)航頁(yè)是我們?cè)跒g覽器看到的第一個(gè)頁(yè)面，接下來(lái)我們?cè)偬砑尤齻€(gè)“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
    jQueryMobile快速入門(mén)
    在jQuery Mobile中，按鈕可通過(guò)三種方式創(chuàng)建：
    使用 < button > 元素
    使用 < input > 元素
    使用帶有 data-role="button" 的 < a >元素
    <button>按鈕</button><input type="button" value="按鈕"><a href="#" data-role="button">按鈕</a>
    在 jQuery Mobile 中，按鈕會(huì)自動(dòng)樣式化，讓它們?cè)谝苿?dòng)設(shè)備上更具吸引力和可用性。我們推薦使用帶有 data-role="button" 的< a >元素在頁(yè)面間進(jìn)行鏈接，使用< input >或< button >元素進(jìn)行表單提交。
    默認(rèn)情況下，按鈕占滿(mǎn)整個(gè)屏幕寬度。如果你想要一個(gè)僅是與內(nèi)容一樣寬的按鈕，或者如果您想要并排顯示兩個(gè)或多個(gè)按鈕，請(qǐng)?zhí)砑?data-inline="true"，如果想組合按鈕，可以使用 data-role="controlgroup" 屬性和 data-type="horizontal|vertical" 一起使用來(lái)規(guī)定是否水平或垂直組合按鈕。
    <a href="#pagetwo" data-role="button" data-inline="true">訪(fǎng)問(wèn)第二個(gè)頁(yè)面</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>
    可折疊塊
    jQueryMobile快速入門(mén)
    可折疊塊允許您隱藏或顯示內(nèi)容 - 對(duì)于存儲(chǔ)部分信息很有用。如需創(chuàng)建一個(gè)可折疊的內(nèi)容塊，需要為容器添加 data-role="collapsible" 屬性。在容器（div）內(nèi)，添加一個(gè)標(biāo)題元素（H1-H6），后跟您想要進(jìn)行擴(kuò)展的 HTML 標(biāo)記，默認(rèn)情況下，內(nèi)容是被折疊起來(lái)的。如需在頁(yè)面加載時(shí)展開(kāi)內(nèi)容，請(qǐng)使用 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>我是被展開(kāi)的內(nèi)容。</p>
    <div data-role="collapsible">
        <h2>點(diǎn)擊我 - 我是嵌套的可折疊塊！</h2>
        <p>我是嵌套的可折疊塊中被展開(kāi)的內(nèi)容。</p>
    </div></div>
    panel
    jQueryMobile快速入門(mén)
    jQuery Mobile中的面板會(huì)在屏幕的左側(cè)向右側(cè)劃出?？梢酝ㄟ^(guò)指定id的div元素添加 data-role="panel" 屬性來(lái)創(chuàng)建面板。
    <div data-role="panel" id="myPanel">
  <h3>面板標(biāo)題..</h3>
  <p>文本內(nèi)容..</p></div>
    panel標(biāo)記必須置于頭部、內(nèi)容、底部組成的頁(yè)面之前或之后。
    <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>
    要訪(fǎng)問(wèn)面板，需要?jiǎng)?chuàng)建一個(gè)指向面板的鏈接，點(diǎn)擊該鏈接即可打開(kāi)面板：
    <a href="#myPanel" class="ui-btn ui-btn-inline">打開(kāi)面板</a>
    默認(rèn)情況下，面板會(huì)顯示在屏幕的左側(cè)。如果想讓面板出現(xiàn)在屏幕的右側(cè)，可以指定 data-position="right" 屬性。
    <a href="#myPanel" class="ui-btn ui-btn-inline" 　data-position="right">打開(kāi)面板</a>
    可以通過(guò)使用 data-display 屬性來(lái)控制面板的展示方式:
    <div data-role="panel" id="overlayPanel" data-display="overlay"> <!--覆蓋顯示--><div data-role="panel" id="revealPanel" data-display="reveal">   <!--滑動(dòng)顯示--><div data-role="panel" id="pushPanel" data-display="push">       <!--推動(dòng)顯示--></div></div></div>
    可以使用按鈕來(lái)關(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)容及在線(xiàn)練習(xí)參考：
    http://www.hubwiz.com/course/5640589f9bb934437751117b/
    另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。
                
    
                分享題目：jQueryMobile快速入門(mén)-創(chuàng)新互聯(lián)
                
    
                文章源于：http://muchs.cn/article8/eghip.html
            
    
            
    
                成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營(yíng)銷(xiāo)推廣、小程序開(kāi)發(fā)、網(wǎng)站營(yíng)銷(xiāo)、網(wǎng)站排名、品牌網(wǎng)站制作、網(wǎng)站收錄            
    
            
    
                廣告
                
            
    
            
    
                聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：
                創(chuàng)新互聯(lián)
    手機(jī)網(wǎng)站建設(shè)