locked
WinJS ToggleSwitch wird nicht angezeigt? RRS feed

 > 

  • Frage

  • Question
    Anmelden
    0
    Anmelden

    Hallo zusammen,

    ich entwickle derzeit eine App auf HTML5/JS-Basis und komme nun an den Punkt, an dem meine App soweit fertig ist und nur noch die Optionen fehlen.

    Also habe ich in einem Div diesen Code:

    <div class="inner">
            <div style="width: auto; height: 20px;"></div>
            <h2 style="font-family: 'Segoe UI'">Einstellungen</h2>
            <div id="musicswitch" data-win-control="WinJS.UI.ToggleSwitch" data-win-options="{title: 'Musik', labelOff: 'Aus', labelOn: 'An', checked: false}"></div>
            <h2>Anderer Inhalt</h2>
        </div>

    Angezeigt werden aber nur die zwei Überschriften - füge ich den exakt gleichen Code in meine default.html ein, funktioniert auf einmal alles...

    Woran liegt das? Der header ist bei beiden Dokumenten nahezu identisch, nur dass ich bei meiner "Problemseite" noch zusätzliche Skripts einfüge... Beide Dokumente enthalten alle Basisskripts und Stylesheets...

    Ich sehe absolut nicht, wo das Problem liegt!

    Schon einmal im Voraus vielen Dank für Eure Antworten

    Montag, 25. Februar 2013 18:58

Antworten

  • Question
    Anmelden
    0
    Anmelden
    Lösung:
    Ich hatte in meinen JavaScripts die innerHTML-Funktion verwendet um Inhalte ein- und auszulesen... Da das aber laut VisualStudio eine Sicherheitslücke wäre, muss man nach einer Alternativlösung suchen, oder seine Scripts umschreiben, sodass keine HTML-Elemente aus einem String definiert werden...
    (Die createElement-Funktionen sind weiterhin ok...)

    Ich hoffe das hilft allen, die das gleiche Problem haben ^^

    Liebe Grüße
    Philip
    Montag, 4. März 2013 17:45

Alle Antworten

  • Question
    Anmelden
    0
    Anmelden

    Meine "Problemseite":

    <!DOCTYPE html>
<html>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />

<title>
FlipIt Win8-Style
</title>
<!-- WinJS-Verweise -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <!-- FlipIt references -->
    <link href="style.css" rel="stylesheet" />
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>


<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/field_define.js"></script>
<script type="text/javascript" src="js/level.js"></script>

<script type="text/javascript">
    var appData = Windows.Storage.ApplicationData.current.roamingSettings;
    var clickcount = 0;

    var musicpl = false;
    var soundpl = false;

    if (appData.values['music']) {
        musicpl = appData.values['music'];
    }
    else {
        musicpl = false;
    }
    if (appData.values['sound']) {
        soundpl = appData.values['sound'];
    }
    else {
        soundpl = false;
    }


    if (appData.values["actlevel"]) {
        var level = appData.values["actlevel"] - 1;
    }
    else {
        var level = 0;
        appData.values["actlevel"] = 0;
    }


</script>
<script type="text/javascript" src="js/main.js"></script>

</head>
<body>

<div id="ctrlsidebar">
    <div class="inner">
        <div class="inner">
            <div style="width: auto; height: 20px;"></div>
            <h2 style="font-family: 'Segoe UI';">Einstellungen</h2>
            <div data-win-control="WinJS.UI.ToggleSwitch" data-win-options="{title: 'Musik', labelOff: 'Aus', labelOn: 'An', checked: 'false'}"></div>
        </div>
    </div>
</div>

<div id="outerwrap">
<div class="wrapper">
<div class="notif no1"><div class="inner"><img src="images/blue_badge.png" class="msgimg" /><b>Erster Aha-Effekt</b><br />(Auszeichnung erhalten)</div></div>
<div class="notif no2"><div class="inner"><img src="images/orange_badge.png" class="msgimg" /><b>Schlauer Kombinierer</b><br />(Auszeichnung erhalten)</div></div>
<div class="notif no3"><div class="inner"><img src="images/silver_badge.png" class="msgimg" /><b>Hirnknoten</b><br />(Auszeichnung erhalten)</div></div>
<div class="notif no4"><div class="inner"><img src="images/golden_badge.png" class="msgimg" /><b>Klickkrampf</b><br />(Auszeichnung erhalten)</div></div>
<div class="notif no5"><div class="inner"><img src="images/green_badge.png" class="msgimg" /><b>Hast du dein Handtuch dabei?</b><br />(Auszeichnung erhalten)</div></div>
<div class="notif no6"><div class="inner"><img src="images/medal_press.png" class="msgimg" /><b>Dr&ouml;lf!</b><br />(Auszeichnung erhalten)</div></div>
<a href="default.html"><button class="win-backbutton bitleft"></button></a>
<center id="ctpart">
<h1>Level <span id="levelspan"></span></h1>
<div id="outerstruct">
	<div id="v1" class="vein vinactv"></div>
	<div id="v2" class="vein vinactv"></div>
	<div id="v3" class="vein vinactv"></div>
	<div id="v4" class="vein vinactv"></div>
	<div id="v5" class="vein vinactv"></div>
	<div id="v6" class="vein vinactv"></div>
	<table id="structtable" cellpadding="3" border="0" cellspacing="0">
		<tr>
			<td>
				<div class="outer">
					<div id="1" class="boxb part">
					</div>
				</div>
			</td>
			<td>
				<div class="outer">
					<div id="2" class="boxb part">
					</div>
				</div>
			</td>
			<td>
				<div class="outer">
					<div id="3" class="boxb part">
					</div>
				</div>
			</td>
			<td>
				<div class="outer">
					<div id="4" class="boxb part">
					</div>
				</div>
			</td>
			<td>
				<div class="outer">
					<div id="5" class="boxb part">
					</div>
				</div>
			</td>
			<td>
				<div class="outer">
					<div id="6" class="boxb part">
					</div>
				</div>
			</td>
		</tr>
		<tr>
			<td>
				<div class="outer">
					<div id="7" class="boxb part">
					</div>
				</div>
			</td>
			<td>
				<div class="outer">
					<div id="8" class="boxb part">
					</div>
				</div>
			</td>
			<td>
				<div class="outer">
					<div id="9" class="boxb part">
					</div>
				</div>
			</td>
			<td>
				<div class="outer">
					<div id="10" class="boxb part">
					</div>
				</div>
			</td>
			<td>
				<div class="outer">
					<div id="11" class="boxb part">
					</div>
				</div>
			</td>
			<td>
				<div class="outer">
					<div id="12" class="boxb part">
					</div>
				</div>
			</td>
		</tr>
		<tr>
			<td>
				<div class="outer">
					<div id="13" class="boxb part">
					</div>
				</div>
			</td>
			<td>
				<div class="outer">
					<div id="14" class="boxb part">
					</div>
				</div>
			</td>
			<td>
				<div class="outer">
					<div id="15" class="boxb part">
					</div>
				</div>
			</td>
			<td>
				<div class="outer">
					<div id="16" class="boxb part">
					</div>
				</div>
			</td>
			<td>
				<div class="outer">
					<div id="17" class="boxb part">
					</div>
				</div>
			</td>
			<td>
				<div class="outer">
					<div id="18" class="boxb part">
					</div>
				</div>
			</td>
		</tr>
		<tr>
			<td>
				<div class="outer">
					<div id="19" class="boxb part">
					</div>
				</div>
			</td>
			<td>
				<div class="outer">
					<div id="20" class="boxb part">
					</div>
				</div>
			</td>
			<td>
				<div class="outer">
					<div id="21" class="boxb part">
					</div>
				</div>
			</td>
			<td>
				<div class="outer">
					<div id="22" class="boxb part">
					</div>
				</div>
			</td>
			<td>
				<div class="outer">
					<div id="23" class="boxb part">
					</div>
				</div>
			</td>
			<td>
				<div class="outer">
					<div id="24" class="boxb part">
					</div>
				</div>
			</td>
		</tr>
		<tr>
			<td>
				<div class="outer">
					<div id="25" class="boxb part">
					</div>
				</div>
			</td>
			<td>
				<div class="outer">
					<div id="26" class="boxb part">
					</div>
				</div>
			</td>
			<td>
				<div class="outer">
					<div id="27" class="boxb part">
					</div>
				</div>
			</td>
			<td>
				<div class="outer">
					<div id="28" class="boxb part">
					</div>
				</div>
			</td>
			<td>
				<div class="outer">
					<div id="29" class="boxb part">
					</div>
				</div>
			</td>
			<td>
				<div class="outer">
					<div id="30" class="boxb part">
					</div>
				</div>
			</td>
		</tr>
		<tr>
			<td>
				<div class="outer">
					<div id="31" class="boxb part">
					</div>
				</div>
			</td>
			<td>
				<div class="outer">
					<div id="32" class="boxb part">
					</div>
				</div>
			</td>
			<td>
				<div class="outer">
					<div id="33" class="boxb part">
					</div>
				</div>
			</td>
			<td>
				<div class="outer">
					<div id="34" class="boxb part">
					</div>
				</div>
			</td>
			<td>
				<div class="outer">
					<div id="35" class="boxb part">
					</div>
				</div>
			</td>
			<td>
				<div class="outer">
					<div id="36" class="boxb part">
					</div>
				</div>
			</td>
		</tr>
	</table>
</div>
    <br />
        <span class="buttonlink" title="Falls Sie nicht mehr weiterkommen..."><span id="resetbutton">Level neu starten</span></span>
	<br />
        <div class="buttonwrap"><div id="soundbutton" title="Sound aktivieren/deaktivieren"></div><div id="audiobutton" title="Musik an/aus"></div></div>
    <br />
	<span class="whitetext">FlipIt Version 1.0.0.0</span><br />
	<span class="whitetext">&copy; Philip M&auml;rz</span>
</center>
</div>
</div>
</body>
</html>

    Meine "default.html" (in der das ToggleSwitch-Element perfekt funktioniert):

    <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <title>FlipIt</title>

    <!-- WinJS-Verweise -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <!-- FlipIt references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
    <script src="/js/jquery.js"></script>

</head>
<body>
    <div id="outerwrap">
    <div class="wrapper">
    <h1>FlipIt</h1>
    <div class="line">
    <a href="newgame.html">
        <div class="panelelmnt" style="background-image: url('images/newgame.png');">
            <div class="paneldescr">
                <div class="inner">
                <h2>Neues Spiel</h2>
                Achtung, bestehender Spielstand wird gel&ouml;scht!
                </div>
            </div>
        </div>
    </a>
    <a href="level.html">
        <div class="panelelmnt" style="background-image: url('images/contgame.png');">
            <div class="paneldescr">
                <div class="inner">
                <h2>Spiel fortsetzen</h2>
                Level <span id="Levelspan"></span>
                </div>
            </div>
        </div>
    </a>
    <a href="medals.html">
        <div class="panelelmnt" style="background-image: url('images/medals.png');">
            <div class="paneldescr">
                <div class="inner">
                <h2>Auszeichnungen</h2>
                </div>
            </div>
        </div>
    </a>
    </div>
    <div class="line">
    <a href="instructions.html">
        <div class="panelelmnt" style="background-image: url('images/instructions.png');">
            <div class="paneldescr">
                <div class="inner">
                <h2>Anleitung</h2>
                </div>
            </div>
        </div>
    </a>
    <a href="impressum.html">
        <div class="panelelmnt" style="background-image: url('images/impressum.png');">
            <div class="paneldescr">
                <div class="inner">
                <h2>Impressum</h2>
                </div>
            </div>
        </div>
    </a>
    </div>
    </div>
    </div>
    
</body>

<script type="text/javascript">
    var appData = Windows.Storage.ApplicationData.current.roamingSettings;
    if (appData.values["actlevel"]) {
        var level = appData.values["actlevel"];
    }
    else {
        var level = 0;
    }


    $(document).ready(function () {
        
        var actleveltext = level;
        $("#Levelspan").html(actleveltext);
    });

</script>

</html>

    Ich hoffe, das hilft Euch weiter...

    Ich hänge jetzt schon 3 Wochen an diesem einen Problem...

    Mittwoch, 27. Februar 2013 10:00
  • Question
    Anmelden
    0
    Anmelden
    Lösung:
    Ich hatte in meinen JavaScripts die innerHTML-Funktion verwendet um Inhalte ein- und auszulesen... Da das aber laut VisualStudio eine Sicherheitslücke wäre, muss man nach einer Alternativlösung suchen, oder seine Scripts umschreiben, sodass keine HTML-Elemente aus einem String definiert werden...
    (Die createElement-Funktionen sind weiterhin ok...)

    Ich hoffe das hilft allen, die das gleiche Problem haben ^^

    Liebe Grüße
    Philip
    Montag, 4. März 2013 17:45