Today's the day

思考，自知，耐心


firefox扩展开发(三) ： 排列窗口控件

firefox扩展开发(四) ： 更多的窗口控件

galeki posted @ about 1 year ago in Firefox扩展开发 with tags XUL 开发 扩展 firefox
firefox扩展开发(五) ： 驱动XUL界面

标签盒子

标签盒子是啥？大家都见过，就是分页标签：

对应的代码：

  1. <?xml version="1.0"?>
  2. <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
  3. <window
  4.   id="test-window"
  5.   title="测试用的窗口"
  6.   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  7.         <tabbox>
  8.           <tabs>
  9.             <tab label="第一个标签标题"/>
  10.             <tab label="第二个标签标题"/>
  11.           </tabs>
  12.           <tabpanels>
  13.             <tabpanel id="firsttab">
  14.               <label value="第一个标签的内容"/>
  15.             </tabpanel>
  16.             <tabpanel id="secondtab">
  17.               <label value="第二个标签的内容"/>
  18.             </tabpanel>
  19.           </tabpanels>
  20.         </tabbox>
  21. </window>

每个标签盒子中的内容被包含在<tabbox>中，<tabs>下的<tab>包含标签标题，<tabpanels>下的<tabpanel>包含每个标签的内容，按顺序和标签标题<tab>对应。

iframe

<iframe>这个标签在HTML里再熟悉不过了，在XUL中，作用和用法HTML一样，可以用来在窗口中嵌套一个网页，只要设置<iframe>的src属性即可：

  1. <?xml version="1.0"?>
  2. <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
  3. <window
  4.   id="test-window"
  5.   title="测试用的窗口"
  6.   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  7.         <label value="以下为GemBlog首页…………"/>
  8.         <iframe id="content" src="http://blog.linuxgem.org" flex="1"/>
  9. </window> 

效果：

工具栏

  1. <?xml version="1.0"?>
  2. <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
  3. <window
  4.   id="test-window"
  5.   title="测试用的窗口"
  6.   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  7.         <toolbox>
  8.           <toolbar>
  9.             <toolbarbutton label="&lt; 后退"/>
  10.             <toolbarbutton label="前进 &gt;"/>
  11.             <textbox id="url"/>
  12.           </toolbar>
  13.         </toolbox>
  14. </window>

<toolbox>包含<toolbar>，<toolbar>包含工具栏中的元素，<toolbarbutton>表示工具栏按钮：

菜单栏

  1. <?xml version="1.0"?>
  2. <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
  3. <window
  4.   id="test-window"
  5.   title="测试用的窗口"
  6.   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  7.           <menubar>
  8.             <menu label="文件">
  9.               <menupopup>
  10.                 <menuitem label="新建"/>
  11.                 <menuitem label="打开"/>
  12.                 <menuitem label="保存"/>
  13.                 <menuseparator/>
  14.                 <menuitem label="退出"/>
  15.               </menupopup>
  16.             </menu>
  17.             <menu label="编辑">
  18.               <menupopup>
  19.                 <menuitem label="拷贝"/>
  20.                 <menuitem label="粘贴"/>
  21.               </menupopup>
  22.             </menu>
  23.           </menubar>
  24. </window>

<menubar>为一个菜单栏的顶极标签，菜单栏中的每一项为一个<menu>，每一个菜单项下面的子项目，为<menupopup>下的<menuitem>，<menuseparator>为分隔符。

效果：（不知咋的，打开菜单的状态下没法抓图 :( ）

 

相关文章
全局相关文章

Comments Feed


Login