在本章中,我们将讨论如何安装和设置jQuery Mobile.
当你打开链接 jquerymobile.com/,您将看到有两个选项可供下载jQuery移动库.
自定义下载 : 单击此按钮可下载库的自定义版本.
最新稳定 : 单击此按钮可获得稳定和最新版本的jQuery移动库.
使用下载构建器,您可以创建自定义构建,仅包含所需库的部分.当您下载这个新的jQuery Mobile自定义版本时,您将看到以下屏幕.
您可以根据需要选择库,然后单击构建我的下载按钮.
单击 Stable 按钮,该按钮直接指向包含CSS和JQuery文件的ZIP文件,用于最新版本的jQuery移动库.将ZIP文件内容解压缩到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,将显示以下输出.