JqueryMobile之页面布局

最新推荐文章于 2022-10-12 08:24:48 发布

咖啡程序员

最新推荐文章于 2022-10-12 08:24:48 发布

阅读量1k

点赞数

分类专栏： JqueryMobile

本文链接：https://blog.csdn.net/qq_42262444/article/details/83686234

版权

JqueryMobile 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近公司的一个项目需要设计到移动端的页面，网上查了一下JqueryMobile是一个不错的移动端的框架，但是之前又没有接触过只有网上查找一些资料学习，顺便就把我学习的过程记录一下当然也希望能给看到这篇文章的朋友一些帮助。

理论的这些我这里就不说了，网上一搜多的很，我就直接记录使用的方法和步骤。

在使用JqueryMobile 我们可以在官网下载Zip File: jquery.mobile-1.4.5.zip那么解压后我们只需要jquery.mobile-1.4.5.css和jquery.mobile-1.4.5.min.js这两个文件

https://jquerymobile.com/download/

1.在我们的页面中需要先在<head></head>标签内加入如下代码

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

<link rel="stylesheet" href="/tjwxqyh/css/jquery.mobile-1.4.5.css" type="text/css">

<script src="/tjwxqyh/js/jquery-1.9.1.min.js"></script>

<script src="/tjwxqyh/js/jquery.mobile-1.4.5.min.js"></script>

2.就是在<body></body>标签中的页面布局

代码如下：

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- meta使用viewport以确保页面可自由缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 引入 jQuery Mobile 样式 -->
<link rel="stylesheet" href="/tjwxqyh/css/jquery.mobile-1.4.5.css"
	type="text/css">
<script src="/tjwxqyh/js/jquery-1.9.1.min.js"></script>

<!-- 引入 jQuery Mobile 库 -->
<script src="/tjwxqyh/js/jquery.mobile-1.4.5.min.js"></script>

<title>开始使用layui</title>

</head>
<body>
	<div data-role="page">
	
		<!-- 头部 -->
		<div data-role="header">
		
		</div>
		<!-- 内容 -->
		<div role="main" class="ui-content">
		
		</div>
		<!-- 底部 -->
		<div data-role="footer">
		
		</div>
	</div>



</body>
</html>

咖啡程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JqueryMobile之页面布局

最近公司的一个项目需要设计到移动端的页面，网上查了一下JqueryMobile是一个不错的移动端的框架，但是之前又没有接触过只有网上查找一些资料学习，顺便就把我学习的过程记录一下当然也希望能给看到这篇文章的朋友一些帮助。理论的这些我这里就不说了，网上一搜多的很，我就直接记录使用的方法和步骤。在使用JqueryMobile 我们可以在官网下载Zip File: jquery.mobile-1...
复制链接

扫一扫