【JQuery Mobile移动应用开发实战】JQuery Mobile基础——JQuery Mobile的布局

最新推荐文章于 2024-04-26 16:33:52 发布
最新推荐文章于 2024-04-26 16:33:52 发布
阅读量1.4k 收藏 10
点赞数
文章标签： jquery ui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lht964249279/article/details/122792625
版权

文章目录

6. JQuery Mobile的布局

本章知识点主要包括：

  • 将页面元素并排放置的布局方法
  • 利用折叠的方式对页面的元素进行隐藏或展示的方法
  • 利用元素折叠的方式实现手风琴效果的方法

6.1 改良后的QQ登录界面

QQ登录界面并列的按钮：

<!DOCTYPE html>     
  
<head>     
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Positioning Example</title>     
<meta name="viewport" content="width=device-width, initial-scale=1"/>     
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />     
<script src="../script/jquery-2.1.4.min.js"></script>     
<script src="../script/jquery.mobile-1.4.5.min.js"></script>     
</head>               
<body>
	<div data-role="page">
		<div data-role="content">
			<img src="http://img.itful.com/uploads/allimg/091209/0012204349-0.png" style="width:50%; margin-left:25%;"/>
			<form action="#" method="post"> 
				<input type="text" name="zhanghao" id="zhanghao" value="账号："  />
				<input type="text" name="mima" id="mima" value="密码："  />
				<fieldset class="ui-grid-a">
					<div class="ui-block-a">
						<a href="#" data-role="button" data-theme="b" id="login">登录</a>
					</div>
					<div class="ui-block-b">
						<a href="#" data-role="button" data-theme="e" id="forget">忘记密码</a>
					</div>
				</fieldset>
				<div class="ui-grid-solo">
			<div class="ui-block-a">
				<button type="button" data-theme="e">新加入一个按钮</button>
			</div>
		</div>

			</form>
		</div>
    </div>
</body>
</html>

效果如下：
在这里插入图片描述
fieldset标签是JQuery Mobile专门用来为控件分栏的标签。fieldset有一个属性class=“ui-grid-a”，该属性规定了一栏中所包含控件的数量，由于每栏中控件数量最少是两个，因此用a来代表两个，b代表一行包括三个控件。

在里面的div标签中有属性class="ui-block-a"和class=“ui-block-b”，它们表示该标签占据了所在行中的第一个和第二个位置，假如分成了三栏甚至四栏，那么就会有对应的class="ui-block-c"和class=“ui-block-d”。

在下面的单行按钮代码段加入< div class=“ui-grid-solo” >声明一个空白的分栏来使独立的按钮两侧增加一段较小的缩进，使其与分栏的按钮对齐。

6.2 一种简洁的通讯录设计

上一节展示了使用fieldset标签分栏显示内容的方法，但是每一行中各个栏目的宽度都是平均分配的。

JQuery Mobile是基于JQuery的开源框架，对每一个控件的操作都是透明的，完全可以通过修改CSS来改变JQuery Mobile对原有控件的定义，以改变它们的美观。

利用CSS修改分栏布局：

<!DOCTYPE html>     
 
<head>     
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Positioning Example</title>     
<meta name="viewport" content="width=device-width, initial-scale=1"/>     
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />     
<script src="../script/jquery-2.1.4.min.js"></script>     
<script src="../script/jquery.mobile-1.4.5.min.js"></script>  
<style>
.ui-grid-b .ui-block-a
{
	width:20%;
}
.ui-grid-b .ui-block-b
{
	width:60%;
}
.ui-grid-b .ui-block-c
{
	width:20%;
}
.ui-bar-c
{
	height:60px;
}
.ui-bar-c h1
{
	font-size:20px;
	line-height:26px;
}
</style>   
</head>               
<body>
	<div data-role="page">
		<div data-role="content">
			<fieldset class="ui-grid-b">
				<div class="ui-block-a">
					<div class="ui-bar ui-bar-c">
						<img src="images/head1.jpg" width="100%" height="100%"></img>
					</div>
				</div>
				<div class="ui-block-b">
					<div class="ui-bar ui-bar-c">
						<h1>擎天柱</h1>
						<p>18842681111</p>
					</div>
				</div>
				<div class="ui-block-c">
					<div class="ui-bar ui-bar-c">
						<img src="images/11.png" width="100%" height="100%"></img>
					</div>
				</div>
				<div class="ui-block-a">
					<div class="ui-bar ui-bar-c">
						<img src="images/head2.jpg" width="100%" height="100%"></img>
					</div>
				</div>
				<div class="ui-block-b">
					<div class="ui-bar ui-bar-c">
						<h1>威震天</h1>
						<p>18842681111</p>
					</div>
				</div>
				<div class="ui-block-c">
					<div class="ui-bar ui-bar-c">
						<img src="images/11.png" width="100%" height="100%"></img>
					</div>
				</div>
				<div class="ui-block-a">
					<div class="ui-bar ui-bar-c">
						<img src="images/head3.jpg" width="100%" height="100%"></img>
					</div>
				</div>
				<div class="ui-block-b">
					<div class="ui-bar ui-bar-c">
						<h1>大黄蜂</h1>
						<p>18842681111</p>
					</div>
				</div>
				<div class="ui-block-c">
					<div class="ui-bar ui-bar-c">
						<img src="images/11.png" width="100%" height="100%"></img>
					</div>
				</div>
				<div class="ui-block-a">
					<div class="ui-bar ui-bar-c">
						<img src="images/head4.jpg" width="100%" height="100%"></img>
					</div>
				</div>
				<div class="ui-block-b">
					<div class="ui-bar ui-bar-c">
						<h1>令狐冲</h1>
						<p>18842681111</p>
					</div>
				</div>
				<div class="ui-block-c">
					<div class="ui-bar ui-bar-c">
						<img src="images/11.png" width="100%" height="100%"></img>
					</div>
				</div>
			</fieldset>
		</div>
    </div>
</body>
</html>

效果如下：
在这里插入图片描述
上述代码将每一行分成了三栏，这三栏所占比例分别为20%、60%、20%。JQuery Mobile通过读取CSS中ui-block-a、ui-block-b和ui-block-c处样式对div样式进行渲染，可以重写这三处样式。在使用分栏布局时，如果不是各栏目中使用相同的元素，则一定要设置栏目的高度。

6.3 完美实现九宫格

利用JQuery Mobile实现九宫格界面：

<!DOCTYPE html>     

<head>     
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>九宫格</title>     
<meta name="viewport" content="width=device-width, initial-scale=1"/>     
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />     
<script src="../script/jquery-2.1.4.min.js"></script>     
<script src="../script/jquery.mobile-1.4.5.min.js"></script>  
</head>               
<body>
	<div data-role="page">
		<div data-role="header" data-position="fixed">
			<a href="#">返回</a>    
			<h1>九宫格界面</h1>    
			<a href="#">设置</a>
		</div>
		<div data-role="content">
			<fieldset class="ui-grid-b">
				<div class="ui-block-a">
					<img src="images/11.png" width="100%" height="100%"/>
				</div>
				<div class="ui-block-b">
					<img src="images/12.png" width="100%" height="100%"/>
				</div>
				<div class="ui-block-c">
					<img src="images/13.png" width="100%" height="100%"/>
				</div>
				<div class="ui-block-a">
					<img src="images/14.png" width="100%" height="100%"/>
				</div>
				<div class="ui-block-b">
					<img src="images/15.png" width="100%" height="100%"/>
				</div>
				<div class="ui-block-c">
					<img src="images/16.png" width="100%" height="100%"/>
				</div>
				<div class="ui-block-a">
					<img src="images/17.png" width="100%" height="100%"/>
				</div>
				<div class="ui-block-b">
					<img src="images/18.png" width="100%" height="100%"/>
				</div>
				<div class="ui-block-c">
					<img src="images/19.png" width="100%" height="100%"/>
				</div>
			</fieldset>
		</div>
    </div>
</body>
</html>

效果如下：
在这里插入图片描述
本例中每个栏目仅包含一张图片，而每张图片的尺寸是一样的，因此没有必要通过设置栏目高度来保证布局完整。

6.4 可以折叠的QQ好友列表

实现可折叠的QQ好友列表：

<!DOCTYPE html>     
 
<head>     
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可以折叠的好友列表</title>     
<meta name="viewport" content="width=device-width, initial-scale=1"/>     
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />     
<script src="../script/jquery-2.1.4.min.js"></script>     
<script src="../script/jquery.mobile-1.4.5.min.js"></script>    
</head>   
<style>
.ui-grid-a .ui-block-a
{
	width:20%;
}
.ui-grid-a .ui-block-b
{
	width:80%;
}
.ui-bar
{
	height:60px;
}
.ui-block-b .ui-bar-c h1
{
	font-size:20px;
	line-height:26px;
}
.ui-block-b .ui-bar-c p
{
	line-height:20px;
}
</style>            
<body>
	<div data-role="page">
		<div data-role="content">
			 <div data-role="collapsible-set">
				<div data-role="collapsible" data-collapsed="false">
					<h3>变形金刚</h3>
					<p>
						<fieldset class="ui-grid-a">
							<div class="ui-block-a">
								<div class="ui-bar ui-bar-c">
									<img src="images/head1.jpg" width="100%" height="100%" />
								</div>
							</div>
							<div class="ui-block-b">
								<div class="ui-bar ui-bar-c">
									<h1>擎天柱</h1>
									<p>楼下的被我干掉了</p>
								</div>
							</div>
							<div class="ui-block-a">
								<div class="ui-bar ui-bar-c">
									<img src="images/head2.jpg" width="100%" height="100%" />
								</div>
							</div>
							<div class="ui-block-b">
								<div class="ui-bar ui-bar-c">
									<h1>霸天虎</h1>
									<p>其实擎天柱根本打不过我</p>
								</div>
							</div>
						</fieldset>
					</p>
				</div>  
				<div data-role="collapsible" data-collapsed="true">
					<h3>黑名单</h3>
					<p>
						<fieldset class="ui-grid-a">
							<div class="ui-block-a">
								<div class="ui-bar ui-bar-c">
									<img src="images/head3.jpg" width="100%" height="100%" />
								</div>
							</div>
							<div class="ui-block-b">
								<div class="ui-bar ui-bar-c">
									<h1>大黄蜂</h1>
									<p>你们慢慢打 我躲起来</p>
								</div>
							</div>
							<div class="ui-block-a">
								<div class="ui-bar ui-bar-c">
									<img src="images/head4.jpg" width="100%" height="100%" />
								</div>
							</div>
							<div class="ui-block-b">
								<div class="ui-bar ui-bar-c">
									<h1>令狐冲</h1>
									<p>我的乔恩妹子在哪里</p>
								</div>
							</div>
						</fieldset>
					</p>
				</div>   	
			 </div>
		</div>
    </div>
</body>
</html>

效果如下：
在这里插入图片描述
data-role="collapsible-set"定义了该部分是可折叠的，但并不是指此标签作为一个整体来折叠，而是将它作为一个容器。data-role=“collapsible” data-collapsed="false"这两个标签的内容才是作为最小单位被折叠的。

仅仅能折叠还是不够的，因为当所有的内容都被折叠隐藏了，还需要一个标识告诉用户被隐藏的是什么内容。这就需要为每一处折叠的内容做一个标题。同一时刻只有一组内容可以被展开。

将< div data-role=“collapsible-set” >去掉就会发现两个折叠项可以同时展开。因为collapsible-set并没有折叠内容的作用，它只是容器，有两个作用：

  • 将折叠的栏目按组容纳在其中；
  • 保证其中的内容同时仅有一项是被展开的。

因此只要把这部分删去就可以同时展开了。

6.5 展开图标的设置

<!DOCTYPE html>     
    
<head>     
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可以折叠的好友列表</title>     
<meta name="viewport" content="width=device-width, initial-scale=1"/>     
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />     
<script src="../script/jquery-2.1.4.min.js"></script>     
<script src="../script/jquery.mobile-1.4.5.min.js"></script>  
</head>               
<body>
	<div data-role="page">
		<div data-role="content">
			 <div data-role="collapsible" data-mini="true">
				<h4>这是一个小号的折叠标题</h4>
				<ul data-role="listview">
					<li>List item 1</li>
					<li>List item 2</li>
					<li>List item 3</li>
				</ul>
			</div>
			<div data-role="collapsible" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
				<h4>图标改变了</h4>
				<ul data-role="listview" data-inset="false">
					<li>list item 1</li>
					<li>list item 2</li>
					<li>list item 3</li>
				</ul>
			</div>
			<div data-role="collapsible" data-iconpos="right">
				<h4>仔细看图标的位置</h4>
				<ul data-role="listview">
					<li>List item 1</li>
					<li>List item 2</li>
					<li>List item 3</li>
				</ul>
			</div>
		</div>
    </div>
</body>
</html>

效果如下：
在这里插入图片描述

6.6 两种不同的Metro效果实现思路

Metro是微软从纽约交通站牌中获得灵感而创造的一种简洁的页面，它的本意是以文字的形式承载更多是信息。

  1. 完全利用分栏布局的方法

    一种实现Metro界面的思路：

    <!DOCTYPE html>     
   
<head>     
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>九宫格</title>     
<meta name="viewport" content="width=device-width, initial-scale=1"/>     
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />     
<script src="../script/jquery-2.1.4.min.js"></script>     
<script src="../script/jquery.mobile-1.4.5.min.js"></script>  
</head> 
<style>
.ui-grid-a .ui-block-a
{
	margin:1%;
	width:48%;
}
.ui-grid-a .ui-block-b
{
	margin:1%;
	width:48%;
}
</style>              
<body>
	<div data-role="page" data-theme="a">
		<fieldset class="ui-grid-a">
			<div class="ui-block-a">
				<img src="images/metro.png" width="100%" height="100%"/>
			</div>
			<div class="ui-block-b">
				<img src="images/metro.png" width="100%" height="100%"/>
			</div>
			<div class="ui-block-a">
				<img src="images/metro.png" width="100%" height="100%"/>
			</div>
			<div class="ui-block-b">
				<img src="images/metro.png" width="100%" height="100%"/>
			</div>
			<div class="ui-block-a">
				<img src="images/metro.png" width="100%" height="100%"/>
			</div>
			<div class="ui-block-b">
				<img src="images/metro.png" width="100%" height="100%"/>
			</div>
		</fieldset>
    </div>
</body>
</html>

    效果如下：
    在这里插入图片描述
    其思路非常简单，就是利用JQuery Mobile的分栏功能将每一行分为两部分，然后利用分栏时每一栏的高度恰好满足其中所填充的内容高度这一特点，在其中放入一张大约是正方形的图片，这就形成了Metro的布局。在实际使用中还可以通过修改每一栏所占比例来调整色块所排列的位置。

  2. 利用纯CSS调整色块尺寸的方法

    利用CSS实现Metro界面的方法：

    <!DOCTYPE html>     
 
<head>     
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
<meta name="viewport" content="width=device-width, initial-scale=1"/>  
<!--<script src="cordova.js"></script>-->   
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />     
<script src="../script/jquery-2.1.4.min.js"></script>     
<script src="../script/jquery.mobile-1.4.5.min.js"></script>   
<script type="text/javascript">
$(document).ready(function()
{
	$top_height=$("div[data-role=header]").height();
	$bottom_height=$("div[data-role=footer]").height();
	$body_height=$(window).height()-$top_height-$bottom_height;

	
	$body_height=$body_height-10;
	$body_height=$body_height+"px";
	$("div[data-role=metro_body]").width("100%").height($body_height);
});
</script>  
<style type="text/css">
*{ margin:0px; padding:0px;}
.metro_color1{ background-color:#ef9c00;}
.metro_color2{ background-color:#2ebf1b;}
.metro_color3{ background-color:#00aeef;}
.metro_color4{ background-color:#ed2b84;}
.metro_rec{ width:48%; height:30%; float:left; margin:1%;}
</style>
</head>               
<body>
	<div data-role="page" data-theme="a">
        <div data-role="metro_body">	
        	<div class="metro_color1 metro_rec">
            </div>
			<div class="metro_color2 metro_rec">
            </div>
			<div class="metro_color3 metro_rec">
            </div>
			<div class="metro_color4 metro_rec">
            </div>
			<div class="metro_color1 metro_rec">
            </div>
			<div class="metro_color2 metro_rec">
            </div>
        </div>
	</div>
</body>
</html>

    效果如下：
    在这里插入图片描述
    为色块设计了四种颜色用来对它们加以区分。规定了每个色块的宽度为整个屏幕宽度的48%、高度为外侧容器的30%。接下来就是根据需要设置色块的高度了，通过JavaScript代码实现。JavaScript代码中获取了页面可用部分的高度(屏幕高度减去头部栏和尾部栏所占部分)，可以直接将这个高度设置为6个色块外部容器的高度，然后根据CSS设置，每个色块占据其中的30%，这就保证了屏幕的色块始终不会超出屏幕范围，并且在底部有一定空隙。

6.7 简洁的课程表

<!DOCTYPE html>     
 
<head>     
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
<meta name="viewport" content="width=device-width, initial-scale=1"/>  
<!--<script src="cordova.js"></script>-->   
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />     
<script src="../script/jquery-2.1.4.min.js"></script>     
<script src="../script/jquery.mobile-1.4.5.min.js"></script> 
</head>               
<body>
	<div data-role="page">
        <div data-role="header">
			<h1>课程表</h1>
		</div>
		<div data-role="content">
			<div class="ui-grid-d">
				<div class="ui-block-a"><div class="ui-bar ui-bar-b" style="height:30px">
					<h1>周一</h1>
				</div></div>
				<div class="ui-block-b"><div class="ui-bar ui-bar-b" style="height:30px">
					<h1>周二</h1>
				</div></div>
				<div class="ui-block-c"><div class="ui-bar ui-bar-b" style="height:30px">
					<h1>周三</h1>
				</div></div>
				<div class="ui-block-d"><div class="ui-bar ui-bar-b" style="height:30px">
					<h1>周四</h1>
				</div></div>
				<div class="ui-block-e"><div class="ui-bar ui-bar-b" style="height:30px">
					<h1>周五</h1>
				</div></div>
				<div class="ui-block-a"><div class="ui-bar ui-bar-a">
					<h1>数学</h1>
				</div></div>
				<div class="ui-block-b"><div class="ui-bar ui-bar-a">
					<h1>语文</h1>
				</div></div>
				<div class="ui-block-c"><div class="ui-bar ui-bar-a">
					<h1>英语</h1>
				</div></div>
				<div class="ui-block-d"><div class="ui-bar ui-bar-a">
					<h1>数学</h1>
				</div></div>
				<div class="ui-block-e"><div class="ui-bar ui-bar-a">
					<h1>英语</h1>
				</div></div>
				<div class="ui-block-a"><div class="ui-bar ui-bar-a">
					<h1>数学</h1>
				</div></div>
				<div class="ui-block-b"><div class="ui-bar ui-bar-a">
					<h1>化学</h1>
				</div></div>
				<div class="ui-block-c"><div class="ui-bar ui-bar-a">
					<h1>语文</h1>
				</div></div>
				<div class="ui-block-d"><div class="ui-bar ui-bar-a">
					<h1>英语</h1>
				</div></div>
				<div class="ui-block-e"><div class="ui-bar ui-bar-a">
					<h1>英语</h1>
				</div></div>
				<div class="ui-block-a"><div class="ui-bar ui-bar-a">
					<h1>物理</h1>
				</div></div>
				<div class="ui-block-b"><div class="ui-bar ui-bar-a">
					<h1>体育</h1>
				</div></div>
				<div class="ui-block-c"><div class="ui-bar ui-bar-a">
					<h1>生物</h1>
				</div></div>
				<div class="ui-block-d"><div class="ui-bar ui-bar-a">
					<h1>政治</h1>
				</div></div>
				<div class="ui-block-e"><div class="ui-bar ui-bar-a">
					<h1>数学</h1>
				</div></div>
				<div class="ui-block-a"><div class="ui-bar ui-bar-a">
					<h1>化学</h1>
				</div></div>
				<div class="ui-block-b"><div class="ui-bar ui-bar-a">
					<h1>语文</h1>
				</div></div>
				<div class="ui-block-c"><div class="ui-bar ui-bar-a">
					<h1>语文</h1>
				</div></div>
				<div class="ui-block-d"><div class="ui-bar ui-bar-a">
					<h1>数学</h1>
				</div></div>
				<div class="ui-block-e"><div class="ui-bar ui-bar-a">
					<h1>英语</h1>
				</div></div>
			</div>
		</div>
	</div>
</body>
</html>

效果如下：
在这里插入图片描述
本例为显示星期的栏目和显示课程的栏目设置了不同颜色的主题，以区分它们，其他地方按照默认的样式。

shen子怡
关注
  • 0
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery Mobile（布局和表单）
04-14
jQuery Mobile（布局和表单）
jQuery Mobile 导航栏和布局
小田同學的博客
05-11 2809
导航栏 1.使用data-role=”navbar”属性来定义导航栏，导航栏最多放置5个按钮，否则会换行。<div data-role="header"> <!-- 五个按钮内,默认平分.如果有图标默认在文字正上方 --> <div data-role="navbar"> <ul> <li><a href="#
jQueryMobile 登录、注册页面
koastal的博客
08-30 9848
使用jQuery Mobile制作了一个登录注册页面，使用data-transition属性可以得到炫酷的切换效果。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- meta使用viewport以确保页面可自由缩放 --> <meta name="viewport" content="wid
实战：jQueryMobile开发HTML5移动应用
03-04
随着移动互联世界的到来，目前已发展到多种移动操作系统割据的局面，而开发者则急需要能运用原有的开发知识和技能，快速方便地构建移动应用程序，并期望能运行在不同的手机操作平台上，比如Android,iOS,黑莓等。而目前，出现了一批十分优秀的支持html5/CSS3的移动应用开发框架，其中最为大家熟悉的是jQueryMobile框架(http://jquerymobile.com)，它可以让熟悉jQuery框架的开发者快速开发出基于HTML5的移动应用，而且直接通过手机的浏览器即可浏览。除此以外，jQueryMobile也有很好的扩展性，用户可以很好地对其进行定制修改，本文将指导读者对jQueryM
构建跨平台APP jQuery Mobile移动应用实战代码
02-01
包括移动开发和入门， jQuery Mobile控件、布局、跨平台开发和实战，发布和推广应用等
jquery.mobile-1.4.5.min.css
06-28
jquery.mobile-1.4.5.min.css css资源供大家分享使用资源供大家分享使用
jQuery Mobile的安装
qq_43704651的博客
10-30 517
jQuery Mobile的安装 1、官网下载后直接引用jQuery Mobile库文件 从jQuery Mobile官网下载该库文件 http://jquerymobile.com/download/ 选择 Zip File: jquery.mobile-1.4.5.zip (JavaScript, CSS, and images)进行下载，下载完成即可解压，然后直接引用文件即可。引用代码如下： <head> <meta name="viewport" cont
jQueryMobile的组件之下拉菜单(selectMenu)
bboyjoe的博客
08-30 9041
以下是一个最基本的下拉菜单示例，更多细节请参考 popup弹出窗口示例 Fun Here 弹出窗口 这是一个弹出窗口
【JQuery Mobile移动应用开发实战】JQuery Mobile基础——JQuery Mobile界面综合实战
lht964249279的博客
02-05 1879
《jQuery Mobile移动应用开发实战》学习笔记
JqueryMobile之页面布局
AnAnCow
11-03 1051
最近公司的一个项目需要设计到移动端的页面，网上查了一下JqueryMobile是一个不错的移动端的框架，但是之前又没有接触过只有网上查找一些资料学习，顺便就把我学习的过程记录一下当然也希望能给看到这篇文章的朋友一些帮助。 理论的这些我这里就不说了，网上一搜多的很，我就直接记录使用的方法和步骤。 在使用JqueryMobile 我们可以在官网下载Zip File: jquery.mobile-1...
jQueryMobile HTML5开发框架-其他
06-12
jQuery Mobile是一个统一的，基于HTML5的用户界面系统，适用于所有流行的移动设备平台，基于坚固的jQuery和jQuery UI基础。它的轻量级代码具有逐步增强的功能，并具有灵活，易于主题化的设计。 jQuery Mobile（jQueryMobile）是jQuery在手机上和平板设备上的版本。jQuery Mobile不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。 构建/定制： 当前，该库以依赖于jQuery Core（不包括在内）的单个整体JavaScript文件和类似捆绑的CSS文件的形式提供在jQuery CDN /下载中。对于用户，我们支持以下构建目标： js -解决依赖关系，构建，合并并最小化用于jQuery Mobile的JavaScript css -解决依赖关系，构建，合并并最小化所有css，仅结构css和主题css demos -构建js和CSS，并使文档准备好进行静态使用 lint-使用JSHint验证JavaScript文件
《构建跨平台APP-jQuery.Mobile移动应用实战》 PDF
08-27
jQuery Mobile是目前*流行的跨平台移动开发框架，本书以实例驱动讲解的方式，让零基础的读者也能轻松掌握jQuery Mobile下的应用开发。本书分为4篇，*篇是移动开发入门篇，介绍了jQuery Mobile、HTML 5和移动开发的一些基础知识，以及如何搭建开发环境；第二篇是jQuery Mobile基础篇，介绍了jQuery Mobile中对话框、工具栏、按钮、表单、布局和插件的使用；第三篇是跨平台APP实战篇，介绍了6个使用jQuery Mobile开发的实际APP；第四篇是发布和推广应用篇，介绍了在开发完成之后，如何发布和推广自己的APP。本书内容详尽、实例丰富，是广大jQuery Mobile初学者、跨平台移动开发人员必备的参考书，同时也适合作为高等院校和培训学校相关专业师生的教学参考书。
jQuery Mobile学习笔记（一）：环境配置与页面结构
学海无涯苦作舟的博客
03-09 464
1.环境配置： jQuery Mobile最新版本为v1.4.5，而jQuery最新版本为v3.5.1，但根据官网资料，jQuery Mobile v1.4.5支持jQuery v1.8〜v1.11与v2.1： 下载页建议使用jQuery的v1.11.1： ＃ https://jquerymobile.com/download/ 解压缩后将jQuery的，jQuery Mobile的JS之程式码与CSS样式档分别复制到专案资料夹的JS与CSS的子目录下： 的jquery-1.11.1.min.js（94
13款基于jQuery Mobile的布局插件和示例
weixin_33881050的博客
01-01 75
现在已经进入了移动互联网时代，因此将你的网站迁移到移动设备上就显得比较重要的。问题是，如何在移动设备的小屏幕中呈现你的网站中的所有内容呢？ 本文介绍13款基于jQuery Mobile的布局插件和示例，可以帮助你创建多视图或者分割视图布局的移动web页面，并会根据移动设备的方向和屏幕大小来动态调整所显示的内容。 1. Three Column iPad Layout 三列分割...
鸿蒙开发（九）UI实战 - 线性布局实现登录界面
zhaojun的博客
04-26 514
前面我们花了很多章去讲述鸿蒙开发的UI，包括布局和控件等。本篇，我们综合使用布局和控件，完成一个简单的用户登录界面。
element-ui et -i 编译默认主题报错：ReferenceError: primordials is not defined
weixin_44799030的博客
04-24 182
看了好几个帖子，都推荐使用node 11.15.0版本（推荐用nvm包管理，非常方便）用哪个node版本下载的就用node版本卸载，否则很可能出现问题。我使用的是node 14版本。
Avalonia UI跨平台WPF
最新发布
qq_38190993的博客
04-26 166
它使用自己的渲染引擎绘制UI控件，确保在Windows、macOS、Linux、Android、iOS和WebAssembly等不同平台上具有一致的外观和行为。Avalonia是一个强大的框架，使开发人员能够使用.NET创建跨平台应用程序。
pyinstaller｜打包生成的EXE报错No module named ‘openpyxl.cell._writer‘
cash_cp的博客
04-23 182
使用pyinstaller打包生成的EXE在执行过程中报错，No module named 'openpyxl.cell._writer'
jquery mobile移动应用
08-19
jQuery Mobile是一个用于创建移动Web应用的前端开发框架，适用于移动设备，如手机和平板电脑。它使用HTML5和CSS3来布局网页，并且可以与jQuery库一起使用。在引入jQuery Mobile的过程中，你还可以设置一些页面的过渡效果、按钮样式、图标和弹窗等。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [移动应用开发 & jQuery Mobile](https://blog.csdn.net/qxf1969851571/article/details/121348809)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值