2014-12-05 75 views
1

我试图使用与jQuery Mobile的,并在Android科尔多瓦文件传输显示的图像后,jQuery Mobile的页面中消失的CSS

我使用本教程练习: 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视图,整个“页面”,它的内容disapp耳朵从屏幕上出现,另一个页面出现,这个页面是显示的启动页面,直到设备准备就绪,当它准备好时,我将页面更改为登录页面。

<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 --> 

编辑 我注意到,当照片选择后显示launcherPage,如果我点击我的手机的背面按钮,它正确显示图片页面与包括所选择的图像...

编辑2 当我从HTML代码注释的launcherPage,画面选择之后,它显示登录页面...

回答

0

我想出的解决方案,这个问题不是从CSS正在添加,但HTML:

我只是改变了这种代码:

<button onclick="capturePhoto();">Capture Photo</button> 

这样:

<a href="" class="ui-btn" onclick="capturePhoto();">Capture Photo</a> 

别t使用html按钮标记,使用锚标记...不知道为什么,但这工作!

希望这会帮助别人