原创入门教程：设计JqueryMobile起始页之单页结构

最新推荐文章于 2022-03-25 11:29:56 发布
最新推荐文章于 2022-03-25 11:29:56 发布
阅读量168 收藏 1
点赞数
分类专栏： JqueryMobile 文章标签： javascript jquery html5 web app jquery mobile
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lanmanonline/article/details/115194202
版权

目录

1. 单页结构：班级新闻页面设计... 3

1.1步骤... 3

1.2效果测试... 5

2.作业内容... 6

2.1必做作业... 6

2.2选做作业... 6

 

 

 

 

 

 

1. 单页结构：班级新闻页面设计

1.1步骤

（1）建立一个文件class-news.html，并加入viewpoint、jquery.mobile-1.4.5.min.css、jquery.min.js和jquery.mobile-1.4.5.min.js。

 

 

（2）加入JqueryMobile的页面结构

 

（3）把图片整理到网页相同目录，并命名为非中文的文件名称。

 

 

（4）整理文字，并排版

 

1.2效果测试

 

 

小贝壳大贝壳
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
require.js实现单页web应用（SPA）
少吃点肉的博客
12-22 5297
移动端单页应用基本上是做移动端最流行的的方式了，但是对于很多前端来说，可能仅仅只会一个jquery,而利用jquery实现单页应用会让人痛不欲生。也有人选择使用原生js实现单页应用，但是这样做的方法也是非常笨拙。当下最流行的单页应用无疑是用路由完成，比如angular,react,vue等，都带有其路由组件，方便好用。但是这些技术，很多前端是没有接触过，也没时间学。所以，我就给大家带来了超级简单实用
JQuery Mobile的页面
weixin_34198583的博客
03-29 85
1.JQuery Mobile的页面结构如下图： page：是在浏览器中显示的页面 　　header：创建页面上方的工具栏（常用于标题和搜索按钮） 　　content：定义了页面的内容，比如文本， 图片，表单，按钮等 　　footer：用于创建页面底部工具条 2.页面的加载 JQM的默认链接请求方式是ajax，为了不重新渲染整个页面和减少传输数据量，只是部门加载页面，也就是指...
用jQuery Mobile搭建一个简单的手机页面
weixin_30636089的博客
05-05 362
1.新增html页面。 2.声明html5Document。 3.载入jQuery Mobile Css、jQuery与jQuery Mobile链接库。 4.使用jQuery Mobile定义的html标准、编写网页架构及内容。 向网页中添加jQuery Mobile,添加方法如下： 从CDN引用jQuery Mobile(推荐)　 　　 &lt...
jQueryMobile的组件——页面（page）
bboyjoe的博客
08-27 1883
data-role="page"——代表这个div是一个page,在一个屏幕中只会显示一个page； data-transition——可以定义页面切换的动画效果； ... ... ... page实例
2：最简单的jQuery Mobile页面
yong_bu_ting_zhi的专栏
08-26 159
    前面对jQuery Mobile做了一个简单的介绍，现在就让我们正式开始jQuery Mobile的代码学习吧。     要编写jQuery Mobile页面，我们需要在页面中引入三个核心文件：  （1）本地加载：（可以很轻松的从我们前面下载的文件包中找到） <!DOCTYPE html> <html> <head lang="en"> ...
实战：jQueryMobile开发HTML5移动应用
03-04
随着移动互联世界的到来，目前已发展到多种移动操作系统割据的局面，而开发者则急需要能运用原有的开发知识和...除此以外，jQueryMobile也有很好的扩展性，用户可以很好地对其进行定制修改，本文将指导读者对jQueryM
使用jQuery Mobile框架开发移动端Web App的入门教程
10-22
jQuery Mobile是移动端的基于jQuery的Web前端开发框架,移动设备上的浏览器对HTML5的支持普遍较强,因而jQuery Mobile的UI设计主要针对HTML5,下面就来详细看一下使用jQuery Mobile框架开发移动端Web App的入门教程
jQuery-SPA：jQuery单页应用开发框架
02-03
jQuery-SPA描述基于jQuery的单页应用开发框架。产生原因之前在很多前端群里面发现非北上广深小伙伴在实际工作中，很多还都以jQuery作为主要技术选型，而基于jQuery的单页应用也比较少见，因此抽空将两年前我们前端用...
jQueryMobile之Helloworld与页面切换的方法
10-24
jQuery Mobile 是一个专为移动设备优化的 JavaScript 框架，它提供了丰富的 UI 组件和交互效果，使得开发者能够快速构建具有响应式设计的移动应用程序。在本文中，我们将探讨如何使用 jQuery Mobile 实现“Hello, ...
jQuery Moblie 页面模版（基础）
前端岚枫
01-11 1958
jQuery Mobile 是一个用来构建跨平台移动web应用程序的新UI框架，具有使用简单的特点。在短短几分钟内，你可以创建出能够在当今可用的近乎所有手机、平板电脑、台式机和电子阅读器设备上运行的优化移动应用程序。 jQuery Mobile具备的一些重要特性：   1.  通用访问；   2.  跨所有移动平台的统一UI   3. 简化的标记驱动的开发   4.  渐
完美的jquery页面布局
06-24
完美的jquery页面布局c完美的jquery页面布局c完美的jquery页面布局c完美的jquery页面布局
开源jQuery插件推荐 帮你快速构建单页网站!
eddysoft126的专栏
09-26 189
单页网站将成为网站设计的主要趋势之一。其将设计元素减为最少，将访问者关心的核心内容放在最显眼位置，提高了网站效率。有一些jQuery插件可大大提高单页网站的开发效率，如Single Page Nav、Ascensor.js等。 单一页面网站（单一页面网站设计）是现代网站设计的主要趋势之一。单一页面网站布局将导航、设计元素减为最少，专注于访问者所关心的网站内容。此外，它还显著提高了网站的效率...
jQuery单页滚动页面切换插件右侧圆点
ICode联盟
03-25 102
下载地址 很流行的jQuery单页滚动效果，在同一个页面右侧垂直切换或者鼠标滚轴切换页面。这个单页切换插件包含很多种效果，点击预览查看不同的效果。 dd:
11 个用于构建单页网站的开源 jQuery 插件
weixin_33872566的博客
08-21 99
2019独角兽企业重金招聘Python工程师标准>>> ...
HTML5移动开发之路 jQueryMobile页面间参数传递
热门推荐
albert的专栏
07-04 1万+
在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数，而在多页模版中不需要与服务器进行通信，通常在多页模版中有以下三种方法来实现页面间的参数传递。 1、GET方式：在前一个页面生成参数并传入下一个页面，然后在下一个页面中进行GET内容解析。 2、通过HTML5的Web Storage进行参数传递。 3、建立当前页面变量，在前一个页面将所需传递的参数内容赋值到变量中，
JqueryMobile之页面布局
AnAnCow
11-03 1060
最近公司的一个项目需要设计到移动端的页面，网上查了一下JqueryMobile是一个不错的移动端的框架，但是之前又没有接触过只有网上查找一些资料学习，顺便就把我学习的过程记录一下当然也希望能给看到这篇文章的朋友一些帮助。 理论的这些我这里就不说了，网上一搜多的很，我就直接记录使用的方法和步骤。 在使用JqueryMobile 我们可以在官网下载Zip File: jquery.mobile-1...
JQuery或Zepto单页应用路由Router
iteye_11148的博客
08-09 1875
之前一直都是在用AngularJs在做前台开发，这几天要做移动版页面，所以前端采用了Zepto+WEUI CSS来做，主要是因为Zepto比较小巧，用起来也JQuery一样锋利。 用AngularJs时我们一直都是用ui-router做单页应用，为了保持PC端和移动链接地址一致，所以移动端也要采用ui-router风格的单页应用模式。找了一圈，发现vipspa可以实现这个功能，但跟我想要的...
使用 jQuery Mobile 与 HTML5 开发 Web App —— 17 HTML5 离线缓存
Ryan Z 的技术日志
08-10 611
本文要介绍的，是 HTML5 离线网络应用程序的特性，离线网络应用程序在 W3C 中的实际名称是 "Offline Web applications" ，也称离线缓存。当用户打开浏览器时，浏览器会将一个列表中指定的资源都下载并储存在本地。下次当用户再访问这个网络程序时，浏览器会自动引用本地缓存中相应的文件，而不会再从网络下载这些资源。不管离线网络应用程序是否专为 Web Apps 而设，但这对于
jquery mobile 应用案例
GS2016的博客
03-05 8444
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name=&
jquery mobile社区页面代码
最新发布
06-03
这段代码展示了一个简单的 jQuery Mobile 页面，其中包含一个页头、页脚和内容区域，并使用了 jQuery Mobile 的列表视图组件来展示最新消息和热门文章。你可以将这段代码复制到一个HTML文件中并在浏览器中打开它，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

小贝壳大贝壳

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

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

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

打赏作者

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

抵扣说明：

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

余额充值