Simple set body background on xdk

StackOverflow https://stackoverflow.com/questions/23525961

문제

i'm tryng to write an application with intel xdk I need to edit the background, i try adding the paramether stile="background-color:blue" in the body but when i got to the desing tab, nothing appen (standard background is showed) if i go back in the code tab, it delete the open tag but not the close tag end doesn't shows any error...

some idea? there's the code before and after tha save

<!DOCTYPE html>
<html><!--HTML5 doctype-->

<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="Pragma" content="no-cache">
<script type="text/javascript" charset="utf-8" src="intelxdk.js"></script>
<script type="text/javascript" language="javascript">
    var isIntel=window.intel&&window.intel.xdk
    // This event handler is fired once the intel libraries are ready
    function onDeviceReady() {
        //hide splash screen now that our app is ready to run
        intel.xdk.device.hideSplashScreen();
        setTimeout(function () {
            $.ui.launch();
        }, 50);
    }
    //initial event handler to detect when intel is ready to roll
    document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);
</script>
<script src="js/appframework.ui.min.js"></script>
<script>
    if(isIntel)
        $.ui.autoLaunch = false;
    $.ui.useOSThemes = true; //Change this to false to force a device theme
    $.ui.blockPageScroll();
    $(document).ready(function () {
        if ($.ui.useOSThemes && (!$.os.ios||$.os.ios7))
            $("#afui").removeClass("ios");
    });
</script>
<link href="css/icons.css" rel="stylesheet" type="text/css">
<link href="css/af.ui.css" rel="stylesheet" type="text/css">
</head>

<div id="afui" class="ios">
    <div id="header" class="header"></div>
    <div id="content" style="">
        <div class="panel" title="Main" id="main" selected="selected" style="" data-appbuilder-object="page"
        data-header="header_1">

        </div>
    </div>
    <div id="navbar" class="footer">something on footer 
    </div>


    <header id="header_1" data-appbuilder-object="header"> <a id="backButton" href="#" class="button">Baca</a>
        <h1 class="">Custom Title</h1> 
    </header>
</div>
    <body style="background-color:blue">
        bla bla bla
</body>

</html>

after opening graph tab, it delete de body tag

  <header id="header_1" data-appbuilder-object="header"> <a id="backButton" href="#" class="button">Baca</a>
        <h1 class="">Custom Title</h1> 
    </header>
</div>

bla bla bla
</body>

</html>

and I can't adding again...

sorry for my bad english.

도움이 되었습니까?

해결책

To achieve what I think you are trying to do, you have to change the panel background style in App Starter/App Framework applications.

The css file af.ui.css applies the style guidelines of each of the underlying platforms so iOS apps will look like iOS widgets, Android apps like Android, Windows like Windows, etc.

App Starter uses App Framework and creates a starter layout for you using a panel. When you change the background color it is overwritten by af.ui.css because the panel is rendered on top of the body background.

Using Intel XDK version 876:

  • Click on Start a New Project
  • Click Use App Starter
  • Click on Develop tab
  • Click on Code button
  • Change line 41 or the div class "panel" to : div class="panel" title="Main" data-nav="nav_0" id="main" selected="selected" style="background-color: blue;" (see code below)
  • Click File >> Save
  • Click on Design button

Panel background should be blue.

You need to place your html div tags after the head tags into the body tags. This is where your user visible content should always go. See below:

<body>
<div id="afui" class="ios">
<div id="header" class="header"></div>
<div id="content" style="">
    <div class="panel" title="Main" data-nav="nav_0" id="main" selected="selected"
    style="background-color: blue;">
        <a class="button" href="#" style="" data-appbuilder-object="button">Hello World</a>
    </div>
</div>
<div id="navbar" class="footer">
    <a href="#main" class="icon home">Home</a>
</div>
<header id="header_0" data-appbuilder-object="header">
    <a id="backButton" href="#" class="button backButton" style="visibility: visible; ">Back</a>
    <h1 id="pageTitle" class="">test</h1> 
</header>
<nav id="nav_0" data-appbuilder-object="nav">
    <h1>Side Menu</h1>
</nav>
</div>
</body>

I was able to reproduce the body tag disappearing, this is because AppStarter tries to parse the layout for the Design view and sometimes removes tags it doesn't understand. I will file a bug for you for the Intel XDK that setting style on the body tag in App Starter should not delete or modify existing tags.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top