ma3r
小狐狸
小狐狸
  • UID38188
  • 注册日期2012-02-02
  • 最后登录2014-12-07
  • 发帖数25
  • 经验20枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
  • 社区居民
阅读:2265回复:5

[扩展开发] 如何动态添加控件

楼主#
更多 发布于:2012-09-10 17:31
比如,我要用 javascript 把一个 checkbox 添加的我自己建的一个工具条中,该怎么写?
最好有示例代码。
谢谢!
ma3r
小狐狸
小狐狸
  • UID38188
  • 注册日期2012-02-02
  • 最后登录2014-12-07
  • 发帖数25
  • 经验20枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
  • 社区居民
1楼#
发布于:2012-09-10 17:31

我试了一下,因为是 XUL 嘛,稍微改了一下:
var checkbox = document.createElement( "checkbox" );
			checkbox.style.listStyleImage = 'url( "..." )';
			sitesBox.appendChild( checkbox );
			// 以上的起作用了,但是以下的都不起作用。
			checkbox.id = "...";
			checkbox.src = "...";
			checkbox.title = "...";
			checkbox.label = "...";
			checkbox.tooltiptext = "...";
			checkbox.oncommand = "...;";

这个问题看起来是动态添加的问题,如果直接写在 XUL 里是没有问题的。

改成这样就行了:
checkbox.setAttribute( "id", "..." );
				checkbox.setAttribute( "tooltiptext", "..." );
				checkbox.setAttribute( "oncommand", "..." );
ma3r
小狐狸
小狐狸
  • UID38188
  • 注册日期2012-02-02
  • 最后登录2014-12-07
  • 发帖数25
  • 经验20枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
  • 社区居民
2楼#
发布于:2012-09-10 17:31
白左
<!DOCTYPE HTML>
<html><head>
	<meta charset="UTF-8">
	<title>Dynamic Chrome Operation Sample</title>
	<script type="text/javascript">
	function addACheckboxOrSomethingElseToTargetById(id){
		var target=document.getElementById(id);
		var cb = document.createElement('input');
		cb.type = 'checkbox';
		cb.title = '[' + Math.random() + ']';
		target.appendChild(cb);
	}
	</script>
</head>
<body>
	<button onclick="addACheckboxOrSomethingElseToTargetById('ImEmptyExceptForSomeJunk')">Add more junk</button>
	<div id=ImEmptyExceptForSomeJunk >Communist Party of China</div>
</body></html>
回到原帖

我试了一下,因为是 XUL 嘛,稍微改了一下:
var checkbox = document.createElement( "checkbox" );
			checkbox.style.listStyleImage = 'url( "..." )';
			sitesBox.appendChild( checkbox );
			// 以上的起作用了,但是以下的都不起作用。
			checkbox.id = "...";
			checkbox.src = "...";
			checkbox.title = "...";
			checkbox.label = "...";
			checkbox.tooltiptext = "...";
			checkbox.oncommand = "...;";

这个问题看起来是动态添加的问题,如果直接写在 XUL 里是没有问题的。
ma3r
小狐狸
小狐狸
  • UID38188
  • 注册日期2012-02-02
  • 最后登录2014-12-07
  • 发帖数25
  • 经验20枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
  • 社区居民
3楼#
发布于:2012-09-10 17:31
白左
<!DOCTYPE HTML>
<html><head>
	<meta charset="UTF-8">
	<title>Dynamic Chrome Operation Sample</title>
	<script type="text/javascript">
	function addACheckboxOrSomethingElseToTargetById(id){
		var target=document.getElementById(id);
		var cb = document.createElement('input');
		cb.type = 'checkbox';
		cb.title = '[' + Math.random() + ']';
		target.appendChild(cb);
	}
	</script>
</head>
<body>
	<button onclick="addACheckboxOrSomethingElseToTargetById('ImEmptyExceptForSomeJunk')">Add more junk</button>
	<div id=ImEmptyExceptForSomeJunk >Communist Party of China</div>
</body></html>
回到原帖

非常感谢!
原来就是跟操作 HTML 一样的,我还以为操作 XUL 会有什么不同呢。
我试试。

对了,我在 ECMA 里见到一个 Node,不知道干什么用的。用法大概是:
var checkbox = new Node();
			checkbox.nodeName = "checkbox";
			checkbox.label = "Check";
			boxes.appendChild( checkbox );
lonely_8
非常火狐
非常火狐
  • UID30273
  • 注册日期2009-09-03
  • 最后登录2022-08-09
  • 发帖数733
  • 经验469枚
  • 威望0点
  • 贡献值86点
  • 好评度149点
  • 社区居民
  • 忠实会员
4楼#
发布于:2012-09-10 17:31
白左
千年狐狸
千年狐狸
  • UID34985
  • 注册日期2010-12-29
  • 最后登录2025-04-27
  • 发帖数2040
  • 经验656枚
  • 威望0点
  • 贡献值364点
  • 好评度69点
  • 社区居民
  • 忠实会员
5楼#
发布于:2012-09-10 17:31
<!DOCTYPE HTML>
<html><head>
	<meta charset="UTF-8">
	<title>Dynamic Chrome Operation Sample</title>
	<script type="text/javascript">
	function addACheckboxOrSomethingElseToTargetById(id){
		var target=document.getElementById(id);
		var cb = document.createElement('input');
		cb.type = 'checkbox';
		cb.title = '[' + Math.random() + ']';
		target.appendChild(cb);
	}
	</script>
</head>
<body>
	<button onclick="addACheckboxOrSomethingElseToTargetById('ImEmptyExceptForSomeJunk')">Add more junk</button>
	<div id=ImEmptyExceptForSomeJunk >Communist Party of China</div>
</body></html>
-いたんですか? -ええ、ずっと
游客

返回顶部