Replizieren von Google Chrome Browser Aktionen Popup-Effekt in einer Firefox-Erweiterung

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

Frage

Chrome Browser Aktionen bieten einen wirklich schönen Pop-up-Effekt standardmäßig.

dead Images Bild Link entfernt

  • Schweben über das Symbol in der Symbolleiste sorgt für eine aufgeräumte Hover-Effekt.

  • Durch Klicken auf das Symbol in der Symbolleiste zeigt eine schöne Animation, die die Popup-HTML-Datei öffnet.

  • Das Popup wird mit der Taste ausgerichtet, die gedrückt wird.

  • Durch Klicken auf das Symbol in der Symbolleiste wieder ausblendet den Popup.

Alle Gedanken auf, wie man diesen Effekt mit Firefox-Erweiterungen zu nähern? Hat jemand erfolgreich etwas ähnlich wie diese Wirkung erzielt?

Danke.

War es hilfreich?

Lösung 2

Falls jemand erforscht diese und versuchen, die Antwort zu erfahren, schließlich eine Platte innerhalb des toolbarpalette in der browser.xul Datei mit gut für mich gearbeitet.

Andere Tipps

Für alle, die nur mit Ihrer ersten Firefox-Erweiterung beginnen, wie ich hier getan habe, ist ein Beispielcode:

yourextname \ chrome \ content \ browser.xul 

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://yourextname/skin/toolbar.css" type="text/css"?>

<overlay id="yourextname_overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <popupset>
        <menupopup id="yourextname_menu_popup">
            <menuitem label="Website" oncommand="gBrowser.selectedTab = gBrowser.addTab('http://www.your-website.com/');" />
            <menuseparator />
            <menuitem label="Options" oncommand="window.open('chrome://yourextname/content/options.xul', 'Options', 'dialog,chrome,modal,titlebar,toolbar,centerscreen=yes');" />
        </menupopup>

        <panel id="yourextname_popup" noautohide="false" noautofocus="true">
            <label control="vvvname" value="Name:"/><textbox id="vvvname"/>
        </panel>
    </popupset>

    <toolbarpalette id="BrowserToolbarPalette">
        <toolbarbutton id="yourextname_toolbar_button" class="toolbarbutton-1" context="yourextname_menu_popup" oncommand="document.getElementById('yourextname_popup').openPopup(document.getElementById('yourextname_toolbar_button'), 'after_start', 0, 0, false, false);" label="button name" tooltiptext="tooltip" />
    </toolbarpalette>
</overlay>

yourextname \ Haut \ toolbar.css
Dieses fügt Symbol der Symbolleiste auf die Schaltfläche: 

#yourextname_toolbar_button {
    list-style-image:url(chrome://yourextname/skin/icon_024.png);
}

toolbar[iconsize="small"] #yourextname_toolbar_button {
    list-style-image:url(chrome://yourextname/skin/icon_016.png);
}

yourextname \ chrome.manifest 

content yourextname chrome/content/
overlay chrome://browser/content/browser.xul chrome://yourextname/content/overlay.xul

skin    yourextname classic/1.0 skin/
style   chrome://global/content/customizeToolbar.xul chrome://yourextname/skin/toolbar.css

. HINWEIS: Stellen Sie sicher, dass Sie ersetzen alle „yourextname“ Strings mit etwas einzigartig, am besten mit Ihrem Nebenstellennamen

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top