原创入门教程：我的第一个JqueryMobile页面

最新推荐文章于 2021-06-15 23:58:22 发布
最新推荐文章于 2021-06-15 23:58:22 发布
阅读量719 收藏 7
点赞数
分类专栏： JqueryMobile 文章标签： web app html5 jquery 前端 jquery mobile
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lanmanonline/article/details/115193903
版权

 

目录

1.什么是Jquery mobile. 3

1.1简介... 3

1.2官方网站... 3

1.3学习网站... 5

2.下载Jquery mobile. 7

3.用DW设计第一个Jquery mobile页面... 8

3.1手动设计... 8

3.2自动生成... 11

4.用CDN配置第一个Jquery mobile页面... 14

4.1官方CDN.. 14

4.2百度CDN.. 15

 

 

 

1.什么是Jquery mobile

1.1简介

jQuery Mobile 是用于创建移动 Web 应用的前端开发框架。

jQuery Mobile 可以应用于智能手机与平板电脑。

jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页。

jQuery Mobile 是针对触屏智能手机与平板电脑的网页开发框架。

jQuery Mobile 工作于所有主流的智能手机和平板电脑上：

 

jQuery Mobile 构建于 jQuery 以及 jQuery UI类库之上，如果您了解 jQuery，您可以很容易的学习 jQuery Mobile。

jQuery Mobile 使用了极少的 HTML5、CSS3、JavaScript 和 AJAX 脚本代码来完成页面的布局渲染。

通过使用jQuery Mobile 可以 "写更少的代码，做更多的事情" : 它可以通过一个灵活及简单的方式来布局网页，且兼容所有移动设备。

 

1.2官方网站

网址：https://jquerymobile.com/

 

自动生成主题的网页：https://themeroller.jquerymobile.com/

 

官方例子网页：

https://demos.jquerymobile.com/1.4.5/icons/#Blackvs.whiteiconsets

 

 

1.3学习网站

Jquery mobile菜鸟教程

 https://www.runoob.com/jquerymobile/jquerymobile-tutorial.html

 

Jquery mobile  W3C教程

https://www.w3school.com.cn/jquerymobile/index.asp

 

视频教程《jQM Web App –列车时刻表》 https://www.imooc.com/learn/207

 

 

2.下载Jquery mobile

网址：https://jquerymobile.com/download/

 

 

3.用DW设计第一个Jquery mobile页面

3.1手动设计

第一步：在Adobe Dreamweaver配置一个站点

 

第二步：创建一个HTML网页并保存

 

 

第三步：拿到Juery mobile的文件，并放到网站目录中

 

 

 

最后网站文件夹如下

 

第四步：引入Juery mobile的文件

 

 

3.2自动生成

第一步：配置好站点

略

 

第二步：新建一个HTML网页

略

第三步：手动拉动相应的菜单

 

 

 

 

 

 

第四步：在浏览器中查看效果

 

 

4.用CDN配置第一个Jquery mobile页面

使用 jQuery 内核, 你不需要在电脑上安装任何东西; 你仅仅需要在你的网页中加载以下层叠样式 (.css) 和 JavaScript 库 (.js) 就能够使用 jQuery Mobile:

 

4.1官方CDN

<head>

 

<!-- meta使用viewport以确保页面可自由缩放 -->

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

 

<!-- 引入 jQuery Mobile 样式 -->

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

 

<!-- 引入 jQuery 库 -->

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

 

<!-- 引入 jQuery Mobile 库 -->

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

 

</head>

 

4.2百度CDN

<head>

 

<!-- meta使用viewport以确保页面可自由缩放 -->

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

 

<!-- 引入 jQuery Mobile 样式 -->

<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">

 

<!-- 引入 jQuery 库 -->

<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

 

<!-- 引入 jQuery Mobile 库 -->

<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

 

</head>

 

 

 

小贝壳大贝壳
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
使用DreamWeaverCS6创建jQueryMobile移动站点
CodingAlarm的专栏
06-19 2960
1.打开DW6，新建站点 2.点击文件-->新建，选择 示例中的页-->Mobile起始页-->jQuery Mobile(本地) 3.ctrl+s 把它保存到你刚才建的站点下，名字为index.html，保存后提示你需要导入jquery-mobile相关库和图片资源，点击“复制”即可。 *你的站点文件夹中一定要包含index.html，不然phonegap转
jQuery mobile从入门到放弃
热门推荐
Dorui的博客
01-31 1万+
之前只知道jquery有个专门做移动端的插件，今天做移动端项目的时候了解了下它的事件，简单实用，触摸滑动基本都有，因为之前小组默认都是jQuery来写代码来着，所以从官网下载出来准备直接开动，但一直到从中午到晚上，他让我感觉到越来越绝望，现在，我想把我遇到的问题写出来，大家可以参考一下 问题1：我在两个官网分别下载最新的插件，jquery.mobile-1.4.5.min.js与jquery
Jquery mobile网址
02-11 104
春节期间一直想好好看看Jquery的书，又感叹自己买的7寸安卓板的没用，就着机会，看了看jquery mobile，其网址：http://jquerymobile.com/。 其demo的地址为：http://jquerymobile.com/demos/1.2.0/#/demos/1.2.0/docs/about/getting-started.html。 看上去挺简单的！改天试试...
jQuery Mobile页面高级设计－制作列表
qq_46582421的博客
04-19 762
使用jQuery Mobile实现一个商品列表页面 在根据项目要求：创建两个页面，在sy7-1.html中分类显示商品信息，可以通过关键字进行搜索，顶部和底部链接加上相关图标，当用户选择商品时，跳转到商品详情页。 1-先写好大概框架和头部，固定好页面。 2-第二步 3-尾部 最后一个，是点击后的反应 结果 点击后的效果 ...
Jquery Mobile教程
04-16
jQuery Mobile是一个使用HTML、CSS及JavaScript为架构，支持所有流行移动设备平台的统一的用户界面系统。 jQuery Mobile 使用了jQuery 核心，此外还包含一个JavaScript 库、一个CSS3 样式表，以及一些资源图片。 jQuery Mobile 和桌面端的jQuery UI 类似，即它同样只是一个UI 框架。
入门手机端html,使用jQuery Mobile框架开发移动端Web App的入门教程
weixin_30580403的博客
06-15 668
一.jQuery Mobile 的渐进增强设计与浏览器支持根据维基百科( Wikipedia ) 的解释，渐进增强的设计主要包括以下几点basic content should be accessible to all web browsers (所有浏览器都应能访问全部基础的内容)basic functionality should be accessible to all web browse...
jQuery Mobile 高级设计模板
weixin_30952103的博客
10-08 215
jQuery Mobile 高级设计模板 转载于:https://www.cnblogs.com/zhujiabin/p/4861334.html
JqueryMobile快速上手教程－实训任务书01-我的第一个JqueryMobile页面
03-25
JqueryMobile快速上手教程，教学资源，拿来就用，可以上课作为任务书，也可以作为自学习文档
开发者必读jQueryMobile入门教程.pdf
09-29
jQuery Mobile 是一个专门为移动设备设计的前端框架，它由 jQuery 社区开发，旨在简化跨平台的移动 web 应用程序开发。这个框架的核心理念是实现渐进增强，确保在各种移动设备上都能提供良好的用户体验，同时兼顾...
使用jQuery Mobile框架开发移动端Web App的入门教程
10-22
jQuery Mobile是移动端的基于jQuery的Web前端开发框架,移动设备上的浏览器对HTML5的支持普遍较强,因而jQuery Mobile的UI设计主要针对HTML5,下面就来详细看一下使用jQuery Mobile框架开发移动端Web App的入门教程
jQuery_Mobile_教程集合
03-21
jQuery Mobile[1-2]是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说：能开发这个项目，我们非常兴奋。移动Web太需要一个跨浏览器的框架，让开发人员开发出真正的移动Web网站。 今天，jQuery 驱动着 Internet 上的大量网站，在浏览器中提供动态用户体验，促使传统桌面应用程序越来越少。现在，主流移动平台上的浏览器功能都赶上了桌面浏览器，因此 jQuery 团队引入了 jQuery Mobile（或 JQM）。JQM 的使命是向所有主流移动浏览器提供一种统一体验，使整个 Internet 上的内容更加丰富 — 不管使用哪种查看设备。 JQM 的目标是在一个统一的 UI 中交付超级 JavaScript 功能，跨最流行的智能手机和平板电脑设备工作。与 jQuery 一样，JQM 是一个在 Internet 上直接托管、免费可用的开源代码基础。事实上，当 JQM 致力于统一和优化这个代码基时，jQuery 核心库受到了极大关注。这种关注充分说明，移动浏览器技术在极短的时间内取得了多么大的发展。 与 jQuery 核心库一样，您的开发计算机上不需要安装任何东西；只需将各种 *.js 和 *.css 文件直接包含到您的 web 页面中即可。这样，JQM 的功能就好像被放到了您的指尖，供您随时使用。
jquery Mobile入门—多页面切换示例学习
10-27
在jQuery Mobile中，多页面切换是构建移动应用的一个核心特性，它使得用户可以在单个HTML文档内轻松地在多个“页面”之间导航，无需实际加载新的网页。这种设计模式优化了移动设备上的用户体验，减少了页面加载时间...
使用DreamweaverCS6的PhoneGap功能构建jQuery Mobile
weixin_33850015的博客
06-11 141
adobe官方Dreamweaver cs5.5教程:http://www.adobe.com/cn/devnet/dreamweaver/articles/phonegap-mobile-app-pt2.html  本方是使用Dreamweaver CS6，官方教程：http://helpx.adobe.com/cn/dreamweaver/using/packaging-web-apps.h...
jQuery Mobile 入门图文教程
09-17 512
你每天都会对着它讲话，和它玩游戏，用它看新闻——没错，它就是你裤兜里的智能手机。android，黑莓还是iphone？为了让你清楚意识到究竟哪些才算是智能手机，我在下面总结了一个智能手机系统/设备的列表： Apple iPhone/iPod Touch Google Android RIM BlackBerry/Playbook OS Nok
jQuery Mobile简单使用说明
YFCMS博客
05-24 797
jQuery Mobile使用指南 简介：jQuery Mobile框架可以轻松的帮助我们实现非常好看的、可跨设备的Web应用程序。我们将后续的介绍中向大家介绍大量的代码及实例。 jQuery一直以来都是非常流行的富客户端及Web应用程序开发中使用的JavaScript类库,然而一直以来它都是为桌面浏览器设计的，没有特别为移动应用程序设计。 jQuery Mobile是一个新的项目用来添补在
jquerymobile动态创建页面
weixin_33781606的博客
10-19 92
By default, the first element found with [data-role=page] will become the first page. Ideally, those pages are in the markup when it arrives from the server, as that'll be the only way t...
jQuery Mobile中的超链接
hanhf的专栏
10-14 1696
jQuery Mobile中出现Error Loading Page的解决办法
jQuery Mobile入门
weixin_33913377的博客
07-17 217
      简介：jQuery Mobile框架可以轻松的帮助我们实现非常好看的、可跨设备的Web应用程序。我们将后续的介绍中向大家介绍大量的代码及实例。       jQuery一直以来都是非常流行的富客户端及Web应用程序开发中使用的JavaScript类库,然而一直以来它都是为桌面浏览器设计的，没有特别为移动应用程序设计。 jQuery Mobile是一个新的项目用来添补在移动设备应用上...
jquery mobile社区页面代码
最新发布
06-03
以下是一个简单的 jQuery Mobile 社区页面的示例代码： ```html <!DOCTYPE html> <html> <head> <title>jQuery Mobile 社区页面</title> <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"> <div data-role="header" data-theme="b"> <h1>jQuery Mobile 社区</h1> <a href="#" data-icon="back" data-rel="back">返回</a> </div> <div data-role="content" data-theme="b"> <h2>最新消息</h2> <ul data-role="listview" data-inset="true"> <li><a href="#">jQuery Mobile 1.5.0 发布了！</a></li> <li><a href="#">jQuery Mobile 新网站上线了！</a></li> <li><a href="#">jQuery Mobile 社区版发布了！</a></li> </ul> <h2>热门文章</h2> <ul data-role="listview" data-inset="true"> <li><a href="#">如何使用 jQuery Mobile 构建响应式网站</a></li> <li><a href="#">使用 jQuery Mobile 构建移动端电商网站</a></li> <li><a href="#">jQuery Mobile 优化技巧</a></li> </ul> </div> <div data-role="footer" data-theme="b"> © 2021 jQuery Mobile 社区 </div> </div> </body> </html> ``` 这段代码展示了一个简单的 jQuery Mobile 页面，其中包含一个页头、页脚和内容区域，并使用了 jQuery Mobile 的列表视图组件来展示最新消息和热门文章。你可以将这段代码复制到一个HTML文件中并在浏览器中打开它，然后就可以看到一个简单的 jQuery Mobile 社区页面了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小贝壳大贝壳

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值