diff options
Diffstat (limited to 'files/zh-cn/mozilla/tech/xul/toolbars')
3 files changed, 0 insertions, 580 deletions
diff --git a/files/zh-cn/mozilla/tech/xul/toolbars/creating_toolbar_buttons/index.html b/files/zh-cn/mozilla/tech/xul/toolbars/creating_toolbar_buttons/index.html deleted file mode 100644 index 363a3b9e2b..0000000000 --- a/files/zh-cn/mozilla/tech/xul/toolbars/creating_toolbar_buttons/index.html +++ /dev/null @@ -1,183 +0,0 @@ ---- -title: 添加工具栏按钮 (定制工具栏) -slug: Mozilla/Tech/XUL/Toolbars/Creating_toolbar_buttons -translation_of: Archive/Mozilla/XUL/Toolbars/Creating_toolbar_buttons ---- -<p>此文章解释如何使用 <a href="/en/XUL_Overlays" title="en/XUL_Overlays">overlays</a> 为工具包（firefox，Thunderbird 或 Kompozer) 添加工具栏按钮（就是浏览器右上方一系列按钮，home，下载之类的）。适用用户是拥有 <a href="/en/XUL" title="en/XUL">XUL</a> 和 <a href="/en/CSS" title="en/CSS">CSS</a> 基础知识的 <a href="/en/Extensions" title="en/Extensions">扩展</a> 开发人员。</p> -<p>我们假设您已经会创建基础的火狐插件，并且已经成功创建了 <a href="/en/Building_an_Extension" title="en/Building_an_Extension">Hello World extension</a> ，另外，还有一份更加完全的初学者示例指南，请查看 <a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Toolbars/Custom_toolbar_button" title="en/Custom_Toolbar_Button">自定义工具栏按钮。</a></p> -<h3 id="Creating_an_overlay" name="Creating_an_overlay">创建一个 overlay</h3> -<p>The first step is to create an <a href="/en/XUL_Overlays" title="en/XUL_Overlays">overlay</a> for the document containing the toolbar you wish to enhance. Explaining overlays is beyond the scope of this tutorial -- you can read about them in the <a href="/en/XUL_Tutorial/Cross_Package_Overlays" title="en/XUL_Tutorial/Cross_Package_Overlays">XUL Tutorial</a>.</p> -<p>To overlay a document, you need to know its URI. You can find a list of URIs for the most commonly overlaid documents at the <a href="#A_list_of_commonly_overlayed_windows_with_toolbars">bottom of this page</a>.</p> -<div class="note"> - <strong>Note:</strong> Some people overlay <span class="nowiki"><code>chrome://messenger/content/mailWindowOverlay.xul</code></span>. That should cause the button to appear on all windows that <code>mailWindowOverlay.xul</code> is applied to (i.e. Main window and View Message window). This needs to be looked into.</div> -<h3 id="Adding_the_toolbar_button" name="Adding_the_toolbar_button">在工具栏添加按钮</h3> -<p>Toolkit applications have customizable toolbars; therefore, it's common practice for extensions to add their toolbar buttons to the toolbar palette, rather than adding them directly to the toolbar. The latter is possible but is not recommended and is harder to implement.</p> -<p>Adding a button to the toolbar palette is very easy. Just add code like this to your overlay:</p> -<pre><toolbarpalette id="BrowserToolbarPalette"> - <toolbarbutton id="myextension-button" class="toolbarbutton-1" - label="&toolbarbutton.label;" tooltiptext="&toolbarbutton.tooltip;" - oncommand="MyExtension.onToolbarButtonCommand(event);"/> -</toolbarpalette> -</pre> -<p>注意:</p> -<ul> - <li>The <code>id</code> of the palette (<code>BrowserToolbarPalette</code> in the example) depends on the window whose toolbar you wish to insert a button into. See <a href="#A_list_of_commonly_overlayed_windows_with_toolbars"> below</a> for the list of common palette IDs.</li> - <li><code>class="toolbarbutton-1"</code> makes the toolbar button appear correctly in Icons and Text mode; it also adjusts padding.</li> - <li>If you need to handle middle-click, add this line after the oncommand line.</li> -</ul> -<pre class="prettyprint language-html"><span class="pln">onclick</span><span class="pun">=</span><span class="str">"checkForMiddleClick(this, event)"</span></pre> -<ul> - <li>you can also handle middle-lick and right-click using <code>onclick</code> handler and check <code>event.button</code> in it. like this:</li> -</ul> -<pre class="language-html"><toolbarpalette id="BrowserToolbarPalette"> - <toolbarbutton id="myextension-button" class="toolbarbutton-1" - label="&toolbarbutton.label;" tooltiptext="&toolbarbutton.tooltip;" - onclick="MyExtension.onclick(event);"/> -</toolbarpalette></pre> -<pre>onclick: function(event) { - switch(event.button) { - case 0: - // Left click - break; - case 1: - // Middle click - break; - case 2: - // Right click - break; - } -} -</pre> -<p>To add more buttons, put more <code><toolbarbutton></code> elements inside the <code><toolbarpalette></code> element. Wrap elements other than <code><toolbarbutton></code> in <code><toolbaritem></code>.</p> -<h3 id="Styling_the_button" name="Styling_the_button">为按键应用风格</h3> -<p>Most toolbar buttons have an icon. To attach an image to the button we use standard Mozilla skinning facilities. If you're unfamiliar with how that works, read the <a class="external" href="http://www.borngeek.com/firefox/toolbar-tutorial/" title="http://www.borngeek.com/firefox/toolbar-tutorial/">skinning section of Jonah Bishop's excellent Toolbar Tutorial</a>. Although the article covers creating an entire toolbar, rather than just a button, it has a great explanation of the techniques we'll use here.</p> -<h4 id="Icon_size" name="Icon_size">图标大小</h4> -<p>Toolbar buttons can have two different sizes -- big and small. This means you'll need to provide two icons for each of your toolbar buttons. The dimensions of the icons in various applications for both modes are summarized in the following table (feel free to add information about other applications):</p> -<table> - <tbody> - <tr> - <th>Application (Theme name)</th> - <th>Big icon size</th> - <th>Small icon size</th> - </tr> - <tr> - <td>Firefox 1.0 (Winstripe)</td> - <td>24x24</td> - <td>16x16</td> - </tr> - <tr> - <td>Thunderbird 1.0 (Qute)</td> - <td>24x24</td> - <td>16x16</td> - </tr> - </tbody> -</table> -<h4 id="The_stylesheet" name="The_stylesheet">CSS 样式表</h4> -<p>To set the image for your toolbar button, use the following CSS rules:</p> -<pre>/* skin/toolbar-button.css */ - -#myextension-button { - list-style-image: url("chrome://myextension/skin/btn_large.png"); -} - -toolbar[iconsize="small"] #myextension-button { - list-style-image: url("chrome://myextension/skin/btn_small.png"); -} -</pre> -<h4 id="Applying_the_stylesheet" name="Applying_the_stylesheet">应用样式表</h4> -<p>Remember to attach the stylesheet you created to both the overlay file and the Customize Toolbar window. To attach it to the overlay, put this processing instruction (PI) at the top of the overlay file:</p> -<pre class="eval"><?xml-stylesheet href="<a class="external" rel="freelink">chrome://myextension/skin/toolbar-button.css</a>" type="text/css"?> -</pre> -<div class="note"> - <strong>Note:</strong> The CSS file with your toolbar styles needs to be included in the overlay file, as you would expect, but also in the <code>chrome.manifest</code> file. This is very important because the toolbar customization dialog won't work correctly without this.</div> -<p>To include the style on your chrome.manifest file:</p> -<pre class="eval">style <a class="external" rel="freelink">chrome://global/content/customizeToolbar.xul</a> <a class="external" rel="freelink">chrome://myextension/skin/toolbar-button.css</a> -</pre> -<p>If you are developing for Firefox 1.0, attach it to the Customize Toolbar window (<code><a class="external" rel="freelink">chrome://global/content/customizeToolbar.xul</a></code>) using <code>skin/contents.rdf</code>. The code looks like this:</p> -<pre><?xml version="1.0"?> -<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" - xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> - - <Seq about="urn:mozilla:skin:root"> - <li resource="urn:mozilla:skin:classic/1.0"/> - </Seq> - - <Description about="urn:mozilla:skin:classic/1.0"> - <chrome:packages> - <Seq about="urn:mozilla:skin:classic/1.0:packages"> - <li resource="urn:mozilla:skin:classic/1.0:myextension"/> - </Seq> - </chrome:packages> - </Description> - - <Seq about="urn:mozilla:stylesheets"> - <li resource="chrome://global/content/customizeToolbar.xul"/> - </Seq> - - <Seq about="chrome://global/content/customizeToolbar.xul"> - <li>chrome://myextension/skin/toolbar-button.css</li> - </Seq> -</RDF> -</pre> -<p>The <code>skin/contents.rdf</code> file is denigrated in developing for later releases of Firefox. Extensions for Firefox/Thunderbird 1.5 and above should instead use something like this in their <a href="/en/Chrome_Registration" title="en/Chrome_Registration">chrome.manifest</a>:</p> -<pre class="eval">skin myextension classic/1.0 chrome/skin/ -style <a class="external" rel="freelink">chrome://global/content/customizeToolbar.xul</a> <a class="external" rel="freelink">chrome://myextension/skin/toolbar-button.css</a> -ia</pre> -<p>Take note of the <a class="external" href="http://kb.mozillazine.org/Getting_started_with_extension_development#Packaging">Packaging section</a> in this article; you may need to include .jar references if you are delivering your extension as a .xpi file.</p> -<h3 id="Common_mistakes" name="Common_mistakes">常见错误</h3> -<p>This is a list of the most common mistakes made by extension authors, including both symptoms and solutions.</p> -<p><strong>Problem:</strong> The whole set of default buttons is painted on the toolbar or in the Customize Toolbars window, instead of your own icon.</p> -<p><strong>Caused by:</strong> Malformed or not applied stylesheet.</p> -<p><strong>Solution:</strong> Check to be sure your stylesheet is correct, make sure your <code>contents.rdf</code> (or <code>chrome.manifest</code>) is correct, and be sure you didn't forget to <a href="#Applying_the_stylesheet">apply the stylesheet</a> to <code>customizeToolbar.xul</code>.</p> -<h3 id="A_list_of_commonly_overlayed_windows_with_toolbars" name="A_list_of_commonly_overlayed_windows_with_toolbars">常见工具栏的 overlayed windows</h3> -<table class="fullwidth-table"> - <tbody> - <tr> - <th>URL</th> - <th>Application and affected window(s)</th> - <th>Palette id</th> - </tr> - <tr> - <td><small><a class="external" rel="freelink">chrome://browser/content/browser.xul</a></small></td> - <td>Firefox - Main window</td> - <td>BrowserToolbarPalette</td> - </tr> - <tr> - <td><small><a class="external" rel="freelink">chrome://navigator/content/navigator.xul</a></small></td> - <td>SeaMonkey 2.0 - Browser window</td> - <td>BrowserToolbarPalette</td> - </tr> - <tr> - <td><small><a class="external" rel="freelink">chrome://messenger/content/messenger.xul</a></small></td> - <td>Thunderbird - Main window</td> - <td>MailToolbarPalette</td> - </tr> - <tr> - <td><small><a class="external" rel="freelink">chrome://messenger/content/messenger...gercompose.xul</a></small></td> - <td>Thunderbird - Compose window</td> - <td>MsgComposeToolbarPalette</td> - </tr> - <tr> - <td><small><a class="external" rel="freelink">chrome://messenger/content/addressbo...ddressbook.xul</a></small></td> - <td>Thunderbird - Address book</td> - <td>AddressBookToolbarPalette</td> - </tr> - <tr> - <td><small><a class="external" rel="freelink">chrome://editor/content/editor.xul</a></small></td> - <td>Kompozer - Main window</td> - <td>NvuToolbarPalette</td> - </tr> - <tr> - <td><small><a class="external" rel="freelink">chrome://calendar/content/calendar.xul</a></small></td> - <td>Sunbird - Main window</td> - <td>calendarToolbarPalette</td> - </tr> - </tbody> -</table> -<h3 id="More_information" name="More_information">更多信息</h3> -<ul> - <li>XulPlanet.com references: <a class="external" href="/en/XUL/toolbarbutton" title="https://developer.mozilla.org/en/XUL/toolbarbutton"><code><toolbarbutton></code></a>, <a class="external" href="/en/XUL/toolbaritem" title="https://developer.mozilla.org/en/XUL/toolbaritem"><code><toolbaritem></code></a>.</li> - <li><a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=220220">How to adjust toolbarbutton's label position</a></li> - <li><a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=189667">A forum thread</a> about adding an item to the toolbar (instead of just adding it to palette) right after an extension is installed. Note that doing this is not recommended.</li> - <li>There is <a href="/en/XUL/Toolbars/Custom_toolbar_button/SeaMonkey" title="en/Custom_Toolbar_Button/SeaMonkey">another page</a> on mdc with information about adding buttons to various windows in SeaMonkey. Includes useful information about overlays for ChatZilla.</li> -</ul> diff --git a/files/zh-cn/mozilla/tech/xul/toolbars/custom_toolbar_button/index.html b/files/zh-cn/mozilla/tech/xul/toolbars/custom_toolbar_button/index.html deleted file mode 100644 index 9030e502a8..0000000000 --- a/files/zh-cn/mozilla/tech/xul/toolbars/custom_toolbar_button/index.html +++ /dev/null @@ -1,332 +0,0 @@ ---- -title: 自定义工具栏按钮 -slug: Mozilla/Tech/XUL/Toolbars/Custom_toolbar_button -translation_of: Archive/Mozilla/XUL/Toolbars/Custom_toolbar_button ---- -<p>此教程教您一步步为 Firefox, SeaMonkey 2.0, Thunderbird 或 Sunbird 制作工具栏按钮 (对于 SeaMonkey 1.x，请查看 <a href="/en/XUL/Toolbars/Custom_toolbar_button/SeaMonkey" title="en/Custom_Toolbar_Button/SeaMonkey">Custom Toolbar Button:SeaMonkey</a>.)</p> -<p>你不需要任何技巧和工具，所以需要的信息全部在本页。</p> -<p> </p> -<h3 id="Introduction" name="Introduction">介绍</h3> -<p>本页所述技术不包括任何黑科技。你可以自己定制属于自己的扩展。</p> -<p>适用示例上的代码可以制作出很多很有用的按钮，如果你懂得 JS 编程，你可以自己编代码，实现更多其他功能。</p> -<p>如果你需要创建一个具某项功能的按钮，那么你来对地方了</p> -<p>在此页你也能学到扩展程序的基础知识，有利于将来写更复杂的插件。注意，扩展程序非常简单，你或许得查看其他教程，那么-主 <a href="/en/Extensions" title="en/Extensions">扩展</a> 页就是您该去的地方。另外， <a href="/en/XUL/Toolbars/Creating_toolbar_buttons" title="en/Creating_toolbar_buttons">创建工具栏按钮</a> 这篇文章（译注：建议先看本文再看这个，那里面有几句没说清楚该放哪去）和 <a href="/en/Building_an_Extension" title="en/Building_an_Extension">创建一个扩展</a> 更好的展示了创建过程。</p> -<h4 id="Supported_applications" name="Supported_applications">支持的程序</h4> -<p>本文中步骤适用于下列 Mozilla 应用：</p> -<ul> - <li>Firefox 1.5 以后</li> - <li>SeaMonkey 2.0 以后</li> - <li>Thunderbird 1.5 以后</li> - <li>Sunbird 0.3 以后</li> -</ul> -<p>提前发行版一般都支持 (alphas, betas 和 release candidates) 。</p> -<p><strong>译注：本文的例子适用于很多Mozilla 开发的应用程序，原文用Application 代表这些程序，所以我按照原文翻译成了应用/程序，所以如果将来遇到应用/程序等字样，就是指Firefox 等。</strong></p> -<div class="note"> - <p><strong>Note: </strong> There is a similar tutorial for SeaMonkey 1.x on the page: <a href="/en/XUL/Toolbars/Custom_toolbar_button/SeaMonkey" title="en/Custom_Toolbar_Button/SeaMonkey">Custom Toolbar Button:SeaMonkey</a></p> - <p>Earlier versions and other Mozilla applications also support extensions, but some parts of this tutorial are not appropriate for them.</p> -</div> -<h4 id="Required_tools" name="Required_tools">所需工具</h4> -<p>需要两个工具，系统一般都默认提供了：</p> -<ul> - <li>能操作文件，文件夹的环境</li> - <li>纯文本编辑器</li> -</ul> -<h5 id="Character_encoding" name="Character_encoding">字符编码</h5> -<p>有些文本编辑器有调整字符编码的选项。</p> -<p>如果你使用拉丁 (ASCII) 字符，那就将你的文本编辑器设为除 Unicode 外的任意编码</p> -<p>如果你的语言包含非拉丁字符，那保存文件时请选择 UTF-8 编码。</p> -<p>要想测试编辑器，新建一个文件<code>test.txt</code>。在文件中输入属于您语言的文字，然后保存。</p> -<p>使用火狐打开此文件，(例如，直接将文件拖动到火狐上，或在菜单中选择 文件 – 打开文件)。</p> -<p>在火狐的菜单栏中，选择 查看– 字符编码 – Unicode (UTF-8)。然后看在此设置下，文本中的文字是否能正常显示。</p> -<p>如果你的文本编辑器不支持 UTF-8，自己上网搜索装一个。</p> -<h4 id="Optional_tools" name="Optional_tools">可选工具</h4> -<p>可以使用任意图像编辑器编辑图片。</p> -<p>可以使用 jar 工具或 zip 工具将此按钮项目压缩成跨平台的安装文件 (XPI)，方便别人安装使用。</p> -<h3 id="Making_a_button" name="Making_a_button">制作一个按钮</h3> -<p>按照下面10步完成</p> -<p>完成所有步骤后，文件夹结构应该如下图所示：</p> -<dl> - <dd> - <img alt="Directory and file structure" class="internal" src="/@api/deki/files/633/=Custom-button-structure.png"></dd> -</dl> -<p> profile 和 <code>extensions</code> 文件夹已存在，需要添加图中其他的文件和文件夹(当然此目录下可能还会有其他文件，只是没显示.)</p> -<div style="margin-left: 4ex;"> - <div style="margin-left: -4ex; width: 4ex; float: left;"> - 1.</div> - 前往应用程序的配置文件夹，然后找到<code>extensions</code> 文件夹。 - <p><strong>注意: </strong> 至于如何找到配置文件夹，请查看：<a class="external" href="http://kb.mozillazine.org/Profile_folder">配置文件夹</a></p> - <p><em>说明: </em> 配置文件夹包含用户指定的设置，和主程序分开存放。所以程序重装或升级之后，这些信息不受影响。</p> - <div style="margin-left: -4ex; width: 4ex; float: left;"> - 2.</div> - 在 <code>extensions</code> 文件夹中，创建一个文件夹，名称如下： - <p>建议直接复制粘贴，以免出错</p> - <dl> - <dd> - <code><a class="link-mailto" href="mailto:custom-toolbar-button@example.com" rel="freelink">custom-toolbar-button@example.com</a></code></dd> - </dl> - <p>按照后面的步骤，创建两个文件和一个文件夹。</p> - <p><em>说明: </em> 此文件夹名称是用于区分不同扩展程序的唯一标识符。在稍后的部分会有详细的标识符。</p> - <div style="margin-left: -4ex; width: 4ex; float: left;"> - 3.</div> - 创建一个文本文档，名称为 <code>install.rdf</code>. - <p>完整复制下面内容，粘贴到文档中：</p> - <pre><?xml version="1.0"?> - -<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" - xmlns:em="http://www.mozilla.org/2004/em-rdf#"> - - <Description - about="urn:mozilla:install-manifest" - - em:name="Custom Button" - em:description="My custom toolbar button" - em:creator="My name" - - em:id="custom-toolbar-button@example.com" - em:version="1.0" - em:homepageURL="http://developer.mozilla.org/en/docs/Custom_Toolbar_Button" - - em:iconURL="chrome://custombutton/content/icon.png" > - - <em:targetApplication><!-- Firefox --> - <Description - em:id="{ec8030f7-c20a-464f-9b0e-13a3a9e97384}" - em:minVersion="1.4" - em:maxVersion="99" /> - </em:targetApplication> - - <em:targetApplication><!-- Thunderbird --> - <Description - em:id="{3550f703-e582-4d05-9a08-453d09bdfdc6}" - em:minVersion="1.4" - em:maxVersion="99" /> - </em:targetApplication> - - <em:targetApplication><!-- Sunbird --> - <Description - em:id="{718e30fb-e89b-41dd-9da7-e25a45638b28}" - em:minVersion="0.2.9" - em:maxVersion="99" /> - </em:targetApplication> - - <em:file> - <Description - about="urn:mozilla:extension:custombutton" - em:package="content/custombutton/" /> - </em:file> - - </Description> - -</RDF> -</pre> - <p>可选：改变 name, description 和 creator。改变这三行中双引号间的文字即可</p> - <p>根据需求，移除不需要的软件说明部分（译注：假如你只想给firefox创建插件，那么就可以删掉别的部分）。</p> - <p>保存文件</p> - <p><em>说明: </em> 此文件包含应用程序扩展管理器需要的信息。target applications这一大段表示能运行扩展程序的应用以及版本号。 最后一段描述此插件会添加内容到应用程序。</p> - <div style="margin-left: -4ex; width: 4ex; float: left;"> - 4.</div> - 创建一个文本文档，名称为 <code>chrome.manifest</code>. - <p>完整复制下面内容，粘贴到文档中：</p> - <pre>content custombutton chrome/ -style chrome://global/content/customizeToolbar.xul chrome://custombutton/content/button.css - -# Firefox -overlay chrome://browser/content/browser.xul chrome://custombutton/content/button.xul - -# Thunderbird mail -overlay chrome://messenger/content/messenger.xul chrome://custombutton/content/button.xul - -# Thunderbird compose -overlay chrome://messenger/content/messengercompose/messengercompose.xul chrome://custombutton/content/button.xul - -# Thunderbird address book -overlay chrome://messenger/content/addressbook/addressbook.xul chrome://custombutton/content/button.xul - -# Sunbird -overlay chrome://calendar/content/calendar.xul chrome://custombutton/content/button.xul -</pre> - <p>移除不需要的部分（同上段说明）。</p> - <p>保存文件</p> - <p><em>说明: </em> 此文件定义扩展的内容结构。先给工具栏窗口应用一个样式表。然后给每个工具栏都指定一个 overlay 。</p> - <div style="margin-left: -4ex; width: 4ex; float: left;"> - 5.</div> - 创建文件夹： <code>chrome</code>. - <p>按照下放说明，创建 5 个文件。</p> - <p><em>说明: </em> <code>chrome</code> 文件夹包含扩展的可执行部分，即扩展是干什的。</p> - <div style="margin-left: -4ex; width: 4ex; float: left;"> - 6.</div> - 创建一个文本文档，名称为 <code>button.xul</code>. - <p>完整复制下面内容，粘贴到文档中：</p> - <pre><?xml version="1.0" encoding="UTF-8"?> -<?xml-stylesheet type="text/css" - href="chrome://custombutton/content/button.css"?> - -<!DOCTYPE overlay > -<overlay id="custombutton-overlay" - xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> - -<script type="application/javascript" - src="chrome://custombutton/content/button.js"/> - -<!-- Firefox --> -<toolbarpalette id="BrowserToolbarPalette"> - <toolbarbutton id="custom-button-1"/> - </toolbarpalette> - -<!-- Thunderbird mail --> -<toolbarpalette id="MailToolbarPalette"> - <toolbarbutton id="custom-button-1"/> - </toolbarpalette> - -<!-- Thunderbird compose --> -<toolbarpalette id="MsgComposeToolbarPalette"> - <toolbarbutton id="custom-button-1"/> - </toolbarpalette> - -<!-- Thunderbird address book --> -<toolbarpalette id="AddressBookToolbarPalette"> - <toolbarbutton id="custom-button-1"/> - </toolbarpalette> - -<!-- Sunbird --> -<toolbarpalette id="calendarToolbarPalette"> - <toolbarbutton id="custom-button-1"/> - </toolbarpalette> - - -<!-- button details --> -<toolbarbutton id="custom-button-1" - label="Custom" - tooltiptext="My custom toolbar button" - oncommand="CustomButton[1]()" - class="toolbarbutton-1 chromeclass-toolbar-additional custombutton" - /> - -</overlay> -</pre> - <p>可选：你可以自定义最后一块中的 label 和 tooltiptext 。更改双括号间的内容即可。</p> - <p>可选地，移除不需要的部分。。</p> - <p>保存文件。</p> - <p><em>说明: </em> 此 <a href="/en/XUL" title="en/XUL">XUL</a> 文件会添加一个按钮到应用程序的 toolbar customization palette。此文件还链接了CSS样式表 和 JavaScript 脚本。最后一部分描述按钮的信息（译注；就是按钮名+鼠标放上面会提示什么文字）</p> - <div style="margin-left: -4ex; width: 4ex; float: left;"> - 7.</div> - 创建一个文本文档，名称为： <code>button.css</code>. - <p>完整复制下面内容，粘贴到文档中：</p> - <pre>#custom-button-1, -#wrapper-custom-button-1 - {list-style-image: url("chrome://custombutton/content/button-1.png");} - -/* common style for all custom buttons */ -.custombutton - {-moz-image-region: rect( 0px 24px 24px 0px);} - -.custombutton:hover - {-moz-image-region: rect(24px 24px 48px 0px);} - -[iconsize="small"] .custombutton - {-moz-image-region: rect( 0px 40px 16px 24px);} - -[iconsize="small"] .custombutton:hover - {-moz-image-region: rect(24px 40px 40px 24px);} -</pre> - <p>没有什么能优化的，保存文件即可</p> - <p><em>说明: </em> 此 <a href="/en/CSS" title="en/CSS">CSS</a> 样式表定义按钮如何显示。它链接到了按钮图片，指定了图片四个部分的尺寸。（译注；这里你就可以看文章开头提到的文章了，比这里举的例子更好实现，你只需在css中指定一大一小两个图片即可）</p> - <div style="margin-left: -4ex; width: 4ex; float: left;"> - 8.</div> - 创建一个文本文档，名称为： <code>button.js</code>. - <p>完整复制下面内容，粘贴到文档中：</p> - <div style="width: 40em;"> - <pre>CustomButton = { - -1: function () { - alert("Just testing") - }, - -} -</pre> - </div> - <p>没有什么能优化的，保存文件即可</p> - <p>接下来一部分的教程包含几个实例代码，你可以用他们来实现有用的功能。</p> - <p><em>说明: </em> 此文件指定当按钮按下时执行什么操作。它使用 <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a> 语言，加应用自己提供的一些特性。</p> - <div style="margin-left: -4ex; width: 4ex; float: left;"> - 9.</div> - 下载按钮图片。 - <p>右击图片，另存为，保存到 <code>chrome</code> 目录下。请确保文件名为： <code>button-1.png</code></p> - <div style="margin: 0 0 1em 4ex; border: 6px solid #ddd; float: left;"> - <img alt="button-1.png" class="internal" src="/@api/deki/files/576/=Button-1.png"></div> - <p style=""><em>说明: </em> 此图片包含四个部分。左上方是常用的图标。左下是深色的，按下按钮后显示，右侧的是小图标，工具栏设置成使用小图标时需要用。</p> - <div style="margin-left: -4ex; width: 4ex; float: left;"> - 10.</div> - 下载扩展的图片。 - <p>右击图片，另存为，保存到 <code>chrome</code> 目录下。请确保文件名为：<code>icon.png</code></p> - <div style="margin: 0 0 1em 4ex; border: 6px solid #ddd; float: left;"> - <img alt="icon.png" class="internal" src="/@api/deki/files/717/=Icon.png"></div> - <p style=""><em>说明: </em> 此图片显示在应用扩展管理窗口中。</p> -</div> -<h4 id="Testing_your_new_button" name="Testing_your_new_button">测试您的按钮</h4> -<p>重启应用程序（firefox）</p> -<p>右击工具栏，选中定制，或者在菜单中，依次选择：查看 – 工具栏 – 定制</p> -<p>将刚才的新按钮拖动到工具栏，点击“退出定制”保存设置。</p> -<p>点击按钮，应该能看到弹出信息了。</p> -<h3 id="Further_development" name="Further_development">进一步开发</h3> -<p>此部分描述如何进一步开发按钮。</p> -<h4 id="Uninstalling_the_button" name="Uninstalling_the_button">卸载按钮</h4> -<p>如果想卸载按钮，删掉步骤 2 创建的文件夹即可。</p> -<p>或者，使用程序自己的 扩展管理窗口 正常卸载应用，在下次重启时应用就会删掉此文件夹。</p> -<p>重启程序</p> -<h4 id="Troubleshooting" name="Troubleshooting">排错</h4> -<p>如果按钮没在工具栏中显示，或是其他问题，可以按照下列步骤排查。</p> -<p>如果有必要，卸载按钮，重头开始，这次不要修改任何内容</p> -<p>在能成功让按钮工作后，小心的修改文件。</p> -<p>要想看到修改后的结果，需要重启应用。</p> -<h5 id="Advanced_troubleshooting" name="Advanced_troubleshooting">高级排错</h5> -<p>如果你有一定的技术只是，那么你可以使用应用程序的 JavaScript console 查看错误信息。但是不一定都有用，而且易混淆，或是看到了其他程序的执行结果。</p> -<p>在 工具栏 - 开发者（web developer） - Browser Console 中开启 JS 选项。或使用快捷键"Ctrl + Shift + J"</p> -<p> JavaScript console 里会显示 JavaScript, XUL 或 CSS 文件的信息。</p> -<div class="note"> - <strong>Note</strong>: The preference setting <a class="external" href="http://kb.mozillazine.org/Javascript.options.strict">javascript.options.strict</a> imposes restrictions that are not appropriate for the simple scripts in this tutorial. If you choose to use this setting, either ignore the warnings that it generates, or change the coding style to keep it quiet.</div> -<h4 id="Programming_the_button" name="Programming_the_button">为按钮编程</h4> -<p>要想改变按钮功能，去修改步骤 8 里的 <code>button.js</code> 。</p> -<p>移除行: <code>alert("Just testing")</code> ，替换成其他 js 语句。</p> -<p>可以在 <a href="/en/XUL/Toolbars/Custom_toolbar_button/Code_Samples" title="en/Custom_Toolbar_Button/Code_Samples">Code Samples</a> 查看很多代码示例，不用知道编程知识就能修改并使用。</p> -<p>需要重启才能生效变更。</p> -<h4 id="Adding_more_buttons" name="Adding_more_buttons">添加更多的按钮</h4> -<p>要想添加更多的按钮，请编辑 <code>button.xul 文件，对于每个应用，复制指定</code> <code>custom-button-1 的那行</code>，然后将新行指定成 <code>custom-button-2</code>。</p> -<p>重复最后一部分。在 <code>id</code> 和 <code>oncommand</code> 参数中，将 1 改为 2。然后改变 <code>label</code> 和 <code>tooltiptext</code> 。<strong>不要</strong>改变 <code>class</code> 参数。</p> -<p>然后编辑 <code>button.css</code>。复制前三行，改变新行成为 <code>button-2</code>.</p> -<p>编辑 <code>button.js</code> 为新按钮添加 js 语句。请确保<strong>添加的语句在最后一个花括号的前面</strong>，例如，这么添加命令：</p> -<pre class="eval">2: function () { - alert("Just testing again") - }, -</pre> -<p>为新按钮创建图标，命名为 <code>button-2.png</code>。下面提供的文件有40 像素宽，48像素高，256色，透明背景，PNG格式，其他格式也能工作。</p> -<p>你可以下载使用下列图片：</p> -<div style="margin: 0 0 1em 4ex; border: 6px solid #ddd; float: left;"> - <img alt="button-2.png" class="internal" src="/@api/deki/files/580/=Button-2.png"></div> -<div style="margin: 0 0 1em 4ex; border: 6px solid #ddd; float: left;"> - <img alt="button-3.png" class="internal" src="/@api/deki/files/583/=Button-3.png"></div> -<div style="margin: 0 0 1em 4ex; border: 6px solid #ddd; float: left;"> - <img alt="button-4.png" class="internal" src="/@api/deki/files/586/=Button-4.png"></div> -<div style="margin: 0 0 1em 4ex; border: 6px solid #ddd; float: left;"> - <img alt="button-5.png" class="internal" src="/@api/deki/files/589/=Button-5.png"></div> -<p style="">重启程序，并将新按钮添加到工具栏。</p> -<p>你可以重复这些步骤，创建更多按钮</p> -<h3 id="Distributing_your_button_to_other_users" name="Distributing_your_button_to_other_users">将您的按钮分发给其他用户</h3> -<p>如果你想将按钮程序分发给他人，那就必须做些修改以和其他扩展程序做区分。</p> -<p>创建一个扩展 ID，格式为：</p> -<dl> - <dd> - <code><em>something</em>@<em>domain-name</em></code></dd> -</dl> -<p>必须包含at符号 (<code>@</code>)，格式和邮箱地址挺像，但不必是真实邮箱地址。@符号的前后，只能使用字符 ： A-Z， a-z， 0-9， 英文句号( . )， 连字符（-）和下划线（_）。如果您没有域名（domain-name），可以自己编个，如果你想让这域名看着不像真正的域名，那就在结尾加个 <code>.invalid</code> 。</p> -<p>使用你的 扩展ID （extension ID）重命名文件夹，然后在 <code>install.rdf</code> 文件中指定相同的 ID。</p> -<p><code>在 install.rdf</code> 文件中，移除您扩展不能正常工作的应用项。例如，如果您的按钮只能在 Thunderbird 上运行，就删除 Firefox 和 Sunbird 的部分。同样道理，修改 <code>button.xul</code> 和 <code>chrome.manifest</code>.</p> -<p>改变所有文件中的 "custombutton", "custom-button" 和 "CustomButton" 字样。</p> -<p>可以自己更改的：</p> -<ul> - <li>按钮的图片</li> - <li>扩展的图片： <code>icon.png</code></li> - <li> <code>install.rdf</code> 中的版本号和主页</li> -</ul> -<p>使用 jar 工具或 zip 工具打包整个文件夹的内容命名为 <code>.xpi</code> 文件。方便用于其他程序。</p> -<p>用户可在应用程序的扩展管理窗口中安装此 XPI 文件。</p> diff --git a/files/zh-cn/mozilla/tech/xul/toolbars/index.html b/files/zh-cn/mozilla/tech/xul/toolbars/index.html deleted file mode 100644 index b028d9cd69..0000000000 --- a/files/zh-cn/mozilla/tech/xul/toolbars/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Toolbars -slug: Mozilla/Tech/XUL/Toolbars -tags: - - NeedsTranslation - - TopicStub -translation_of: Archive/Mozilla/XUL/Toolbars ---- -<p>Toolbars, implemented using the XUL <code><a href="/zh-CN/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code> element, are containers for toolbar buttons and other user interface objects. The following articles provide details about implementing and working with toolbars.</p> -<table class="topicpage-table"> - <tbody> - <tr> - <td> - <h2 class="Documentation" id="Documentation" name="Documentation">Documentation</h2> - <dl> - <dt><a href="/en-US/docs/XUL/School_tutorial/Adding_Toolbars_and_Toolbar_Buttons" title="XUL/School_tutorial/Adding Toolbars and Toolbar Buttons">XUL School: Adding Toolbars and Toolbar Buttons</a></dt> - <dd>A helpful tutorial to creating toolbars and toolbar buttons.</dd> - <dt><a href="/en-US/docs/XUL/Toolbars/Toolbar_customization_events" title="XUL/Toolbars/Toolbar customization events">Toolbar customization events</a></dt> - <dd>A look at the events that are sent during toolbar customization; you can use these to be kept aware of changes to toolbars.</dd> - <dt><a href="/en-US/docs/XUL/Toolbars/Creating_toolbar_buttons" title="XUL/Toolbars/Creating toolbar buttons">Creating toolbar buttons</a></dt> - <dd>How to use overlays to add toolbar buttons to Mozilla applications.</dd> - <dt><a href="/en-US/docs/XUL/Toolbars/Custom_toolbar_button" title="XUL/Toolbars/Custom toolbar button">Custom toolbar button</a></dt> - <dd>Another example of how to create a toolbar button, complete with a sample extension you can download and try.</dd> - <dt><a href="/en-US/docs/Code_snippets/Toolbar" title="Code snippets/Toolbar">Code snippets: Toolbar</a></dt> - <dd>Code snippets that are helpful when working with toolbars.</dd> - <dt></dt> - </dl> - <p><span class="alllinks"><a href="/en-US/docs/tag/Extensions" title="Tags:Toolbars">View all pages tagged with "Toolbars"...</a></span></p> - </td> - <td> - <h2 class="Community" id="Community" name="Community">Community</h2> - <ul> - <li>View Mozilla extension development forums... <ul> - <li><a href="https://lists.mozilla.org/listinfo/dev-extensions"> 邮件列表</a></li> - - - <li><a href="http://groups.google.com/group/mozilla.dev.extensions"> 新闻组</a></li> - <li><a href="http://groups.google.com/group/mozilla.dev.extensions/feeds"> Web feed</a></li> -</ul></li> - <li><a class="link-irc" href="irc://irc.mozilla.org/extdev">#extdev IRC channel</a></li> - <li><a href="http://forums.mozillazine.org/?c=11">MozillaZine forum</a></li> - <li><a href="/devnews/index.php/categories/about-addons" title="https://developer.mozilla.org/editor/fckeditor/core/editor/devnews/index.php/categories/about-addons/">about:addons newsletter</a></li> - <li><a href="/web-tech" title="https://developer.mozilla.org/editor/fckeditor/core/editor/web-tech/">Mozilla's Web-Tech blog</a></li> - <li><a href="http://mozdev.org/mailman/listinfo/project_owners">mozdev project owners</a></li> - <li><a href="http://planet.mozilla.org/" title="http://planet.mozilla.org/">Planet Mozilla</a></li> - <li><a href="/en-US/docs/Extensions/Community" title="Extensions/Community">Other community links...</a></li> - </ul> - <h2 class="Tools" id="Tools" name="Tools">Tools</h2> - <ul> - <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622" rel="external nofollow" title="https://addons.mozilla.org/en-US/firefox/addon/6622">DOM Inspector</a> edit the live DOM (Firefox and Thunderbird)</li> - <li><a class="link-https" href="https://builder.mozillalabs.com/" title="https://builder.mozillalabs.com/">Mozilla Labs Add-on Builder</a></li> - <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/7434/" rel="external nofollow" title="https://addons.mozilla.org/en-US/firefox/addon/7434/">Extension Developer's Extension</a> a suite of development tools</li> - <li><a href="http://www.gijsk.com/" rel="external nofollow" title="http://www.gijsk.com/">Chrome List</a> view files in chrome:// (<a href="http://addons.mozilla.org/en-US/firefox/addon/4453" rel="external nofollow" title="http://addons.mozilla.org/en-US/firefox/addon/4453">Firefox</a>, <a href="http://addons.mozilla.org/en-US/thunderbird/addon/4453" rel="external nofollow" title="http://addons.mozilla.org/en-US/thunderbird/addon/4453">Thunderbird</a>)</li> - <li><a href="http://ted.mielczarek.org/code/mozilla/extensionwiz/" rel="external nofollow" title="http://ted.mielczarek.org/code/mozilla/extensionwiz/">Extension Wizard</a> a web-based extension skeleton generator (Firefox and Thunderbird)</li> - </ul> - <p>... <a href="/en-US/docs/Setting_up_extension_development_environment#Development_extensions" title="Setting up extension development environment#Development extensions">more tools</a> ...</p> - - <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2> - <ul> - <li><a href="/en-US/docs/XUL" title="XUL">XUL</a>, <a href="/en-US/docs/Themes" title="Themes">Themes</a>, <a href="/en-US/docs/Developer_Guide" title="Developing_Mozilla">Developing Mozilla</a></li> - </ul> - </td> - </tr> - </tbody> -</table> |