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的网络视图。如果要自定义此屏幕，可能需要以某种方式更改其layout file。

我认为您的按钮“焦点和扫描”应该触发手动扫描（我认为默认是识别第一个条形码） - 因此您可能需要更改activity implementation以包含一个处理程序按钮。

另请参阅Simon Mac Donald's blog（他似乎正在开发Android上的条形码扫描插件）和this answer（这正是我上面写的，snap：P）。