增加HTML元素

  增加HTML元素到窗口

  除了可以使用XUL的所有元素,你也可以直接将HTML元素添加到XUL文件的内部。现在你可以在XUL文件中使用任意的HTML元素,意思是说可以在窗口中布置JAVA小应用程序(applet)和表格。如果可以你应该避免在XUL文件中使用HTML元素。(这是有原因的,主要涉及版面的控制这将在后面进行描述)。然而,不管怎样这节将描述如何使用它们。记住XML是大小写敏感的,因此你必须用小写输入标签和属性。

  XHTML命名空间(namespace)

  为了在XUL文件中使用HTML元素,你必须声明你要用到的XHTML命令空间。这个方法是Mozilla从XUL中区分HTML标签的。 下面的属性应该加在XUL文件的window 标签中,或者放到HTML元素的最外面。

xmlns:html="http://www.w3.org/1999/xhtml"

  这个HTML的声明很像我们用过的XUL声明。要正常显示必须正确地输入这句,否则它不能正常运行。注意:Mozilla不会去下载这个URL的内容,但它会在运行HTML时对它进行验证。

  这是一个可以加到文件查找窗口的例子:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
id="findfile-window"
title="Find Files"
orient="horizontal"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  因此,你可以像平常一样使用HTML,下面列出需注意的守则:

  你必须在每个标检的开始增加一个html:的前缀,像上面一样声明的HTML命名空间。

  标签必须用小写输入.

  "双引号" 必须完全把所有的属性值括起来。

  在没有内容的XML标签的末端(>)前一定要加上结束符(/),下面的例子很清楚地进行了示范。

  使用HTML元素

  你可以像head 和 body使用所有的HTML标签,不是真的有益。下面演示一些使用HTML元素的例子。

<html:img src="banner.jpg"/>
<html:input type="checkbox" value="true"/>
<html:table>
<html:tr>
<html:td>
A simple table
</html:td>
</html:tr>
</html:table>

  这些示例将从banner.jpg创建一个图像,一个多选项和一个只有一个单元格的表。如果XUL的特性是可用的你应该总是使用它们并且你不应该在XUL中使用表格作为布局。(XUL有自己的布局元素可以用)。注意html:前缀需要添加到每个标签的前面。这是Mozilla为什么会知道它是一个HTML标签而不是一个XUL标签。如果你没有加上html:部份,浏览器就会认为元素是一个XUL元素并且它们不能被正常显示,因为 img, input, table, 等都不是有效的XUL标签。

 在XUL,你可以使用description 或label 元素添加文本标签。当你要用时应该使用这些元素。你也可以使用HTML的label元素添加文本标签的操作或者你可以像下面的例子一样简单地将文本放在不同的HTML元素之间(就像p或div)。

  例1 : Source View

<html:p>
搜索:
<html:input id="find-text"/>
<button id="okbutton" label="确定"/>
</html:p>

  这段代码的目的是显示'搜索:',接着显示一个文本输入框元素和一个确定按钮。注意XUL按钮可以显示在HTML元素之间,在这里它可以正常使用。在HTML元素之间的纯文本仅仅用来显示通常用来显示文字(就像p标签)。放在外面的文本是不能被显示的,除非XUL元素允许将文本放在里面(例如:description元素)。下面的例子可以帮助你理解。

  HTML元素的实例

  下面是在窗口在添加HTML元素的一些例子。在每个例子的窗口边都能找到简单的说明信息。

  带多选框的对话框

  例2 : Source View

<html:p>
点击下面方框会记住这个结果。
<html:p>
<html:input id="rtd" type="checkbox"/>
<html:label for="rtd">记住这个结果</html:label>
</html:p>
</html:p>

  在这个例子,一个 p 标签用来放置文本,另外一人用来放置分离的多行文本。

  在HTML块外面的文本

  例3 : Source View

<html:div>
你想保存下面的文档吗?
<html:hr/>
</html:div> 
Expense Report 1
What I Did Last Summer
<button id="yes" label="Yes"/>
<button id="no" label="No"/>

  从图像上可以看到,在div标签里面的文本可以显示出来但其它的文本没有显示(Expense Report 1 和 What I Did Last Summer)。这是因为要显示的文本没有被HTML或XUL元素围绕起来。要显示这些文本,你必须将它放在div标签里面,或者用description 标签将它围起来。

  无效的HTML元素
<html:po>Case 1</html:po>
<div>Case 2</div>
<html:description value="Case 3"/>

  上面这三个样例不能被显示,每个都有一个不同的原因。

  样例1 po不是一个正确的HTML标签,所以Mozilla不知怎么去处理它。 样例2 div是有效的,但是只能用在HTML中。如果要在这里使用,你必须为它添加html:限定符。 样例3 description元素仅仅在XUL中是有效的,而不是在HTML中。它不可以有html:限定符。

时间: 2024-11-25 13:17:49

增加HTML元素的相关文章

jquery动态增加text元素以及删除文本内容实例代码

这段代码是通过jquery动态增加限定数额的text(本例为5个) ,以及清除文本内容,用到了after()方法追加元素. <!--以下为script代码开始--> 复制代码 代码如下: <script> $(document).ready(function(){ var spotMax = 5;//限定添加text元素的总个数 var afterId = 0;//要追加元素的id var newId=1;//新生成text的id if($('table#vote').size()

jquery动态增加text元素以及删除文本内容实例代码_jquery

这段代码是通过jquery动态增加限定数额的text(本例为5个) ,以及清除文本内容,用到了after()方法追加元素. <!--以下为script代码开始--> 复制代码 代码如下: <script> $(document).ready(function(){ var spotMax = 5;//限定添加text元素的总个数 var afterId = 0;//要追加元素的id var newId=1;//新生成text的id if($('table#vote').size()

ideeli正式发布全新改版页面,引进时尚品牌增加新鲜元素

2月27日消息,1月份被Groupon收购的网络服饰零售商ideeli已经于昨天正式发布了全新的改版页面. 查看ideeli的新版网站发现,新版的网站分成女装.男装.家居和鞋子四大类目,并且更换了全新的Logo.网站板块也整合的更加有条理,首页分成了正在销售.即将售罄和即将开售三大板块,强调了闪购网站的风格. 同时,ideeli还在网站的页面采用了更加鲜明的色彩设计,并且在首页和各大频道的页面顶部都增加了超大幅的推广图.这样可以允许摄影师和图片编辑更加有空间来装饰ideeli网站,并且也给顾客提

javascript-怎么动态增加元素顺序?

问题描述 怎么动态增加元素顺序? <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>JQuery Test</title> <script src="../behappy/jquery-2.1.4.min.js" charset="utf-8&q

Java数组,去掉重复值、增加、删除数组元素的方法_java

如下所示: import java.util.List; import java.util.ArrayList; import java.util.Set; import java.util.HashSet; public class lzwCode { public static void main(String [] args) { testA(); System.out.println("==========================="); testB(); System

浅析jquery某一元素重复绑定的问题

 本篇文章主要是对jquery某一元素重复绑定的问题进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助 某天晚上写代码的时候,突然出了bug,想了很久都不知道问题出在哪里(其实是很简单的问题,但由于我还是个菜鸟,所以不知道).几经周折,这中间的过程就不提了,终于让我在快崩溃的时候,发现了原因.原来是因为同一jquery元素可以重复绑定,当使用了嵌套绑定的时候,就容易出错.如代码:     代码如下: $('.test').bind('click',function(){       

当滚动条滚动到页面底部自动加载增加内容的js代码_javascript技巧

1,注册页面滚动事件,window.onscroll = function(){ }; 2,相关获取页面高度.滚动条位置.文档高度的函数: 复制代码 代码如下: //获取滚动条当前的位置 function getScrollTop() { var scrollTop = 0; if (document.documentElement && document.documentElement.scrollTop) { scrollTop = document.documentElement.s

动态数组,数组初始化,数组内存释放,向数组中添加一个元素,向数组中添加多个元素,数组打印,顺序查找,二分查找,查找数组并返回地址,冒泡排序,改变数组中某个元素的值,删除一个数值,删除所有,查找含有

 1定义接口: Num.h #ifndef_NUM_H_ #define_NUM_H_   #include<stdio.h> #include<stdlib.h>   /************************************************************************/ /*数组的结构体类型                                                    */ /***************

浅析jquery某一元素重复绑定的问题_jquery

某天晚上写代码的时候,突然出了bug,想了很久都不知道问题出在哪里(其实是很简单的问题,但由于我还是个菜鸟,所以不知道).几经周折,这中间的过程就不提了,终于让我在快崩溃的时候,发现了原因.原来是因为同一jquery元素可以重复绑定,当使用了嵌套绑定的时候,就容易出错.如代码: 复制代码 代码如下: $('.test').bind('click',function(){      $('.last').bind('click',function(){           alert('nihao