11

Chrome ブラウザ アクションは、デフォルトで非常に優れたポップアップ効果を提供します。

デッド ImageShack の画像リンクが削除されました

  • ツールバー アイコンにカーソルを合わせると、きちんとしたホバー効果が得られます。

  • ツールバー アイコンをクリックすると、ポップアップ HTML ファイルを開く素敵なアニメーションが表示されます。

  • ポップアップは、押されたボタンに合わせて配置されます。

  • ツールバー アイコンをもう一度クリックすると、ポップアップがフェードアウトします。

Firefox 拡張機能でこの効果を近似する方法について何か考えはありますか? この効果に似たものをうまく達成した人はいますか?

ありがとう。

4

2 に答える 2

7

私がここで行ったように、最初の Firefox 拡張機能を使い始めたばかりの人のために、サンプル コードを示します。

あなたのextname\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\skin\toolbar.css
これにより、ツールバー ボタンにアイコンが追加されます。

#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);
}

あなたのextname\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

注: すべての「yourextname」文字列は、拡張機能名に最適な一意のものに置き換えてください。

于 2011-05-25T09:34:53.763 に答える
4

誰かがこれを調査して答えを見つけようとしている場合に備えて、最終的には browser.xul ファイルの toolbarpalette 内のパネルを使用するとうまくいきました。

于 2010-01-27T20:50:04.627 に答える