Android中的Phonegap-Jquery兼容性问题

时间:2013-08-15 09:15:39

标签: javascript android jquery-mobile cordova single-page-application

我正在开发一个带有滑动面板的phonegap项目,该面板在按下该面板中的任何按钮后关闭,并且还会加载数据。
我已经让它在我的Nexus 4上运行但是当我检查LG Optimus G Pro时发生了主要问题,滑块在点击它之后没有自行关闭它必须明确关闭。奇怪的是所有三星设备都出现了同样的问题。

以下是滑块的代码

    <script>
                $(document).on("pageinit", "#demo-page", function() {
                    $(document).on("swipeleft swiperight", "#demo-page", function(e) {
                        // We check if there is no open panel on the page because otherwise
                        // a swipe to close the left panel would also open the right panel (and v.v.).
                        // We do this by checking the data that the framework stores on the page element (panel: open).
                        if ($.mobile.activePage.jqmData("panel") !== "open") {
                            if (e.type === "swipeleft") {
                                $("#dvAppSideMenu").panel("open");
                            } else if (e.type === "swiperight") {
                                $("#left-panel").panel("open");
                            }
                        }
                    });
                });
            </script>
<div data-role="panel" id="left-panel" data-theme="b">

            <div id="dvPageButton" class="pageHeaderMenu shadowSmall">

                <div class="scrollArea">
                    <a id="aWall_Main" data-action="home" class="mainWall">
                        <div data-target="1">
                            Home
                        </div>
                    </a>
                    <a href="#maincontent" data-target="1" data-subtarget="0" data-section="secDataZero" class="dont shadowInset" data-rel="close">ABC</a>
                    <a href="#maincontent" data-target="1" data-subtarget="1" data-section="secDataOne" class="dont shadowInset" data-rel="close">PQR</a>
                    <a href="#maincontent" data-target="1" data-subtarget="2" data-section="secDataTwo" class="dont shadowInset" data-rel="close">XYZ</a>
                    <a class="dont shadowInset setting-btn" href="#" >Setting</a>
                </div>

            </div>

            <div class="theme-button">
                <a class="th-btn1" href="#" data-rel="close"><span>Theme A</span></a>
                <a class="th-btn2" href="#" data-rel="close"><span>Theme B</span></a>
                <a class="th-btn3" href="#" data-rel="close"><span>Theme C</span></a>
                <a class="th-btn4" href="#" data-rel="close"><span>Theme D</span></a>
                <a class="th-btn5" href="#" data-rel="close"><span>Theme E</span></a>
            </div>

        </div>

注意:这是手机上的应用程序可能无法在浏览器上运行。

有谁知道为什么会出现问题?

1 个答案:

答案 0 :(得分:0)

您是否尝试过jQuery Mobile 1.4的Alpha 2版本。他们已经在这个版本的面板上做了很多工作(并且正在做)。