文档章节

JQuery Mobile listview界面变小问题

 郁南IT人
发布于 2014/11/17 13:18
字数 335
阅读 15
收藏 0

    在使用JQuery Mobile框架,遇到这样一个问题,在<ul>标签加上属性data-role="listview",然而界面明显比正常小很多,包括文字、标题等。后来检查代码发现,在<li>里的<a>标签的文本内容赤裸裸的在<a>标签中,后来把文本放在<span>标签中,一切就正常了,不知道其中什么原因,可能是mobile没有控制<a>标签的文本吧,只是对<a>中<span>文本做控制。

    还有一个最重要的原因,在<head>标签中需要添加<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1"/>,确少这个必定会使整个界面变小

    原来代码:

<ul data-role="listview" id="list">
				<c:forEach var="modelsSchemaEo" items="${vehicleMo.modelsSchemaEoList}">
					<c:if test="${empty preModelsSchemaEo || preModelsSchemaEo.factory != modelsSchemaEo.factory}">
						<!-- 显示厂家 -->
						<li data-role="list-divider">${modelsSchemaEo.factory}</li>
					</c:if>
					<li>
						<c:set var="preModelsSchemaEo" value="${modelsSchemaEo}"></c:set>
						<a data-ajax="false"
							href="vehicleServlet.do?requestType=queryModel&factory=
							${modelsSchemaEo.factory}&seriesName=${modelsSchemaEo.series}&brandName=${modelsSchemaEo.brand}"
							data-transition="slide">
							<!--此处文本没有添加span标签-->
							${modelsSchemaEo.brand}${modelsSchemaEo.series}
						</a>
					</li>
				</c:forEach>
			</ul>

       添加<span>标签:

<ul data-role="listview" id="list">
				<c:forEach var="modelsSchemaEo" items="${vehicleMo.modelsSchemaEoList}">
					<c:if test="${empty preModelsSchemaEo || preModelsSchemaEo.factory != modelsSchemaEo.factory}">
						<!-- 显示厂家 -->
						<li data-role="list-divider"><span>${modelsSchemaEo.factory}</span></li>
					</c:if>
					<li>
						<c:set var="preModelsSchemaEo" value="${modelsSchemaEo}"></c:set>
						<a data-ajax="false"
							href="vehicleServlet.do?requestType=queryModel&factory=
							${modelsSchemaEo.factory}&seriesName=${modelsSchemaEo.series}&brandName=${modelsSchemaEo.brand}"
							data-transition="slide">
							<!--此处文本已经添加span标签-->
							<span>${modelsSchemaEo.brand}${modelsSchemaEo.series}</span>
						</a>
					</li>
				</c:forEach>
			</ul>



© 著作权归作者所有

粉丝 0
博文 2
码字总数 665
作品 0
广州
私信 提问
jqueryMobile 动态添加元素,展示刷新视图方法

jQuery Mobile的是一个很好的移动开发框架,你可能已经知道,虽然它有很多难以解决的问题,但是我相信后续版本jquery会修复……我是很喜欢jquery的。这并不是说它很完美无暇,很多开发人员遇...

郏高阳
2013/01/09
3.4K
0
jQuery Mobile 1.0 RC3 发布,性能大幅提升

Jquery mobile 发布rc3,Form 优化和Listview等改进较大,还有其它等等 该版本另外一个非常重要的改进就是性能,性能,性能!!! 看看下面这张图: 另外 jQuery Mobile 1.0 正式版将只支持 ...

Seanx
2011/11/17
1K
5
jQuery Mobile 1.2.0 Alpha 发布

jQuery Mobile 发布了 1.2.0 的首个 alpha 版本,其实在一个月之前就发布了。该版本主要的改进包括: 1. 新的 Popup 部件 写法如下: 并提供多种样式 2. Collapsible Lists 3. Listview Aut...

oschina
2012/09/04
1K
2
Jquery mobile 发布rc3,Form 优化和Listview等改进较大

http://jquerymobile.com/blog/2011/11/13/jquery-mobile-rc3-released/ Jquery mobile 发布rc3,Form 优化和Listview等改进较大,还有其它等等...

Seanx
2011/11/17
533
1
8 个最新的 jQuery Mobile 在线教程推荐

jQuery Mobile目前已经发布了RC2版本, 随着类库的完善,jQueryMobile必将成为移动端开发的利器之一,今天我们收集了2011年最新的8个jQuery移动开发教程,从最简单的入门介绍,到高级的开发应...

MrMign
2011/11/01
4.1K
3

没有更多内容

加载失败,请刷新页面

加载更多

【2019年8月版本】OCP 071认证考试最新版本的考试原题-第5题

choose the best answer The CUSTOMERS table has a CUST_LAST_NAME column of data type VARCHAR2. The table has two rows whose COST_LAST_MANE values are Anderson and Ausson. Which q......

oschina_5359
30分钟前
3
0
电脑怎样制作流程图?分享绘制流程图方法

流程图的绘制可以用很多方法来实现,小编经常使用电脑对流程图进行绘制,即简单又便利,相信很多朋友都因为不知道怎样绘制流程图而选择了放弃,今天这篇文章希望可以让大家重拾绘制流程图的信...

干货趣分享
32分钟前
3
0
Elasticsearch 7.x 之文档、索引和 REST API 【基础入门篇】

前几天写过一篇《Elasticsearch 7.x 最详细安装及配置》,今天继续最新版基础入门内容。这一篇简单总结了 Elasticsearch 7.x 之文档、索引和 REST API。 什么是文档 文档Unique ID 文档元数据...

泥瓦匠BYSocket
36分钟前
3
0
TL665x-EasyEVM开发板处理器、flash、RAM

TL665x-EasyEVM是广州创龙基于SOM-TL665x核心板研发的一款TI C66x多核定点/浮点高性能DSP开发板,采用核心板+底板方式,底板尺寸为200mm*106.65mm,采用4*50pin和1*80pin B2B工业级连接器,稳...

Tronlong创龙
40分钟前
3
0
DevExpress Report-XRTable绑定数据

将从跳转前的页面(A)中获取传入的数据(dtOrd、BatchID、ModelID),绑定到Report报表对应的控件 ,代码如下: this.xrtBatchID.Text = sBatchID; this.xrtModel.Text ...

_Somuns
41分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部