Jquery移动页面在使用css显示图像后消失
Jquery mobile page disappear after image displayed with css
我正在尝试在Android上使用Jquery mobile和Cordova的文件传输,
我使用本教程来练习:http://blog.revivalx.com/2014/05/03/tutorial-camera-cordova-plugin-for-ios-and-android/
选择图片后,此函数在成功时调用:
function onPhotoDataSuccess(imageURI) {
navigator.notification.alert("onPhotoDataSuccess Image URI: "+imageURI, function() {});
var cameraImage = document.getElementById('image');
cameraImage.style.display = 'block';
cameraImage.src = imageURI;
}
通知向我显示了良好的文件 URI,所以我认为没问题,但是当应用程序返回 Web 视图时,整个"页面"及其内容从屏幕上消失并出现另一个页面,此页面是显示的启动器页面,直到设备准备就绪,当它准备好时,我将页面更改为登录页面。
<div id="launcherPage" data-role="page" data-theme="b">
<h1>Loading...</h1>
</div>
所以我尝试并用这段代码更改了这个函数:
function onPhotoDataSuccess(imageURI) {
navigator.notification.alert("onPhotoDataSuccess Image URI: "+imageURI, function() {});
$('#image').attr({
src: imageURI,
style: "display:block;width:100%;"
});
}
但我有相同的结果,没有重复的 id,我真的不明白它为什么要这样做。
这是 html 代码:
<div data-role="page" id="picture" data-theme="b">
<div data-role="header">
<h1>TEST</h1>
</div><!-- /header -->
<div data-role="content" data-theme="b">
<form id="pictureForm">
<button onclick="capturePhoto();">Capture Photo</button><br>
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button>
<img id="image" src="" style="display:none;width:100%;">
<label for="title">Title</label>
<input data-clear-btn="true" name="title" id="title" value="" type="text">
<input value="Continue" type="submit" id="adButton" onclick="uploadPhoto();">
</form>
</div><!-- /content -->
<div data-role="footer" data-theme="b">
<h4>TEST</h4>
</div><!-- /footer -->
</div><!-- /page -->
编辑我注意到,当图片选择后显示启动器页面时,如果我点击手机的后退按钮,它会正确显示图片页面,其中包含所选图像......
编辑 2当我从html代码中评论启动器页面时,在图片选择后,它会显示登录页面...
我想出了解决方案,问题不是来自CSS,而是来自HTML:
我刚刚更改了此代码:
<button onclick="capturePhoto();">Capture Photo</button>
对此:
<a href="" class="ui-btn" onclick="capturePhoto();">Capture Photo</a>
不要使用 html 按钮标签,使用锚标签...不知道为什么,但这!!
希望这会帮助某人
相关文章:
- 从桌面读取python文件时高亮显示代码
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 如何在生成下载文件时显示加载动画
- React重新渲染但未显示正确的组件
- nodejs-expressjs上传图像并显示它们
- 使用JSP从服务器检索和显示图像
- 音频控件在mouseover上显示,在mouseout上淡出
- 让文本输入幻灯片显示输入时的新文本输入?然后向后滑动
- 使用电话间隙在Android应用程序中显示SQL Lite的数据
- 显示5秒后隐藏潜水
- 画廊图像未显示
- 不显示带有本地json文件数据的谷歌地图脚本
- 如何将json数据显示为html
- 谷歌地图不是以HTML显示,而是在JS Fiddle上工作
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 高亮显示时编辑文本大小和颜色
- 有时数据是't显示在浏览器中
- 当鼠标悬停在文本中的单词上时显示警报
- 角度图表;t显示在我的页面中
- 显示图工具提示显示x轴的最后日期值,而不是当前值