gpt4 book ai didi

javascript - jQuery Mobile 测试版 : can no longer use $ ('[data-role=header]' )?

转载 作者:行者123 更新时间:2023-11-29 09:58:33 25 4
gpt4 key购买 nike

我曾经能够得到

$('[data-role=header]').first().height()

在 jQuery 1.5.2 的 alpha 中,但不再可以在 jQuery 1.6.1 的 beta 中。有什么变化吗?

完整代码 - 将 0 写入 console.log...

<!DOCTYPE html> 
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
console.log($('[data-role=header]').first().height());
});
</script>
</head>
<body>
<div data-role="page" id="home">

<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
//lots of code
</div>
</div>
</body>
</html>

但是,将其更改为 jQuery 1.5.2 和 jQuery Mobile alpha:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>

并写入标题 div 的非零高度。

顺便说一下,对于 jQuery 1.6.1 但没有 jQuery Mobile,它也是非零的。所以这与 jQuery Mobile 渲染有关。

release notes 中看不到任何内容建议可能发生的事情,但我不是 jQuery 专家。

最佳答案

导致差异的更改是“响应式设计助手类:现已弃用”

We include a set of responsive design helper classes designed to make it easy to build a responsive design that adapts the layout for various screen widths. At the time, we went with a system of dynamically appended min- and max-width classes on the body that are updated on load, resize and orientation change events as a workaround for the limitation that Internet Explorer doesn’t support media queries.

基本上,页面将 min-height 设置为 beta 中的当前页面高度,这会覆盖 .landscape { min-height: 300px; 在 alpha 中。

看来你需要使用 CSS Media Queries如果您想要更改页面布局,或者如果您需要固定高度,则可以在页眉上添加 CSS style="height:43px"

当您查询 height() 时,页面似乎还没有准备好。 There is no document.ready for jQuery.mobile .它没有解释为什么 alpha 和 beta 之间存在差异,但我猜代码路径的更改暴露了这个问题。

将查询包装在不同的事件中,返回预期的高度。

$("div:jqmData(role='page')").live('pageshow',function(){
console.log($('[data-role=header]').first().height());
});

我通过检查 Chrome 控制台中非零的 DOM 元素的 offsetHeight 发现了这一点,但正如您所报告的,height() 始终报告 0。然后我创建了一个链接单击时输出高度并且它是非零的。然后我意识到在页面完全准备好之前调用了 height()

相关 - jQuery mobile $(document).ready equivalent

关于javascript - jQuery Mobile 测试版 : can no longer use $ ('[data-role=header]' )?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6549014/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com