javascript - Android 2.x 和 3.x WebKit 困惑

标签 javascript android jquery html css

我正在开发一个 Android 应用程序，我的 Intent 是至少能够为 Android 2.2+ 发布它。目前，由于 WebView 控件一团糟，我只能使用 Android 4.0+。
该应用主要基于 HTML+CSS+JS+jQuery。

div.appList 显示了一个应用列表，当点击时应用应该启动。只是这有点麻烦；为了使列表可滚动，我必须将 overflow: scroll; 添加到其父级。这在 Android 3.0+ 中工作正常。在 Android 2.x 中，列表仍然不可滚动。
我说它在 Android 3.0 中运行良好？好吧，滚动确实如此。现在的问题是它没有记录点击。如果用户点击列表中的元素，则不会触发 click 事件，因为我猜，它被注册为用户滚动列表。再次使列表不可滚动会使元素可点击，但话又说回来，列表是无用的，因为您只能访问前几个元素。

Android 4.0+ 一切正常

如有任何帮助，我们将不胜感激。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link type="text/css" rel="stylesheet" href="stylesheet.css" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <div id="loadingScreen">
    </div>
    <div id="desktop">
        <div class="unity panel">
        </div>
        <div class="unity launcher">
            <div class="launcherIcon bfb">
                <img src="img/unity/launcher.bfb.png" alt="Dash Home" />
            </div>
            <div class="launcherApps iScroll" id="launcherApps">
            </div>
            <div class="launcherIcon launchTrash">
                <img src="img/apps/trash.icon.png" alt="Rubbish Bin" />
            </div>
        </div>
        <div class="window">
            <div class="windowClose">
            </div>
            <div class="windowContent">
                <div class="windowPreferences">
                    <p>Nothing to be seen here, yet</p>
                </div>
            </div>
        </div>
        <div class="unity dash">
            <div class="dashContent">
                <div class="dashApps dashPage iScroll" id="dashApps">
                    <div class="appList"></div>
                </div>
                <div class="dashFiles dashPage iScroll" id="dashFiles">
                    <div class="fileList"></div>
                </div>
            </div>
            <div class="dashRibbon">
                <img src="img/unity/apps.png" alt="Applications" class="activeRibbonItem ribbonApps" />
                <!--<img src="img/unity/files.png" alt="Files" class="ribbonFiles" />-->
            </div>
        </div>
    </div>
</body>
</html>

CSS

html, body
{
    font-family: 'Ubuntu', 'Droid Sans';
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    background: rgb(43,0,30);
}

/*# Loading screen #*/
div#loadingScreen
{
    position: fixed;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    text-align: center;
    background: rgb(43,0,30) url(img/ubuntuLogo.png) center center no-repeat;
    color: white;
    z-index: 49;
}

/*# Desktop #*/
div#desktop
{
    display: none;
    position: fixed;
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    background: rgb(43,0,30) url(img/wallpaper/wartyFinal.jpg);
    background-position: center center;
    background-size: cover;
}
div.unity.panel
{
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 24px;
    background: rgb(69,68,64) url(img/unity/panel.background.jpg);
    background-repeat: repeat-x;
}
    div.unity.panel.dashOpened
    {
        background: transparent url(img/unity/dashOpened.png);
        border-bottom: 1px solid #504E4F;
    }
div.unity.launcher
{
    display: none;
    position: absolute;
    top: 24px;
    left: 0px;
    bottom: 0px;
    width: 0px; /* Animates to 64px */
    background: transparent url(img/unity/launcher.background.png);
    border-right: 1px solid #504E4F;
    padding: 3px 0px 55px 0px;
}
    div.unity.launcher.dashOpened
    {
        background: transparent url(img/unity/dashOpened.png);
    }
    div.launcherIcon
    {
        display: none;
        width: 52px;
        height: 52px;
        margin: 4px 6px 4px 6px;
        border-radius: 5px;
        background: transparent url(img/unity/launcher.iconbg.png);
        background-position: center;
        background-size: cover;
    }
        div.unity.launcherIcon.dashOpened
        {
            background: grey !important;
            opacity: 0.8;
        }
        div.launcherIcon.bfb
        {
            background-image: none;
            border-radius: 0px;
        }
            div.launcherIcon.bfb img
            {
                width: 52px;
                height: 52px;
                margin: 0px;
            }
        div.launcherIcon img
        {
            width: 46px;
            height: 46px;
            margin: 3px;
        }
        div.launcherIcon.launchFirefox
        {
            background-color: rgb(247,192,48);
        }
        div.launcherIcon.launchTrash
        {
            position: absolute;
            bottom: 3px;
            background-color: #303030;
        }
    div.window
    {
        display: none;
        position: absolute;
        top: 24px;
        left: 64px;
        right: 0px;
        bottom: 0px;
        background: rgb(242,241,239);
        color: black;
    }
        div.windowClose
        {
            position: fixed;
            left: 0px;
            top: 0px;
            width: 64px;
            height: 24px;
            text-align: center;
            background: url(img/window/close.png) center center no-repeat;
        }
div.dash
{
    display: none;
    position: absolute;
    left: 64px;
    top: 24px;
    bottom: 0px;
    right: 0px;
    background: transparent url(img/unity/dashOpened.png);
    padding: 0px 12px 48px 12px;
    color: white;
    overflow: scroll;
}
    div.dash.dashOpened
    {
        display: block;
    }
    div.dash *:link
    {
        color: white;
        text-decoration: none;
        text-shadow: 0px 0px 2px white;
    }
    div.dash ul li
    {
        padding: 5px;
    }

/*# Applications #*/
div.appWindow
{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

JavaScript

var bootscreenDelay = 500; // 2500 //
var appOpened = false;
var dashOpened = false;

$(document).ready
(
    function ()
    {
        $('div#loadingScreen').delay (bootscreenDelay).fadeOut (800);
        $('div#desktop').delay (bootscreenDelay + 300).fadeIn (600,
            function ()
            {
                $('div.unity.panel').slideDown (400,
                    function ()
                    {
                        $('div.unity.launcher').css ('display', 'block').animate ( { width: 64 }, 600,
                            function ()
                            {
                                $('div.launcherIcon').each
                                (
                                    function (i)
                                    {
                                        $(this).delay (i * 200).slideDown (400);
                                    }
                                );
                            }
                        );
                    }
                );
            }
        );

        $('div.windowClose').click
        (
            function ()
            {
                $('div.appFirefox .appFirefoxBrowser').fadeOut (400,
                    function ()
                    {
                        appFirefoxNavigate ('http://start.ubuntu.com/');
                    }
                );
                $('div.appWindow.appFirefox').fadeOut (800);
                $('div.window').delay (200).fadeOut (800);
                appOpened = false;
            }
        );

        /*# Dash #*/
        $('div.launcherIcon.bfb').click
        (
            function ()
            {
                if (! dashOpened)
                    openDash ();
                else
                    closeDash ();
            }
        );

        /*# Trash #*/
        $('div.launcherIcon.launchTrash').click
        (
            function ()
            {
                closeEverything ();

                android.openInBrowser ('http://www.dafk.net/what/');
            }
        );
    }
);

function closeEverything ()
{
    $('div.windowClose').trigger ('click');
    closeDash ();
}

function openDash ()
{
    $('*').addClass ('dashOpened');
    dashOpened = true;

    var appList = android.getApplicationList ();
    var pkgMan = android.getPackageManager ();
    var strAppList = '<ul>';
    for (var i = 0; i < appList.size (); i++)
    {
        var appLabel = android.getApplicationLabel (appList.get (i));
        strAppList += '<li onclick="launchApp (' + i + ')">' + appLabel + '</li>';
    }
    strAppList += '</ul>';
    $('div.appList').html (strAppList);
}

function closeDash ()
{
    $('*').removeClass ('dashOpened');
    dashOpened = false;
}

function launchApp (i)
{
    android.launchAppFromList (i);
}

任何帮助我让它在旧版本上工作的东西都会受到赞赏。目标是 Android 2.x，但如果你能帮助我让它在 3.2+ 上运行，我已经很高兴了。

最佳答案

overflow:scroll|auto 在 Android 2.X 设备上不能正常工作。 此 css 规则等于 overflow:hidden :)

你无法修复它，但你可以使用插件来避免这种行为，例如http://cubiq.org/iscroll-4

关于javascript - Android 2.x 和 3.x WebKit 困惑，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14416366/

上一篇：javascript - 如何获取在 HTML5 Canvas 上单击的坐标？

下一篇：jquery - 动态禁用和启用单选按钮

相关文章：

javascript - 合并两个数组，使值交替

Android Studio 构建配置

android - 当我打开手机照片时，选择一个以使用小米 MIUI 强制关闭应用程序，其他手机工作正常。谢谢你的建议？

javascript - 如何在保持点击 n 秒后触发事件？ -jQuery/Javascript

javascript - 选择特定日期时在下拉列表中显示不同值的日期选择器

javascript - 如何在jssor slider 中放置下拉菜单

android - 离线 Android admob 广告

jquery - 如何使用 jQuery 从表单中获取元素值

jquery - 按屏幕尺寸删除图像尺寸

javascript - 如何让 AngularJS 更新 ng-repeat 数组拼接上的 DOM？ $scope.$apply() 返回错误

©2024 IT工具网  联系我们