可扩展标记语言用户界面语言--XUL的定义及标签(详细)

前言:

最近博主在帮国企维护一个老项目,拿到手后很苦恼,10多年前的用的技术没见过啊,前端用的是XUL,哈哈哈,刚开始也是云里雾里的,一脸懵啊,后来慢慢就步入正轨~

XUL是什么

可扩展标记语言用户界面语言。它是为了支持Mozilla系列的应用程序(如Mozilla Firefox和Mozilla Thunderbird)而开发的使用者界面标示语言。顾名思义,它是一种应用可扩展标记语言(标准通用标记语言的子集)来描述使用者界面的标记语言~

基本解释:

虽然XUL并不是一种公开的标准,但它重用了许多现有的标准和技术,包括CSS、JavaScript、DTD和RDF等。所以对于有网络编程和设计经验的人士来说,学习XUL比学习其他使用者界面标示语言相对简单。

好处:

xul提供了一套简易和跨平台的widget定义。节省了编程人员在开发软件时所付出的努力。
一个XUL界面一般包含以下三部分:
内容:定义使用者界面的XUL档;
Skine(皮肤):定义程序外观的层叠样式表和图像档;
Locale(区域):定义界面字串的DTD档(为了软件本地化)。

以下是本博主在网上收集的xul资料
来自:https://wangjinlongaisong-126-com.iteye.com/blog/925385

XUL的元素及属性描述:

1、 一个 XUL 文件可以有任何名字,但它必须拥有一个 .xul 的扩展名。

2、 <?xml version=”1.0”?>简单声明一个XUL文件,通常在每个XUL文件都会添加这一行。

3、 <?xml-stylesheet href=”chrome://global/skin/” type=”text/css”?>这一行是用来指定使用的样式表的。这是XML用于导入样式表的语法。

4、 < window>< /window>这个标签用来描述一个窗体,每个用户界面的窗体都在一个单独的文件中描述,类似HTML中的< body > < /body>标记

5、 标签的几个属性:
(1) id 属性用作标识以便被窗体脚本引用。
(2) title 属性描述显示时将在窗体的标题栏上显示文本。
(3) orient 的属性确定窗口中元件的排布。其值有:horizontal窗体应该横过窗体水平放置;Vertical 表示元件将成一列放置
(4) xmlns=http://www.mozilla.org/keymaster/gateKeeper/there.is.only.xul 这一行声明了XUL的名空间,将它放在窗口元件表示它的所有子元件都是XUL,Mozilla内部会识别这个 URL;
(5) < !-- 其他元件写到这里 -->表示注释

6、 打开窗口 window.open(url,windowname,flags) 其中url 表示文件路径,windowname 表示窗体的名字,flags 是指chrome 文档

7、 < button>的属性:
(1) id 用来表识按钮的唯一标识。
(2) class 按钮的样式表
(3) label 标签会显示在按钮上
(4) image 在按钮上显示指定路径的图片
(5) disabled 如果这个属性被设置为true,按钮就会被禁止,如果这个属性没有表示这个按钮会被启动
(6) accesskey 设置快捷键,通常是字母

8、 标签元素< label>属性:
(1) value 属性被用于制定要显示的文本
(2) Control 属性去设置关联的标签,设置control属性的值会触发与这个值对应的id的元素

9、 标签元属< description>描述
在没有一些特定的关联操作的文本时你可以使用 description 标签,这个元素使用于在对话框的上面或实例的一组控制的文本提示信息. 既可以在 value 属性中指定单行的文本也可以在开合标签之间填充一大块的文本

10、 文本输入框的属性:< textbox>
(1) id 属性:控件的唯一标识
(2) class属性:输入框的样式表
(3) value属性:指定输入框的文本
(4) disabled属性:文本输入框是否禁用
(5) type 属性:可以将这个属性设置为password,创建一个输入框隐藏用户输入内容,通常为密码框
(6) maxlength 属性: 输入框允许输入的字符最大数量;
(7) multiline 属性: 其值若为true 表示文本框将显示多行。若为 false 文本不显示多行

11、 单选按钮< radio>的属性:
(1) id 属性:控件的唯一标识
(2) label 属性: 单选按钮的文本
(3) disabled 属性:其值可以是true或false,若为true表示按钮被禁用,反之为启 用
(4) accesskey 属性:用于选中元素的快捷键

12、 单选按钮组< radiogroup>属性:若在一个组中< radion>只能选择一个

13、 多选框< checkbox>属性:
(1) id 属性:控件的唯一标识
(2) checked属性:表示受否被选中,其值有true或false
(3) label 属性:指定标签的文本
(4) selected 属性:和checked属性类似,其值有true或false

14、 列表控件< listbox>属性:
描述:listbox元素用于创建多行的列表框,它的工作方法类似于在HTML中 的select元素,和< listitem>连用创建下拉列表,< listitem>相似于HTML中的< option>。
(1) id属性: 控件的唯一标识
(2) rows属性:指定一次显示几行
例子如下:

<listbox rows="3">
<listitem label="Butter Pecan" value="bpecan"/>
<listitem label="Chocolate Chip" value="chocchip"/>
<listitem label="Raspberry Ripple" value="raspripple"/>
<listitem label="Squash Swirl" value="squash"/>
</listbox>

15、 多列列表框:
描述:列表框也支持多列。每个单元格可以有独有的内容,即使只使用文本。当用户选择列表中的一个项目时,当前的行将被选中。你不能只选中其中的一个单元格。
例子如下:

<listbox>
<listhead>
<listheader label="Name"/>
<listheader label="Occupation"/>
</listhead>
<listcols>
<listcol flex="1"/>
<listcol flex="2"/>
</listcols>
<listitem>
<listcell label="George"/>
<listcell label="House Painter"/>
</listitem>
<listitem>
<listcell label="Mary Ellen"/>
<listcell label="Candle Maker"/>
</listitem>
<listitem>
<listcell label="Roger"/>
<listcell label="Swashbuckler"/>
</listitem>
</listbox>

上面例子中的< listcols>元素用来定义列字段集,< listcol>元素用来定义每列的外观,< listitem >元素用来定义一行,类似HTML中的< row>标签;< listcell>用来定义每个单元,类似HTML中的< td>标签;使用< listhead >和< listheader>来定义表头
16、 下拉列表:
描述:XUL中的下拉列表类似HTML中使用select元素创建的下拉列表。XUL中的menulist元素可以实现这种效果。
< menulist>的属性:
accesskey 属性:设置快捷键;
disabled 属性:设置控键是否被禁用;
open 属性:其值为true或false,如果为true,菜单列表显示,否则隐藏;
label属性:设置文本;
aditable属性:其值为true或false , 如果为true表示此菜单列表可以编辑,如为false则不能编辑。

例子如下:

<menulist label="Bus">
<menupopup>
<menuitem label="Car"/>
<menuitem label="Taxi"/>
<menuitem label="Bus" selected="true"/>
<menuitem label="Train"/>
</menupopup>
</menulist>

17、 进度条< progressmeter>属性:
Id 属性: 进度条的唯一标识符。
Mode属性: 进度条的类型。如果设置为determined,进度条就是确定型进行度,在任务完成时填满。如果设置为undetermined,这个进度条就是不确定型进度条。如果不指定这个属性默认为确定型。
Value 属性: 当前进度条的尺度值。只能在确定型的进度条中使用这个属性。这个值的范围为0%到100%的百分值。
例子演示:

<hbox>
<progressmeter value=”50%” style=”margin: 4px;”/>
<spacer fiex=”1”/>
</hbox>

18、 增加HTML元素到窗口
(1) XHTML命名空间:
描述:为了在XUL文件中使用HTML元素,必须声明要用到的XHTML命令空间。这个方法是Mozilla从XUL中区分HTML标签的。
例子演示:

<?xml version=”1.0”>
<?xml–stylesheet href=”chrome://global/skin/” type=”text/css”?>
<window 
Id=”findfile-window”
Title=”Find files”
Orient=”horizontal”
Xmls:html=http://www.w3.org/1999/xhtml
Xmlns=http://www.mozilla.org/keymaster/gatekeeper/therer.is.only.xul;>

注意事项:
1、 必须在每个标签的开始增加一个html:的前缀;
2、 标签必须用小写
3、 “双引号”必须完成所有属性值括起来。
4、 在没有内容的xml标签的末端(>)前一定要加上结束(/);

(3) 使用HTML元素:
例子演示:

<?xml version=”1.0”?>
<?xml–stylesheet href=”chrome://global/skin/” type=”text/css”?>
<window 
Id=”findfile-window”
Title=”Find files”
Orient=”horizontal”
Xmls:html=http://www.w3.org/1999/xhtml
Xmlns=http://www.mozilla.org/keymaster/gatekeeper/therer.is.only.xul;>
<html:table>
<html:tr>
<html:td>
A simple table
</html:td>
</html:tr>
</html:table>
</window>

19、 使用定位格:< spacer>元素
描述:spacer用于在窗口中放置一片空白,它多用于用户调整窗口大小
时它可以拉伸或者收缩。
< spacer>元素的属性:
用于指定元素可以改变自身的尺寸去填充它所在的盒子(窗口),它说明在一个盒容器的子容器中填入多少的空白空间。
例子演示:

< spacer flex=”1”>
< button id=”find-button” label=”Find”/>

20、 按钮:< button>属性:

1.Image 属性:可以通过指定URL为按钮添加图像;< button label=”帮助” image=”图片路径”/>
2.Style 属性: 在按钮上指定图像的另一个方法是使用样式表(CSS list-style-image:url(‘图片的路径’);< button id=”find-button” label=”find” style=”list-style-image:url(‘图片路径’)”/>
3.dir 属性: 属性控制图像和文本方向。设置这个属性的值为reverse,图像将会放在文本的右边。使用normal值,或删除这个属性,图像将会放在文本左边。
4.Orient 属性: 属性用于在将图片放在文本的上面或下面。默认值时horizontal用于将图像放在文本的左或右。也可以使用值vertical将图像放在上方或下方。如果用在normal的意思时将图像放在文本的上方,而用在reverse的意思时将图像放在文本的下方。
5.crop 属性: 它可以用来裁剪元素的内容。当元素的宽度超过maxwidth时,超出的部分会去掉,变成…。不过这个属性只可以用在description和有label的元素中。其值有left,righr,none,center;
left:指超出的文本部分从文本的左部分裁剪。
Right:指超的出文本部分从文本的右边裁剪。
Center:指超出的文本部分不文本的中间裁剪。
None:指超出的不分文本不被裁减,默认值为none;

<button label=”Left” image=”happy.png”></button>
<button label=”Right” image=”happy.png” dir=”reverse”>
<button label=”Above” image=”happy.png” orient=”vertical”></button>

特殊按钮例子:

<button>
<description value=”this is a”/>
<description value=”rather strange” style=”color:red;”/>
<description value=”button”/>
</button>
弹出菜单按钮:
<button type=”menu” label=”Device”>
<menupopup>
<menuitem label=”printer”></menuitem>
<menuitem label=”Mouse></menutitem>
<menutitem label=”Keyboard”></menupupup>”
</menupopup>
</button>

21、 箱体的基本语法:

<hbox>
<!—horizontal element
</hbox>
<vbox>
<!—Vertical element
</vbox>

注释:
hbox元素:用来创建一个水平方向的盒子。每个放在hbox的元素将被水平地排成一行。
Hbox属性:
align属性:控制内部元素的垂直位置,其值有start,center,end,baseline,stretch;
start 是指box里面的元素靠顶端对齐。
center 是指 box 里面的元素靠中间对其。
end 是指 box 里面的元素底端对齐。
baseline 是指 box 里面的元素按照文本底线对齐。
sretch 自动扩展
vbox元素:用来创建一个垂直方向的盒子。每个放在vbox的元素将被垂直地排成一列
例子演示:

1、 登陆提示范例

<vbox>
<hbox>
<label control=”login” value=”Login: ”></label>
<textbox id=”login”/>
</hbox>
<hbox>
<label control=”pass” value=”password:”></label>
<textbox id=”password” />
</hbox >
<vbox> 

2、 文本框对齐

<vbox>
<hbox>
<vbox>
<label control=”login” value=”Login:”></label>
<label control=”pass” value=”Password:”></label>
</vbox>
<vbox>
<textbox id=”login”></textbox>
<textbox id=”pass”></textbox>
</vbox>
</hbox>
<button id=”ok” label=”OK”></button>
<button id=”cancel” label=”Cancel”></button>
</vbox>

3、 文件查找对话框示范

<description>
Enter your search criteria below and the Find button to begin the search.
</description>
<hbox>
<label value=”Search for:” control=”find-text”></label>
<textbox id=”find-text” control=”find-text”></textbox>
</hbox>
<hbox>
<spacer flex=”1”/>
<button id=”find-button” label=”Find”>
<button id=”cancel-button” label=”Cancel”></button>
</hbox>
</vobx>

22、 元素属性:
Width 属性: 指定元素的宽度。
Height 属性: 指定元素的高度。
Minwidth 属性:指定元素的最小宽度。
Minheight 属性:指定元素的最小高度。
Maxheight 属性:指定元素的最大宽度。
< box>元素:通过修改orient为"horizental",表示元素水平摆放。为"vertical" 表示元素垂直摆放。
Pack属性:
Start 对于水平box,他就是左对齐。对于竖直的box,他就是顶端对齐。
Center 居中;
End 如说是水平box,他就是右对齐。对于竖直的box,他就是底端对齐。
align 属性:
start如果是水平的box,它就是顶端对齐。如果是竖直的box,它就是左对齐。
center居中
end如果是水平的box,它就是底端对齐。如果是竖直的box,它就是右对齐。
baseline文本线对齐,只可以用在水平box上。
stretch自动扩展

23、分组框:
(1)gropbox的描述:gropbox是一个box容器,里面的元素会按照box布局规则来显示。与其他box相比,gropbox有以下特点:
1默认有边框。你可以通过修改其cess来改变边框。
2可以添加标题(caption).标题会显示在gropbox的左上方。
(2)gropbox的属性:
align:start 如果是水平的box,它就是顶端对齐。如果是竖直的box,它就是左对齐。
Center 居中;
Baseline 文本线对齐,只可以用在水平box上。
End 如果是水平box,他就是底端对齐。如果是竖直的box,他就是右对齐。
Stretch 制动扩展。
Pack属性:
Start 对于水平box,他就是左对齐。对于竖直的box,他就是顶端对齐。
Center 居中;
End 如说是水平box,他就是右对齐。对于竖直的box,他就是底端对齐。
例子演示:

<groupbox>
<caption label="Answer"/>
<description value="Banana"/>
<description value="Tangerine"/>
<description value="Phone Booth"/>
<description value="Kiwi"/>
</groupbox>
或
<groupbox flex="1">
<caption>
<checkbox label="Enable Backups"/>
</caption>
<hbox>
<label control="dir" value="Directory:"/>
<textbox id="dir" flex="1"/>
</hbox>
<checkbox label="Compress archived files"/>
</groupbox>

(3)radiogroup的描述:radiogroup首先是一个box容器,里面可以放xul元素,但radiogroup对单选框(radio)有特殊意义。可以通过selectedItem 来访问选中的radio。
例子演示:

<radiogroup>
<radion id=”no” value=”no” label=”NO Number”/>
<radion id=”random” value=”radom” label=”Random Number”/>
<hbox>
<radio id=”specify” value=”specify” label=”Specify Number:”/>
<textbox id=”specificnumber”/>
</hbox> 

24、层和卡片:
Statck 元素:
statck 是按照绝对位置定位布局方式的容器。因此,align、pack、dir、orient等属性对于stack来说是无效的。Stack内部元素的位置取决于元素的left、top属性。这种布局模式类似于VB或Delphi的布局模式。需要注意的是:内部元素的left、top是指相对于stock的位置,而不是相对于window或者screen的位置。所谓的绝对定位,是指其直接孩子元素。非直接孩子元素不执行stack的布局逻辑。

例子演示:

<stack style="background-color: #C0C0C0">
<description value="Disabled" style="color: white;padding-left:
1px; padding-top: 1px;"/> 
<description value="Disabled" style="color: grey;"/>
</stack>

Deck 元素:
Deck 内的元素也是层叠在一起的,但与stack不同的是,deck 一次只显示其中的一个孩子元素。当前显示哪个孩子,是由selectedIndex属性控制的。Deck 常用于向导对话框。我们可以通过设置内部元素的left、top属性来控制其显示位置
例子演示:

<deck selectedIndex="2">
<description value="This is the first page"/>
<button label="This is the second page"/>
<box>
<description value="This is the third page"/>
<button label="This is also the third page"/>
</box>
</deck>
或
<stack>
<button label="Goblins" left="5" top="5"/>
<button label="Trolls" left="60" top="20"/>
<button label="Vampires" left="10" top="60"/>
</stack>

25、 分页组:
描述及语法:
tabbox用于界面元素的分页显示。常用于显示用户选项等界面元素多,界面大小有限的用户界面。用户可以通过选择不同的tab页来查看不同的内容。
xul中提供了5个元素来实现分页组
tabbox:最外层的容器,一般内部包含一个tabs和tabpanels。
tabs:tab的容器。当然你也可以在里面加入其他的xul元素来丰富导航 tab的界面。
tab:具体的每一个分页卡,用户通过选择不同的tab来切换显示页。
tabpanels:tabpanel的容器。
tabpanel:里面放置具体的页面内容。
tab与tabpanel的对应关系是按照他们在各自容器中的序号来确定的。tabs中的第一个tab对应tabpanels中的第一个tabpanel。
基本语法如下:

<tabbox id="tablist">
<tabs>
-- tab elements go here --
</tabs>
<tabpanels>
-- tabpanel elements go here --
</tabpanels>
</tabbox>

由于tabbox本身是一个容器,因此,tabs的显示位置取决于它在tabbox中的顺序以及tabbox的orient、dir属性。
tabbox的大小取决于它内部最大tabpanel的大小,因此,在切换tab页的时候,tabbox的大小不会随着tab页切换而改变。
例子演示:

<tabbox>
<tabs>
<tab label="Mail"/>
<tab label="News"/>
</tabs>
<tabpanels>
<tabpanel id="mailtab">
<checkbox label="Automatically check for mail"/>
</tabpanel>
<tabpanel id="newstab">
<button label="Clear News Buffer"/>
</tabpanel>
</tabpanels>
</tabbox>

当前tab页的tab元素的selected属性是true。
如果我们将tabbox的orient设置为水平模式,tabs会出现在左面。
26、 表格:
描述:其组件包括grid,columns,column,rows和row。Grid包含排列整齐的组件就像表格一样。在grid内,可以声明columns,定义header及column属性;还可以声明rows。使用rows组件可以声明一套row,即为grid元素的子组件。每个子元素为指定列的一行。
例子演示:

<grid>
<columns>
<column label="Type"/>
<column label="Content"/>
</columns>
<rows>
<row>
<label value="File:"/>
<textbox width="99%"/>
</row>
<row>
<label value="Type:"/>
<hbox>
<listbox rows="1" mold="select">
<listitem label="Java Files,(*.java)"/>
<listitem label="All Files,(*.*)"/>
</listbox>
<button label="Browse..."/>
</hbox>
</row>
</rows>
</grid>

滚动网格:当指定height属性且没有足够的空间来显示数据时,grid会变为滚动的。

<grid width="500px" height="130px">
<columns>
<column label="Head 1"/>
<column label="Head 2" align="center"/>
<column label="Head 3" align="right"/>
</columns>
<rows>
<row>
<listbox mold="select">
<listitem label="Faster"/>
<listitem label="Fast"/>
<listitem label="Average"/>
</listbox>
<datebox/>
<textbox rows="2"/>
</row>
<row>
<checkbox checked="true" label="Option 1"/>
<checkbox label="Option 2"/>
<radiogroup>
<radio label="Apple"/>
<radio label="Orange" checked="true"/>
<radio label="Lemon"/> </radiogroup>
</row>
<row>
<checkbox checked="true" label="Option 1"/>
<checkbox label="Option 2"/>
<radiogroup orient="vertical">
<radio label="Apple"/>
<radio label="Orange" checked="true"/>
<radio label="Lemon"/>
</radiogroup>
</row>
</rows></grid>

可改变列的网格:如果想改变列的宽度,可以将columns的sizable属性的设为true。一旦允许用户进行此操作,用户可以拖动相邻列的编筐来改变列宽。

<window>
<grid>
<columns id="cs" sizable="true">
<column label="AA"/>
<column label="BB"/>
<column label="CC"/>
</columns>
<rows>
<row>
<label value="AA01"/>
<label value="BB01"/>
<label value="CC01"/>
</row>
<row>
<label value="AA01"/>
<label value="BB01"/>
<label value="CC01"/>
</row>
<row>
<label value="AA01"/>
<label value="BB01"/>
<label value="CC01"/>
</row>
</rows>
</grid>
<checkbox label="sizeable" checked="true" onCheck="cs.sizeable = self.checked"/>
</window>

分页网格:1、滚动分页:滚动可以由指定height属性来实现。分页可以由mold属性设为paging来实现。

<grid width="300px" mold="paging" pageSize="4">
<columns>
<column label="Left"/>
<column label="Right"/>
</columns>
<rows>
<row>
<label value="Item 1.1"/><label value="Item 1.2"/>
</row>
<row>
<label value="Item 2.1"/><label value="Item 2.2"/>
</row>
<row>
<label value="Item 3.1"/><label value="Item 3.2"/>
</row>
<row>
<label value="Item 4.1"/><label value="Item 4.2"/>
</row>
<row>
<label value="Item 5.1"/><label value="Item 5.2"/>
</row>
<row>
<label value="Item 6.1"/><label value="Item 6.2"/>
</row>
<row>
<label value="Item 7.1"/><label value="Item 7.2"/>
</row>
</rows>

27、 内容面板:

1、 iframe面板:iframe 的用法和html中的用法基本相同。可以在窗口嵌套一个页面,只要设置iframe的src的属性就可以了。
例子演示:

<toolbox>
<toolbar id="nav-toolbar">
<toolbarbutton label="Back"/>
<toolbarbutton label="Forward"/>
<textbox id="urlfield"/>
</toolbar>
</toolbox>
<iframe id="content-body" src="http://www.mozilla.org" flex="1"/>

2、 Browser 面板:如果想见一个和浏览器一样效果的面板,使用Browser即可,其属性如下:
Src:指定要在面板中显示的页面。
Homepage:指定浏览器面板显示的主页。
Autoscroll:当autoscroll的值为true时,则激活滚
动条。当autoscroll的值为false时,
滚动条被禁用。
示例演示:

<browser src="http://www.mozilla.org" type="content" flex="1"/>

28、 分隔条splitter元素的属性:

Id 属性:唯一标识符;
State属性:显示分隔条的状态,其值有open,collapsed,默认值为open;
Collapse 属性:指定当splitter的按键,被点击时哪边被折叠。若未指定此属性,splitter是不会引起折叠的(按键不会出现)。其值有none,befor,after:
None:无折叠发生;
Before:当按下键时,相同组件内的元素立即再分割器前折叠起来,这样其宽度或高度将变为0。
After:当按下键时,相同组件内的元素立即在分割器后折叠起来,这样其宽度或高度将变为0。
Resizebefore属性:当splitter改变时,指定splitter左边的那个元素必须重新调整。当splitter移动时,使用closest来重新调整最靠近splitter左边的编辑列;使用farthest来重新调整splitter最左边的编辑列。
Resizebeafter 属性:当splitter改变时,指定splitter右边的哪个元素被调整。在这个范围内,使用farthest来重新调整最右边的弹性空间;
使用closest来重新调整最靠近splitter右边的弹性空间;
使用grow来设定splitter右边的弹性空间不改变。
例子演示:

<hbox flex="1">
<iframe id="content-1" width="60" height="20" src="w1.html"/>
<splitter collapse="before" resizeafter="farthest">
<grippy/>
</splitter>
<iframe id="content-2" width="60" height="20" src="w2.html"/>
<iframe id="content-3" width="60" height="20" src="w3.html"/>
<iframe id="content-4" width="60" height="20" src="w4.html"/>
</hbox>

29、 滚动条Scroll Bars属性:
Id 属性:唯一标识符。
Orient 属性:指定滚动条的方向,其值有:horizontal,vertical;
Horizontal表示水平方向;vertical表示垂直方向。
Curpos 属性:表示当前值,它应该在0到maxpos之间。缺省值是0。
Maxpos 属性:Maxpos表示最大值,缺省值是100。
Increment属性:表示增量值,缺省值是1。
Pageincrement 属性:翻页时的增量值,却省值是10;
例子演示:

<scrollbar
id="identifier"
orient="horizontal"
curpos="20"
maxpos="100"
increment="1"
pageincrement="10"/>

30、 工具栏描述说明:
工具栏包含了toolbox,toolbar,toolbarbutton等元素;
例子演示:

<vbox flex="1">
<toolbox>
<toolbar id="findfiles-toolbar">
<toolbarbutton id="opensearch" label="Open"/>
<toolbarbutton id="savesearch" label="Save"/>
</toolbar>
</toolbox>
<tabbox>

31、 菜单栏:

(1) menubar 元素:menubar是一个包括菜单的框。菜单栏没有特殊的属性,仅仅是一种类型的框。通过设置orient属性来确定menubar的方向,其值有vertical和horizental。

(2) menu元素属性:
id 属性:菜单主题按钮的唯一标识符。
Label属性:显示菜单栏上的文字。
Disabled 属性:该布尔值决定菜单是否被禁用。默认为false;
Acesskey 属性:设置的快捷键。

(3) menupopup元素说明:menupopup元素创建包含菜单命令的弹出窗口。他是一
中类型的框。默认为垂直布局。如果想要将menupopup放置在一排,
你可以将它改为水平布局。通常仅有menuitems元素和menuseparators放置在menupopup中。

(4) menuitem 元素:
1、id 属性:菜单项的唯一标识符。
2、label属性: 显示菜单项的文本。
3、disabled 属性:该布尔属性值决定菜单项是否被禁止。该属性可以被设置为true或者false,但默认值是后者。
4、accesskey 属性: 该值是用户可以使用键盘激活菜单项的键值。该字母通常以下划线方式显示于菜单主题后面(即创建快捷键)。
5、acceltext 属性:该值指定显示在菜单命令末尾的快捷键文本提示。

(5)menuseparator元素:menuseparator没有特别的属性。它只是在两个相近的菜单元素之间创建一条水平的分割线。

例子演示:

<toolbox>
<menubar id="findfiles-menubar">
<menu id="file-menu" label="File" accesskey="f">
<menupopup id="file-popup">
<menuitem label="Open Search..." accesskey="o"/>
<menuitem label="Save Search..." accesskey="s"/> 
<menuseparator/>
<menuitem label="Close" accesskey="c"/>
</menupopup>
</menu>
<menu id="edit-menu" label="Edit" accesskey="e">
<menupopup id="edit-popup">
<menuitem label="Cut" accesskey="t"/>
<menuitem label="Copy" accesskey="c"/>
<menuitem label="Paste" accesskey="p" disabled="true"/>
</menupopup>
</menu>
</menubar>
<toolbar id="findfiles-toolbar>
32、	滚动菜单说明:
创建滚动菜单需要使用到arrowscrollbox元素,其属性为:
Orient 属性:指定滚动菜单的方向,其值有:vertical, horizenta。
例子演示:
<arrowscrollbox orient="vertical" flex="1">
<button label="Red"/>
<button label="Blue"/>
<button label="Green"/>
<button label="Yellow"/>
<button label="Orange"/>
<button label="Silver"/>
<button label="Lavender"/>
<button label="Gold"/>
<button label="Turquoise"/>
<button label="Peach"/>
<button label="Maroon"/>
<button label="Black"/>
</arrowscrollbox>

33、 弹出菜单:

1、例子演示:
(1) 普通弹出:当你在某个元素上按了左键会弹出来,而且它可以包含任何内容,放在任何地方。
(2) 上下文弹出:当你在某个元素上按上下文菜单按钮时弹出,通常是点右键。它可以是通过点击按钮,也可以通过按钮与鼠标的组合来调用。

<popupset>
<popup id="clipmenu">
<menuitem label="Cut"/>
<menuitem label="Copy"/>
<menuitem label="Paste"/>
</popup>
</popupset>
<box context="clipmenu">
<description value="Context clickmenu"/>
</box>

(3) 工具提示:当你的鼠标放在某个元素上时,会有一个弹出窗口用来显示元素的描述信息。

<button label="Save" tooltiptext="Click here to save your stuff"/> 
<popupset>
<tooltip id="moretip" orient="vertical" style="background-color: #33DD00;">
<description value="Click here to see more information"/>
<description value="Really!" style="color: red;"/>
</tooltip>
</popupset
<button label="More" tooltip="moretip"/>

2、弹出对齐方式:缺省情况下弹出菜单将显示在鼠标点击的地方,但有时你可能想放在其它的位置。那么需要设置popup的position属性。position属性也可以用在menupopup上。它用来指示弹出菜单将显示在调用它的元素的相对位置。有许多种取值:after_start, after_end, before_start, before_end, end_after, end_before, end_before, start_after, start_before, overlap, at_pointer, after_pointer

34、树trees

(1) tree的描述:tree有两部分组成(列集和tree body),列集有一些treecol的元素定义的,每个treecol元素定义一个列,每个列都出现在列的头部。第二部分是tree body,包含那些出现在tree中的数据,由treechildren标签创建。

(2)tree中的元素:

1、tree元素:tree的根元素
Rows属性:rows属性控制多少行可见。通过将其设置为zero,tree控件会改变其自身大小来容纳近可能多的项目。
Seltype属性:是否允许多选,其值有:
Single:一次只能选择一行数据。
Multiple:允许其能选择多行数据。
2、treecols元素:treecol的占位元素
3、treecol元素:用于定义tree中的一个列,使用这个元素,可以加上额外的信息用于指定该列中的数据是怎么排列的,或者是否允许用户调整列的宽度. 你应该给每个列指定一个id属性,因为, Mozilla在重新排列和排序时使用id属性来标识每个列。
4、treechildren元素: 这个包含了tree的主体部分,用于显示单独的数据行。
注:
1、若组件没有包含treechildren,则它为一个不接受任何子项目的叶子节点。
2、若组件包含了treechildren,则它为一个可以可以包含其它项的分支节点。

5、treeitem 元素: 组件包含一行数据(treerow),及可选的treechildren。
Open属性:来控制是否显示其子项目。默认为true,若为false则tree
的哪部分不可见。

6、treerow元素: tree中的单独行,需要放置在treeitem组件内。

7、treecell元素:treerow中的单独元素(cell),将此元素放在treerow组件内。
(3)例子演示:

<tree id="tree" rows="5">
<treecols>
<treecol label="Name"/>
<treecol label="Description"/>
</treecols>
<treechildren>
<treeitem>
<treerow>
<treecell label="Item 1"/>
<treecell label="Item 1 description"/>
</treerow>
</treeitem>
<treeitem>
<treerow>
<treecell label="Item 2"/>
<treecell label="Item 2 description"/>
</treerow>
<treechildren>
<treeitem>
<treerow>
<treecell label="Item 2.1"/>
</treerow>
<treechildren>
<treeitem>
<treerow>
<treecell label="Item 2.1.1"/>
</treerow>
</treeitem>
<treeitem>
<treerow>
<treecell label="Item 2.1.2"/>
</treerow>
</treeitem>
</treechildren>
</treeitem>
<treeitem>
<treerow>
<treecell label="Item 2.2"/>
<treecell label="Item 2.2 is something who cares"/>
</treerow>
</treeitem>
</treechildren>
</treeitem>
<treeitem label="Item 3"/>
</treechildren>
</treeitem>
<treeitem label="Item 3"/>
</treechildren>
</treeitem>
</treechildren>
</tree>

xul的事件和脚本

1、添加事件处理器

Script 元素的属性:xul的事件处理和HTML相似。对于需要响应事件的元素,只要在元素中增加相应的事件处理函数即可。
Src 属性:脚本文件的路径。
Type 属性:使用脚本的语言,一般这个属性设为:application/x-javascript。
例子演示:

<script src="findfile.js"/>
<script src="chrome://findfiles/content/help.js"/>
<script src="http://www.example.com/js/items.js"/>

Xul中的内置事件有:oncommand、onkeypress、onclick、onload、onkeyup、dblclick mousedown、mouseup、mouseover、mousemove、mouseout等
例子演示:

<button label="OK"oncommand="alert('Buttonwapressed!');"/>
<menuitem label="Close" accesskey="c" oncommand="window.close();"/>
<button id="cancel-button" label="Cancel" oncommand="window.close();"/>
2、 键盘快捷键

有关的元素如下:keyset、key
1、 keyset元素:key元素的外部元素,key元素必须设置在keyset元素的内部。其属性有:
Id属性:为一标识符。
Align属性:指定了keyset内部的元素是怎样排列的,其值有start、center、end、baseline、stretch、left、
Right。
Src 属性:指定了keyset元素的css样式表的风格。
Empty 属性:如果其值设为true,表示容器元素内没有子元素。
2、 key元素:用来设置快捷键。
其属性如下:
Command属性:其值为某个元素的id名称,表示这个元属与某个元素关联。
Disabled 属性:是否被禁用,其是一个布尔值,设为true表示这个元素被禁用。
Key 属性:其值是一个字符,这是设置的快捷键的值,当这个键被按时,就会触发事件。
Keytext 属性:指定快捷键的文本。
Modifiers属性:修饰键,其值有shift、alt、control、accel;
Shif: shift键。
Alt : alt键。
Control:control键。
Keycode 属性:设定快捷键的值,和key的用法类似,其值:

VK_CANCEL VK_BACK VK_TAB VK_CLEAR
VK_RETURN VK_ENTER VK_SHIFT VK_CONTROL
VK_ALT VK_PAUSE VK_CAPS_LOCK VK_ESCAPE
VK_SPACE VK_PAGE_UP VK_PAGE_DOWN VK_END
VK_HOME VK_LEFT VK_UP VK_RIGHT
VK_DOWN VK_PRINTSCREEN VK_INSERT VK_DELETE
VK_0 VK_1 VK_2 VK_3
VK_4 VK_5 VK_6 VK_7
VK_8 VK_9 VK_SEMICOLON VK_EQUALS
VK_A VK_B VK_C VK_D
VK_E VK_F VK_G VK_H
VK_I VK_J VK_K VK_L
VK_M VK_N VK_O VK_P
VK_Q VK_R VK_S VK_T
VK_U VK_V VK_W VK_X
VK_Y VK_Z VK_NUMPAD0 VK_NUMPAD1
VK_NUMPAD2 VK_NUMPAD3 VK_NUMPAD4 VK_NUMPAD5
VK_NUMPAD6 VK_NUMPAD7 VK_NUMPAD8 VK_NUMPAD9
VK_MULTIPLY VK_ADD VK_SEPARATOR VK_SUBTRACT
VK_DECIMAL VK_DIVIDE VK_F1 VK_F2
VK_F3 VK_F4 VK_F5 VK_F6
VK_F7 VK_F8 VK_F9 VK_F10
VK_F11 VK_F12 VK_F13 VK_F14
VK_F15 VK_F16 VK_F17 VK_F18
VK_F19 VK_F20 VK_F21 VK_F22
VK_F23 VK_F24 VK_NUM_LOCK VK_SCROLL_LOCK
VK_COMMA VK_PERIOD VK_SLASH VK_BACK_QUOTE
VK_OPEN_BRACKET VK_BACK_SLASH VK_CLOSE_BRACKET VK_QUOTE
VK_HELP
事例演示:

<keyset>
<key id="copy-key" modifiers="accel" key="C"/>
<key id="find-key" keycode="VK_F3"/>
<key id="switch-key" modifiers="control alt" key="1"/>
</keyset>

3、 key事件:keypress、keydow、keyup

3、焦点和选择:

1、获取焦点或失去焦点:
Onfocus 属性:元素的onfocus属性表示这个元素获取焦点。
Onblur 属性:元素的onblur属性表示这个元素失去焦点。
Style 属性:元素的样式表,可以用style属性来控制焦点的获取和失去。
其值有:-moz-user-focus: nomal和-moz-user-focus:ignore;
前者表示获取焦点,后者表示失去焦点。
例子演示:
<label id=“focused” style="-moz-user-focus: normal;" οnkeypress=“alert(‘Label Focused’);” value=“Focus Me”/>
2、addEventListener():这个方法用来捕获事件的处理器。其参数有三个:
参数一:事件名,参数二:事件处理函数,参数三:若为true表示不捕获冒泡消息。
3、文本选择:
Select():用来选择文本框的文本,用法:tbox.select();
setselectionRange(int start,int end);用来选择文本框的某一范围内的文本,用法:tbox.setselectionRange(4,8);
4、命令:
例子演示:

<command id="cmd_openhelp" oncommand="alert('Help');"/>
<button label="Help" command="cmd_openhelp"/>
<button label="More Help" command="cmd_openhelp"/>
<button label="Disable">
DOM

DOM可以用于处理XUL元素,如获取它们的信息、修改其内容等。

DOM介绍

DOM用于XUL节点的树。XUL文件被加载时,标签被解析转换为层状的文档节点结构,每个节点对应一个标签,或者对应一段文本。DOM提供了一些方法来实现其功能。特殊的XUL元素也提供了额外的方法。

每个被加载的XUL文件将会有自己的文档,这些文档显示在window或frame中。尽管一个文档每次只关联一个window,但可以使用其他来加载额外的文档。

在Mozilla中,使用Javascript来访问和操纵DOM。各种DOM对象拥有的方法,都可以再脚本中使用。

再Javascript中,总是会有一个全局对象。全局对象的属性和方法,可以直接被引用。在一个浏览器上下文中,window是一个全局对象。全局对象对于不同的window不是相同的。每个frame所拥有的window对象也是不一样的。

当在脚本的最顶层,或者在方法的外面定义的一个方法或变量,其实就是声明了一个全局的对象。

因而,如果在一个window中访问另外一个window的变量或方法,所需要做的就是使用另外一个window的引用来访问。

alert(window.opener.getText());

每个window都有一个opener属性,这个属性存放了打开自己的另一个window。

window.open(“test.xul”, “_new”);

window的open方法返回的也是一个新window的引用。需要注意的是,open方法返回的window并没有被加载完。

在DOM说明中,并没有对window进行定义。在Mozilla中,window被当中DOM的第0层,即DOM Level 0。事实上,document在window中,可以使用window的document属性来访问。Document属性经常被直接引用,因为在window的众多属性中,document使用的频率很高。

Mozilla提供了三种主要的document,分别是HTMLDocument,XMLDocument和XULDocument。

检索元素

检索元素最常用的方法是,为元素分配一个id,之后使用document的getElementById方法。

var state = document.getElementById(‘casecheck’).checked;

在一个查找对话框中,进度条上的文字和树上的数据对于查找的文字是无效的。在查找之前,进度条必须是不可见的,使用hidden属性可以做到。

在查找对话框中,为查找按钮添加oncommand句柄来实现查找的功能。在查找功能的实现方法中,设置进度条的hidden为false,使得进度条可见。

将脚本放置在一个单独的文件里,可以有更好的效果。

XUL元素DOM

每个XUL元素拥有一些attribute,properties和children。Attribute,如flex=”1”。Property在Javascript中可以使用点语法,如element.hidden。children是指元素的child标签。DOM具有一些方法,可以用来操纵元素的attribute,properties和children。

Attribute和properties并不相同。一个attribute名并不定有相同的一个property与之对应。不过,通常情况下,是存在的。如attribute flex和property flex。有些properties,XUL需要执行一些复杂的计算。

操纵attribute的一些方法:getAttribute(name),返回指定名字的attribute;hasAttribute(name),返回true如果指定名字的attribute有值;setAttribute(name, value),为指定名字的attribute赋值;removeAttribute(name),移除指定名字的attribute。

var box = document.getElementById(“somebox”);
var flex = box.getAttribute(“flex”);

如果使用property flex时,将会是下面的情况:

var box = document.getElementById(“somebox”);
var flex = box.flex;

有些情况,attribute和property是有区别的。如,getAttribute(“hidden”)返回的是一个string值’true’,而property hidden返回的将会是boolean值true。

每一个XUL元素都实现了接口XULElement。一个XUL元素是一个声明在XUL namespace中的元素。XULElement接口有一些XUL元素专有的一些property和method,许多是从DOM的Element接口中继承而来的。

一个namespace是一个URI,指定了元素的类别。

浏览DOM

DOM是一个树状结构,拥有一个怀有children的root节点。使用document的documentElement property可以引用root节点。Root节点总是一个元素。在XUL中,一个元素对应一个标签。在一棵document树中还可以有text节点、comment节点等。在XUL中,root元素对应于window标签。

访问一棵document树,有一些常用的方法:firstChild,访问元素的第一个child节点;lastChild,访问元素的最后一个child节点;childNotes,获取一个元素的所有child的list;parentNode,访问一个节点的父节点;nextSibling,访问临近的下一个节点;previousSibling,访问临近的上一个节点。

遍历childNodes列表中的所有项:

Var childNodes = document.documentElement.childNodes;
For (var I = 0; i < childNodes.length; i++) {
Var child = childNodes[i];
//…
}

修改XUL文档

DOM提供了一些方法来修改document。

创建新的元素

方法createElement可以用于创建一个新的元素。不过,需要一个参数,即标签的名字。然后,可以使用方法setAttribute来设置元素的属性。并且,使用方法appendChild可以将元素挂载到其他的元素中。

var abox = document.getElementById(“abox”);

var button = document.createElement(“button”);
button.setAttribute(“label”, “A Button”);
abox.appendChild(button);

方法createElement会创建一个默认的元素。默认值得的是,在XUL文档中,一个XUL元素会被创建。有一个方法,即createElementNS,可以创建不同namespace的元素。

有三各和appendChild相近的方法是:insertBefore,replaceChild,removeChild。

parent.appendChild(child);
parent.insertBefore(child, referenceChild);
parent.replaceChild(newChild, oldChild);
parent.removeChild(child);

通常情况下,需要移除掉已经存在的元素,以及增加一些其他的。如果是这样的话,可以再增加一个元素前不去移除掉不需要的元素。因为,在某各时刻,一个节点只会出现在一个地方。Inserting操作将会先将原有的节点从其位置中移走。

方法cloneNode可以复制一个元素。这个方法有一个boolean类型的参数,用于标识是否级联拷贝元素的所有子元素。如果参数值设置为true,则复制所有子元素;参数值为false,仅复制所指定的元素。

有一些元素,如listbox和menulist提供了一些额外的专门的修改方法。

操作基本的元素

XUL中比较基本的元素,如buttons、checkboxes和radio buttons,使用脚本properties可以对其进行操纵。常用的一些properties包括:label,value,checked和disabled。这些properties可以设置或修改对应的attributes。

<button label=”hello” oncommand=”this.label=’goodbye’;”/>

同样,textbox也可以这样应用:

<button label=”Add” oncommand=”this.nextSibling.value+=’1’;”/>

Checkboxes有一个checked property,可以用于勾选和取消对checkbox的勾选。

<button label=”change” oncommand=”this.nextSibling.checked=!this.nextSibl ing.checked;”/>
<checkbox label=”check for messages”/>

Radio buttons拥有property selected,可以用于设置radio button是否被selected。在一组radio buttons中,有一个radio button被选中,其他的radio button就没有被选择。Radiogroup有一个property selectedIndex,可以用于操纵对radio button的选择。

有时需要使得一个元素暂时不可用,property disabled可以做到。

<script>
Function updateState() {
Var name=document.getElementById(“name”);
Var sindex=document.getElementById(“group”).selectedIndex;
If(index==0) name.disabled=true;
Else name.displaed=false;
}
</script>

<radiogroup id=”group” οnselect=”updateState();”>
<radio label=”random name” selected=”true”/>
<hbox>
<radio label=”specify a name”/>
<textbox id=”name” value=”Jim” disabled=”true”/>
</hbox>
</radiogroup>

这里,第二个radio在元素hbox中,但也是radiogroup的一部分。

操纵list

XUL列表提供一些专门的方法。

List的操纵

元素listbox提供了许多方法来操纵和检索项。操纵listbox有些标准的方法,但推荐使用专门的listbox方法。因为更简单。

方法appendItem用于附加一个新的项到list的末尾。

<script>
Function addItem() {
Document.getElementById(‘thelist’).appendItem(‘Thursday’, ‘thu’);
}
</script>

<listbox id=”thelist”/>

<button label=”add” oncommand=”addItem();”/>

在方法addItem中,有两各参数,分别是label和value。Value其实是可选的。

同样地,对list操纵的方法还有,insertItemAt和removeItemAt。

list.insertItemAt(3, “Thursday”, “thu”);
list.removeItemAt(3);

在这里,被添加到位置3的项其位置为3,之前位置为3的项其位置变为4。在list中,第一个项的位置为0。

这里的三个方法其实声明在接口nsIDOMXULSelectControlElement中,实现了该接口的元素还有menulist,radiogroup和tabs元素。

List的选择

接口nsIDOMXULSelectControlElement提供了两个额外的properties,是selectedIndex和selectedItem。在menulist中,selectedItem会是一个menuitem。如果没有被选中的项,selectedIndex会返回-1,而selectedItem会返回null。

<listbox id=”thelist” οnselect=”alert(this.selectedItem.label);”>
<listitem label=”short”/>
<listitem label=”medium”/>
<listitem label=”tall”/>
</listbox>

同样地,select事件也会发生在radiogroup和tabs元素中。Menulist并不会触发select事件。command事件会被menulist触发。

对于tabs,元素tabbox的方法会被使用。元素tabbox有一些常用的方法:selectedIndex,selectedTab,selectedPanel。

Listboxes也支持多选和接口nsIDOMXULMultiSelectControlElement中的功能。这个接口提供了一些专门的方法来处理多选情况。如,property selectedItems,selectedCount。当心在遍历处理list时,list本身会改变以及一些属性会返回和之前不同的值。

删除所有被选择的项:

<script>
Function deleteSelection(){
var list=document.getElementById(‘thelist’);
var count=list.selectedCount;
while(count--){
var item=list.selectedItems[0];
list.removeItemAt(list.getIndexOfItem(item));
}
}
</script>

<button label=”delete” oncommand=”deleteSelection();”/>

<listbox id=”thelist” seltype=”muleiple”>
<listitem label=”cheddar”/>
<listitem label=”Cheshire”/>
<listitem label=”edam”/>
<listitem label=”gouda”/>
<listitem label=”havartie”/>
</listbox>

对于选择的项,还有一些其他的方法:addItemToSelection添加一个新的项,removeItemFromSelection移除一个项。

List滚动条

在listbox中,如果有更多的行需要显示,一个滚动条会出现,便于用户滚动列表。使用listbox的一些方法,可以调改滚动条的位置。

方法scrollToIndex用于滚动到指定的行。Listbox会滚动,然后所指定的行会被置于可见处的第一行,除非所指定的行处于列表内容的底部。

方法ensureIndexIsVisible类似,滚动也是为了显示某一行。不过,当所指定的行处于可见区域时,就不再须滚动到第一行中。

方法ensureItemIsVisible也有相同的效果。

Box对象

box对象用于放置显示区域和布局。

关于Mozilla布局

Mozilla中划分中两种类型的树,一是内容树,二是布局树。内容树存储节点为在源程序中见到的那样。布局树存储着一棵节点树,这棵树的每个节点可以被显示。

DOM通常被用于获取和修改文档结构或内容的信息。

布局对象具有更多的小片信息:如标签名字、元素的attributes、各种CSS properties、元素周围的元素和布局对象,以及和元素相关的XBL。

除非修改了元素的样式,否则大多XUL元素都会使用box布局对象,或其子类型的布局对象。其实所有XUL元素都是box类型。Box有大约25种子类型,为专门的XUL元素所使用。有些子类型,如stack或listbox需要更多复杂的布局。其他的,如button等只须简单的基本box就可以。

和一个元素相关的布局对象可以被移除。CSS的display property会被使用到。如,修改button元素的display property为block,会促使button元素的布局对象被移除,block对象会被创建。结果,也就改变了元素的显示和方法。

布局对象如何构建的细节其实并不须要更多的了解。

Box对象

XUL提供了一些有有用的辅助对象,叫做box对象。Box对象可以提供一些布局相关的信息。

Box对象有一些子类型,不过用的多的只有少数。Box或接口BoxObject有些properties比较有用。

基本的box对象有两个有用的特性。一是,检索XUL元素的位置和尺寸;二是,决定元素的顺序。

Box对象提供了四个properties:x,y,width和height,用于决定元素的位置和尺寸。其中x和y是相对于document的左上角,并不包括window的border和title。单位是像素pixels。另外的width和height使用单位也是pixels,表示的是元素的宽度和高度,不过包含CSS的padding和border在内。

当元素被移动或者伸缩时,关于位置和尺寸的值就会有所变动。

Width和height attribute可以用于指定一个元素的宽度和高度。检索这些properties的值会返回并得到元素的尺寸,如果已经有显示地指定的话。在之前如果没有设置值的话,这些properties会返回一个空的string值。也就是说,不能获取当前的尺寸,除非使用box对象的properties。

元素的width和height properties返回已经设置的值,而box对象返回当前的值。

Attribute hidden会隐藏掉元素,使之不显示出来。这些位置和尺寸的值就会为0,因为被隐藏而没有显示出来的缘故。元素也不会有位置和尺寸。

如果hide或collapse掉label,则元素就被当作被hidden掉。

XUL Element顺序

Box对象也可用于确定元素的显示顺序。

Box对象有一些properties:firstChild,lastChild,nextSibling、previousSibling和parentBox。Box对象没有childNodes属性。

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页