2

我正在开发一个 Android 应用程序,我的目的是至少能够为 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+ 上运行,我已经很高兴了。

4

1 回答 1

1

overflow:scroll|auto在 Android 2.X 设备上无法正常工作。这个css规则等于overflow:hidden:)

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

于 2013-01-21T17:57:34.067 回答