jquery-mobileAan de slag met jquery-mobile


Opmerkingen

Dit komt rechtstreeks van de JQuery Mobile-website:

http://jquerymobile.com/about/

"jQuery Mobile is een op HTML5 gebaseerd gebruikersinterfacesysteem dat is ontworpen om responsieve websites en apps te maken die toegankelijk zijn op alle smartphone-, tablet- en desktop-apparaten. Het is gebouwd op de oerdegelijke basis van jQuery en jQuery UI en biedt Ajax-navigatie met pagina-overgangen, aanraakgebeurtenissen en verschillende widgets. De lichtgewicht code is gebouwd met progressieve verbetering en heeft een flexibel, gemakkelijk te ontwerpen ontwerp. " - JQuery Mobile-team

Ik raad ten zeerste aan om naar de site te gaan voor meer informatie over JQuery Mobile. Dit is slechts een fragment om beginners te helpen.

U kunt ook meer voorbeelden en informatie vinden op de officiële pagina van jquery-mobile: https://jquerymobile.com/demos

Opstelling

De huidige versie van JQuery Mobile is 1.4.5 en kan hier worden gedownload: https://jquerymobile.com/

  • Download het zip-bestand en pak alle bestanden uit.
  • Maak een bibliotheekmap (of bibliotheek) in uw toepassing (in de map www).
  • Maak een map jquery-mobile in de map lib (ik heb de mijne jqm genoemd).
  • Plaats alle jquery-mobiele bestanden die u hebt uitgepakt in de map jquery-mobile. U kunt nu een koppeling maken naar deze bestanden in uw index.html-bestand.

In de onderstaande code zijn de JavaScript- en CSS-bestanden per URL opgenomen. U kunt ook de bovenstaande opsommingstekens volgen en opnemen via het pad waar het zich bevindt op uw lokale computer, dat wil zeggen:

<link href="lib/jqm/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
...
<script type="text/javascript" src="lib/jqm/jquery.mobile-1.4.5.min.js"></script>
 

Dit zijn de verkleinde versies van de CSS- en JS-bestanden. Als alternatief kunt u de niet-verkleinde versie tijdens de ontwikkeling opnemen, zodat deze gemakkelijker te lezen is als u erin moet graven. Als u dit doet, raad ik aan om ze na implementatie naar productie terug te schakelen naar de verkleinde versies.

<!-- it is imported inside head tags. -->

<!-- no additional files needed, if css and js referred with full path. -->

 <!DOCTYPE html>
 <html>
 <head>
 <!-- Viewport setup. -->
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- jQuery Mobile styles come first before js. -->
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
 <!-- Basic jQuery library -->
 <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
 <!-- jQuery Mobile library kind of extends upon jQuery -->
 <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
 </head>
 <body>

 <!-- example page element using jQuery mobile tags: -->      
 <div data-role="page" id="pageone">

     <div data-role="header" id="pageone-header">
        <h3>Insert Page header Here</h3>
     </div><!-- /header -->

     <div role="main" class="ui-content" id="pageone-content">
        <center><h3>Page title</h3></center>
        <!-- All HTML for the page content goes here -->
     </div><!-- /content -->
        
    <div data-role="footer" data-position="fixed">
        <h4>Insert Page footer Here</h4>
    </div><!-- /footer -->

 </div>
  
 </body>
 </html>