XBL绑定组建的实例

最新推荐文章于 2024-08-27 19:46:29 发布

long13131462101

最新推荐文章于 2024-08-27 19:46:29 发布

阅读量200

点赞数

分类专栏： xul 文章标签： Chrome CSS XML

本文链接：https://blog.csdn.net/long13131462101/article/details/83886350

版权

xul 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

可以利用绑定方法创建具有复合功能的控件

1.被绑定的标签常由样式表指向绑定元素定义的.xml,
如: xbltest.css中
#shortcutlistbutton_popup
{
min-width:200px;
min-height:300px;
-moz-binding:url(chrome://proj/content/bindings/startmenu.xml#startpopup);
}
其中-moz-binding 表明这是一个绑定样式,具体绑定到的位置由url指定.

2.在使绑定的控件所在的.xml页中要先引入xbl命名空间
<bindings xmlns="http://www.mozilla.org/xbl"
xmlns:xbl="http://www.mozilla.org/xbl"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
......
</bindings>

3.在<bindings></bindings>之间可以有多个<binding>标签,每一个binding标签表示一个绑定
<content>标签中为绑定的内容,当绑定xul标签时,在xbl中每一个标签名称前要加xul: 在xbl中的标签没有id属性,所以不可以直接在.xul或.js中访问,在xbl中标签作为匿名控件具有anonid属性,在xbl中可以通过
document.getAnonymousElementByAttribute(this,'anonid','toolBarBtn').来得到匿名标签.
在xul中可以通过用绑定的xul控件.属性=newvalue的方式来改变在xbl中描述的标签的属性.

4 <implementation>标签中存放一系列的属性和方法,<method>表示方法
<resources>中可用于引入源如:
<resources>
<stylesheet src="hello.css"/>
<image id="img" src="1.jpg"/>
</resources>

例:xblDemo.xul
[color=red][color=red]<?xml version="1.0"?>

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<?xml-stylesheet href="xblDemo.css" type="text/css"?>
<window xmlns:html="http://www.w3.org/1999/xhtml"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
οnlοad="" >
<script>
function changeC()
{
document.getElementById("mybox").setAttribute("content","9");
var obj=document.getElementById("mybox");
alert(obj.getAttribute("content"));
}

</script>
<vbox flex="1" style="overflow:auto">
<label value="下面是绑定一个box"/>
<box id="mybox" class="boxBinding" value="age"/>
<button maxwidth="200px" label="通过content属性改变内容" oncommand="changeC();"/>

<spacer height="30px"/>
<box id="mybox2" class="boxBinding2">
<label value="第二個綁定,xbl中的标签不会显示"/>
<textbox value="xul中的textbox" />
</box>

<spacer height="30px"/>
<box id="mybox3" class="boxBinding3">
<label value="在xbl中用children标标签，xul,xbl标签同时显示"/>
<textbox value="xul中的textbox" />
<button label="show" oncommand=""/>
</box>

<spacer height="30px"/>
<abox id="mybox4" class="boxBinding4">
<label value="children 的includes可以过滤显示xul中的元素"/>
<textbox value="xul中的textbox" />
<textbox value="xul中的textbox" />
<textbox value="xul中的textbox" />
<image src="xulplanet.png"/>
</abox>

<spacer height="30px"/>
<box id="mybox5" class="boxBinding5"/>

<spacer height="30px"/>
<box id="mybox6" class="boxBinding6"/>
</vbox>
</window>

//xblDemo.css
.boxBinding
{
-moz-binding: url("xblDemo.xml#boxBinding");
}

.boxBinding2
{
-moz-binding: url("xblDemo.xml#boxBinding2");
}

.boxBinding3
{
-moz-binding: url("xblDemo.xml#boxBinding3");
}

abox
{
-moz-binding: url("xblDemo.xml#boxBinding4");
}

.boxBinding5
{
-moz-binding: url("xblDemo.xml#boxBinding5");
}

.boxBinding6
{
-moz-binding: url("xblDemo.xml#boxBinding6");
}[/color]//xblDemo.xml
<?xml version="1.0"?>

<bindings xmlns="http://www.mozilla.org/xbl"
xmlns:xbl="http://www.mozilla.org/xbl"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<binding id="boxBinding">
<content>
<xul:label value="Name:" xbl:inherits="value"/> 
<xul:textbox value="default value" xbl:inherits="value=content"/>


</content>
</binding>

<binding id="boxBinding2">
<content>
<xul:textbox value="I am xbl: textbox"/>

</content>
<implementation id="www">
<method name="fun">
<body>
<![CDATA[
alert("hello,in boxBinding2");
]]>
</body>
</method>
</implementation>
</binding>

<binding id="boxBinding3">
<content>
<xul:vbox>
<xul:textbox value="I am xbl: textbox"/>
<children />

</xul:vbox>
</content>
</binding>

<binding id="boxBinding4">
<content>
<xul:vbox>
<children/>
<xul:textbox value="I am xbl: textbox"/>
<children includes="image|textbox"/>

</xul:vbox>
</content>
</binding>

<binding id="boxBinding5" extends="#boxBinding2">

</binding>

<binding id="boxBinding6" extends="#boxBinding2">
<content> 
<xul:textbox value="这是content中的绑定标签"/>
<xul:button label="调用父类的方法" oncommand="fun();"/>

</content>
<implementation id="aa">

</implementation>
</binding>

</bindings> [/color]