zxing条形码扫描仪在phonegap安卓应用程序中的固定div

Question

我在我的android phonegap应用程序中成功添加了zxing条形码扫描程序插件这里是js代码页面显示我能够看到条形码扫描仪屏幕.

  $('#scanpage').live('pageshow', function (event, ui) {
    //navigator.notification.alert("Search page");

    window.plugins.barcodeScanner.scan( function(result) {
        //navigator.notification.alert("We got a barcode\n" +   "Result: " + result.text + "\n" +"Format: " + result.format + "\n" +
            //    "Cancelled: " + result.cancelled);
         }, function(error) {
        navigator.notification.alert("Scanning failed: " + error);
    }); 

});

这是html5页面代码

div id="scanpage" data-role="page">
<div data-role="header" class="pageheader">

<div class="height30" style="padding-right:2%;">
 <div class="back" style="margin-right:2%;"><a href="#homepage">Back</a></div>
<div class="logo2" ><a href="#"  ><img src="images/scan.png" style="padding-top:12px;" alt="Scan Code" /></a>
</div>
 </div>
 </div> 

<div data-role="content"  class="wrapper" style="width:100%">


 <div style="background-color:#000000;" >
 <div style="height:400px;" id="scanarea"></div>


 <input name="" type="button" class="button" value="Focus and Scan" data-role="none"   />

  </div><!-- inner div-->


</div>  
   </div> <!-- end SCAN PAGE -->

但是它是如何工作的,当我打开页面时首先加载html但是在第二个整个屏幕上覆盖了条形码扫描器窗口我想在DIV'scanarea'中修复这个扫描区域.但是不知道如何在某个div区域修复它,按钮点击扫描将执行并读取条形码.

扫描窗口

HTML页面

需要像这样展示

Answer 1

条形码扫描屏幕作为 Android 活动实现，完全隐藏 PhoneGap 的 Web 视图。如果您想自定义此屏幕，您可能需要以某种方式更改其布局文件。

\n\n

我假设您的按钮“聚焦和扫描”应该触发手动扫描（我认为默认是识别第一个条形码） \xe2\x80\x93 因此您可能必须更改活动实现以包含该按钮的处理程序。

\n\n

另请参阅Simon Mac Donald 的博客（他似乎正在开发 Android 上的条形码扫描插件）和这个答案（这正是我上面写的，snap :P）。

\n