android - Jquery Mobile 页面在页面转换期间调整大小

coder 2023-11-27 原文

我正在使用 Jquery Mobile 和 Phonegap 开发应用程序。我遇到的问题是，当我进行页面转换时，传入页面首先显示不正确(DOM 元素不在正确的位置或大小不正确)，然后一旦转换完成，元素会调整大小并移动到正确的位置. (此外，转出的页面在移出之前也会出现错误)。我已经使用淡入淡出和幻灯片过渡对此进行了测试(我希望最终有幻灯片过渡)。

这是一个说明问题的 jsFiddle:
http://jsfiddle.net/fz7qs/2/

我还使用一个 div 作为页面容器，这样整个页面不会同时转换，而只是页面容器 div。

我对几乎所有内容(高度、宽度、边距等)都使用了 css 百分比，以便应用程序可以缩放到不同的设备尺寸。此外，我正在使用 javascript 将一些元素居中(在 pageshow 事件中触发)。我认为这些百分比是问题的一部分。我在桌面浏览器上构建了一个简单的测试(去掉 phonegap)并为页面容器设置了一个固定的高度。这似乎解决了问题，但是当我在手机上尝试时，问题仍然存在。

应用中的每个页面都使用 $.mobile.loadPage() 预加载到 DOM 中。我想如果我预加载它们，百分比高度将相对于父级(页面容器 div)并且过渡应该看起来正确。

进一步研究 Jquery Mobile，我发现在转换期间，页面的高度被设置为空字符串。我试图注释掉这一行只是为了测试它是否适用于百分比高度。同样，它适用于我的桌面测试，但不适用于手机。

我在三星 Galaxy Nexus 上使用 Android phonegap(API 级别 8 - Android 2.2)进行测试。

有没有办法在页面转换之前应用 css 和 javascript 定位，同时保持基于百分比的值？

index.html

<body>
    <!-- header on every page -->
    <div id="mainHeader">This is a header</div>

    <!-- page content -->
    <div id="pageContainer">
        <div data-role="page"></div>
    </div>
</body>

page1.html

<body> 
    <div data-role="page" id="page1">
        <div class="subheader">
            <div class="backButton"></div>
            <div class="subheaderText">Settings</div>
            <div class="helpButton"></div>
        </div>
    </div>
</body>

相关的CSS

#pageContainer {
    overflow: hidden;
    width: 100%;
    height: 86.772486772486772486772486772487%;
}

.ui-mobile [data-role="page"] {
    min-height: 0px !important;
    color: white;
    position: relative;
    width: 100%;
    height: 100%;
    background: #868a73;
}

.subheader {
    width: 100%;
    height: 10.16260162601626016260162601626%;
    background-color: #000;
    display: inline-block;
    text-align: center;
    position: relative;
}

.backButton {
    background: url("images/back_button.png");
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    float: left;
    width: 8.888888888888888888888888888889%;
    height: 52%;
    margin-left: 5.555555555555555555555555555556%;
}

.subheaderText {
    color: #FFF;
    font-size: 2.45em;
    font-weight: bold;
    display: inline-block;
}

.helpButton {
    float: right;
    background: url("images/help_button.png");
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    width: 8.888888888888888888888888888889%;
    height: 64%;
    right: 5.555555555555555555555555555556%;
}

最佳答案

首先，您可以使 html 看起来像 jquery 移动教程页面。你需要有这样的 html 结构:

<div data-role="page">

    <div data-role="header">
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <p>Page content goes here.</p>  
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->

看看jquery mobile page anatomy .

关于android - Jquery Mobile 页面在页面转换期间调整大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13807260/

转换期 android div gt lt jquery cordova jquery-mobile mobile

有关android - Jquery Mobile 页面在页面转换期间调整大小的更多相关文章

ruby-on-rails - 在 Rails 中将文件大小字符串转换为等效千字节 - 2
我的目标是转换表单输入，例如“100兆字节”或“1GB”，并将其转换为我可以存储在数据库中的文件大小(以千字节为单位)。目前，我有这个:defquota_convert@regex=/([0-9]+)(.*)s/@sizes=%w{kilobytemegabytegigabyte}m=self.quota.match(@regex)if@sizes.include?m[2]eval("self.quota=#{m[1]}.#{m[2]}")endend这有效，但前提是输入是倍数(“gigabytes”，而不是“gigabyte”)并且由于使用了eval看起来疯狂不安全。所以，功能正常，
ruby - 使用 ruby 将 HTML 转换为纯文本并维护结构/格式 - 2
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。最佳答案首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
ruby - 将数组的内容转换为 int - 2
我需要读入一个包含数字列表的文件。此代码读取文件并将其放入二维数组中。现在我需要获取数组中所有数字的平均值，但我需要将数组的内容更改为int。有什么想法可以将to_i方法放在哪里吗？ClassTerraindefinitializefile_name@input=IO.readlines(file_name)#readinfile@size=@input[0].to_i@land=[@size]x=1whilex 最佳答案只需将数组映射为整数:@land边注如果你想得到一条线的平均值，你可以这样做:values=@input[x]
ruby - 将散列转换为嵌套散列 - 2
这道题是thisquestion的逆题.给定一个散列，每个键都有一个数组，例如{[:a,:b,:c]=>1,[:a,:b,:d]=>2,[:a,:e]=>3,[:f]=>4,}将其转换为嵌套哈希的最佳方法是什么{:a=>{:b=>{:c=>1,:d=>2},:e=>3,},:f=>4,} 最佳答案这是一个迭代的解决方案，递归的解决方案留给读者作为练习:defconvert(h={})ret={}h.eachdo|k,v|node=retk[0..-2].each{|x|node[x]||={};node=node[x]}node[
ruby-on-rails - Ruby url 到 html 链接转换 - 2
我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.
ruby-on-rails - 使用 ruby 将多个实例变量转换为散列的更好方法？ - 2
我收到格式为的回复#我需要将其转换为哈希值(针对活跃商家)。目前我正在遍历变量并执行此操作:response.instance_variables.eachdo|r|my_hash.merge!(r.to_s.delete("@").intern=>response.instance_eval(r.to_s.delete("@")))end这有效，它将生成{:first="charlie",:last=>"kelly"},但它似乎有点hacky和不稳定。有更好的方法吗？编辑:我刚刚意识到我可以使用instance_variable_get作为该等式的第二部分，但这仍然是主要问题。
python ffmpeg 使用 pyav 转换一组图像到视频 - 2
2022/8/4更新支持加入水印水印必须包含透明图像，并且水印图像大小要等于原图像的大小pythonconvert_image_to_video.py-f30-mwatermark.pngim_dirout.mkv2022/6/21更新让命令行参数更加易用新的命令行使用方法pythonconvert_image_to_video.py-f30im_dirout.mkvFFMPEG命令行转换一组JPG图像到视频时，是将这组图像视为MJPG流。我需要转换一组PNG图像到视频，FFMPEG就不认了。pyav内置了ffmpeg库，不需要系统带有ffmpeg工具因此我使用ffmpeg的python包装p
HBase Region 简介和建议数量&大小 - 2
Region是HBase数据管理的基本单位,region有一点像关系型数据的分区。region中存储这用户的真实数据，而为了管理这些数据，HBase使用了RegionSever来管理region。Region的结构hbaseregion的大小设置默认情况下，每个Table起初只有一个Region，随着数据的不断写入，Region会自动进行拆分。刚拆分时，两个子Region都位于当前的RegionServer，但处于负载均衡的考虑，HMaster有可能会将某个Region转移给其他的RegionServer。RegionSplit时机：当1个region中的某个Store下所有StoreFile
安卓apk修改(Android反编译apk) - 2
最近因为项目需要，需要将Android手机系统自带的某个系统软件反编译并更改里面某个资源，并重新打包，签名生成新的自定义的apk，下面我来介绍一下我的实现过程。APK修改，分为以下几步：反编译解包,修改,重打包,修改签名等步骤。安卓apk修改准备工作1.系统配置好JavaJDK环境变量2.需要root权限的手机（针对系统自带apk,其他软件免root）3.Auto-Sign签名工具4.apktool工具安卓apk修改开始反编译本文拿Android系统里面的Settings.apk做demo,具体如何将apk获取出来在此就不过多介绍了，直接进入主题：按键win+R输入cmd，打开命令窗口，并将路
ruby-on-rails - 将字符串转换为 ruby-on-rails 中的函数 - 2
我需要一个通过输入字符串进行计算的方法，像这样function="(a/b)*100"a=25b=50function.something>>50有什么方法吗？最佳答案您可以使用instance_eval:function="(a/b)*100"a=25.0b=50instance_evalfunction#=>50.0请注意，使用eval本质上是不安全的，尤其是当您使用外部输入时，因为它可能包含注入(inject)的恶意代码。另请注意，a设置为25.0而不是25，因为如果它是整数a/b将导致0(整数)。

android - Jquery Mobile 页面在页面转换期间调整大小

有关android - Jquery Mobile 页面在页面转换期间调整大小的更多相关文章

随机推荐