[sRogge]

Guten Abend liebe (hoffendlich) Wissenden,

ich versuche grade, ein Gadget für die Vista Sidebar zu erstellen und bin mal wieder am Verzweifeln!
Ich würde gerne ein Flyout (also so ein Ding, was sich aufkalppt) erstellen. Habe dafür dann eine einfache HTML-Datei erstllen und jetzt leider keine Ahnung wie ich das zum aufklappen bekomme.

Hab so ein bissel mitbekommen, dass man da wohl ne js-Datei erstellen muss?!?
Weiß jemand wie das geht und kann mir das mal erklären (ein passenden JavaScript geben?!?)?

Vielen Dank schonmal und ich hoffe auf Hilfe zu treffen...
Gruß
Simon

[imagodespira]

Ich habe es selber noch nicht probiert, aber den Glass-Rahmen um das Gadget erstellt meiner Meinung nach das Vista selbst. Man muss per Javascript nur einem versteckten Element sagen, dass es sichtbar werden soll...

<div id="myFlyout" style="visibility: hidden">hier das versteckte zeug rein</div>

das "hidden muss auf visible gestellt werden, per javascript.

Beispiel hab ich leider keins, da ich das noch nicht versucht hab:) aber im Internet gibt es haufenweise Scripte die Elemente Sichtbar machen... In der Art sollte es aber gehen (ungetestet, blind getippt):

die Funktion im Script:

<script language="JavaScript">
function zeigMeinFlyout()
{
document.getElementByID("myFlyout")..style.visibility = "visible";
}
</Script>


<!--hier das versteckte Element-->
<div id="myFlyout" style="visibility: hidden">hier das versteckte zeug rein</div>


<!--und ein Testlink zum Funktion aufrufen-->

<a href="java script:void(0)" onClick="zeigMeinFlyout()">Linktext</a>

versuche es mal, ich hab es wie gesagt nicht getestet.. aber so die Art sollte es gehen. Das <Div> musst du dann noch mit Farbe,Größe, Position und was auch immer bestücken damit man was richtiges sieht.

imagodespira

... Am besten, Du suchst Dir ein einfaches Gadget aus, was nicht viel macht und schaust Dir den Code an. Das Papierkorb-Gadget war meiner Meinung nach nicht all zu kompliziert aufgebaut und zeigt auch ein Flyout.

... Habs eben doch mal probiert, das vergrößert sich nicht muss ich morgen testen, jetzt hast du mich auch angesteckt das zu probieren

Dieser Beitrag wurde von imagodespira bearbeitet: 12. Februar 2007 - 22:51

[sRogge]

Hi und vielen Dank für deine Hilfe schonmal,

ich hab das jetzt soweit mal ausprobiert. Hab also jetzt einen Bereich, den man durch einen Button ein- und ausblenden kann. (Hab das mit der Eigenschaft display gemacht)
Klapp auch soweit, nur weiß ich jetzt nicht, wie ich das an die richtige stelle bekomme, also links neben den eigendlichen Gadget.

Gruß Simon

[imagodespira]

Hi, funktioniert aber soweit das flyout ?

... Wenn ja, werde ich es mit Display versuchen.

Die Position:
<div style="position: absolute; left: 100px; top: 100px;>

die 100 pixel werden dann von oben links absolut zur Seite genommen.

[sRogge]

Hi,
ne das Flyout klappt ja nicht auf, sondern öffnet sich nach rechts (ist also nicht /nicht ganz zu sehen. Das ist auch das problem an style position... .

Ich glaub wir sind auf der komplett falschen Spur:)
Hab ein relativ einfaches Gadget mit Flyout gefunden (TV Today Tagestipp).
Hier ist die für das Flyout zuständige Stelle:

function showFlyout () {
System.Gadget.Flyout.file = "flyout.htm";
hideFlyout();
System.Gadget.Flyout.show = true;
System.Gadget.Flyout.onShow = function() {
System.Gadget.Flyout.document.getElementById("container").innerHTML = flyoutHTML;
}
}

function hideFlyout () {
if (System.Gadget.Flyout.show) {
System.Gadget.Flyout.show = false;
}
}

Das wird dann halt mit showFlyout aufgerufen. Bin grad näheres am herausfinden.

Gruß Simon

[sRogge]

Und ich bins nochmal,
ich hab es geschaft und es ist im Grunde ganz einfach.

1. In den head kommt folgendes Script (von http://www.codeproje.....herwidget.asp)

<script language="javascript">
function showFlyout() {
if (System.Gadget.Flyout.show==false) {
System.Gadget.Flyout.file = "flyout.html";
System.Gadget.Flyout.show=true;
System.Gadget.Flyout.onHide = blankFunction;
} else {
System.Gadget.Flyout.show=false;
}
}
</script>

2. Da wo grade "flyout.html" steht kommt der Ordner/Name des Flyouts hin.

3. Irgendwo im body muss die Funktion aufgerufen werden, z. B. durch einen Button:
<input name="Flyout" type="button" value="Flyout" onclick="java script:showFlyout()" class="buttonlist" />

Fertig, das wars und funzt super, trotzdem danke für deine Hilfe.

Gruß Simon

Dieser Beitrag wurde von sRogge bearbeitet: 21. Februar 2007 - 14:47

[imagodespira]

Hallo bei Microsoft in der MSDN gibt es ein Tutorial, leider in Englisch:

http://msdn.microsoft.com/library/default....erviews/gdo.asp

In Deutsch hab ich noch nichts gutes gefunden.


@sRogge: Danke für die Aktualisierung. Ich probiere das gerade mit dem Flyout, geht wunderbar

[sRogge]

Hi Sander
Es gibt aber auch deutsche Anleitungen z. B. von MS http://www.microsoft.com/germany/technet/s...adgets-pt1.mspx , musst halt nur ein bissel HTML können.
Gruß Simon

Dieser Beitrag wurde von sRogge bearbeitet: 20. Februar 2007 - 17:11