jQuery Mobile - 安装程序

在本章中,我们将讨论如何安装和设置jQuery Mobile.

下载jQuery Mobile

当你打开链接 jquerymobile.com/,您将看到有两个选项可供下载jQuery移动库.

jQuery Mobile

  • 自定义下载 : 单击此按钮可下载库的自定义版本.

  • 最新稳定 : 单击此按钮可获得稳定和最新版本的jQuery移动库.

使用下载构建器自定义下载

使用下载构建器,您可以创建自定义构建,仅包含所需库的部分.当您下载这个新的jQuery Mobile自定义版本时,您将看到以下屏幕.

 jQuery Mobile

您可以根据需要选择库,然后单击构建我的下载按钮.

稳定下载

单击 Stable 按钮,该按钮直接指向包含CSS和JQuery文件的ZIP文件,用于最新版本的jQuery移动库.将ZIP文件内容解压缩到jQuery移动目录.

此版本包含所有文件,包括所有依赖项,大量演示集,甚至库的单元测试套件.此版本有助于入门.

从CDN下载jQuery库

CDN(内容交付网络)是一个服务器网络,旨在提供服务文件给用户.如果您在网页中使用CDN链接,则会将托管文件的责任从您自己的服务器转移到一系列外部服务器.这也提供了一个优势,如果您的网页的访问者已经从同一CDN下载了jQuery mobile的副本,则不必重新下载.您可以将以下CDN文件包含在HTML文档中.

//The jQuery Mobile CSS theme file (optional, if you are overriding the default theme)
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

//The jQuery core JavaScript file
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>

//The jQuery Mobile core JavaScript file
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

在本教程中,我们使用的是CDN版本的库.我们使用AMPPS(AMPPS是Apache,MySQL,MongoDB,PHP,Perl和Python的WAMP,MAMP和LAMP堆栈)服务器来执行我们的所有示例.

示例

以下是jQuery Mobile的一个简单示例.

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   
      
   <body>
      <div data-role = "page" id = "pageone">
         <div data-role = "header">
            <h1>Header Text</h1>
         </div>

         <div data-role = "main" class = "ui-content">
            <h2>Welcome to TutorialsPoint</h2>
         </div>

         <div data-role = "footer">
            <h1>Footer Text</h1>
         </div>
      </div>
   </body>
</html>

以上代码的详细信息为 :

  • 此代码在head元素内指定.

<meta name = "viewport" content = "width = device-width, initial-scale = 1">

    • 视口用于指定(通过浏览器)显示页面缩放级别和尺寸.

    • content ="width = device-width"用于设置像素宽度页面或屏幕设备.

    • initial-scale = 1设置首次加载页面时的初始缩放级别.

  • 包含以下CDN

<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

  • < body>内的内容tag是浏览器中显示的页面.

<div data-role = "page">
   ...
</div>

  • data-role ="header"创建标题在页面顶部.

  • data-role ="main"用于定义页面内容.

  • data-role ="footer"在页面底部创建页脚.

  • class ="ui-content"在页面内容中包含填充和边距.

输出

让我们执行以下步骤,了解上述代码的工作原理和减号;

  • 将上述html代码保存为服务器根文件夹中的 simple_example.html 文件.

  • 打开此HTML文件为http://localhost/simple_example.html,将显示以下输出.