DIV 使用Scroll来设定固定区域滚动,超出区域的显示问题。

保罗的寓言 发布于 2011/06/17 17:38
阅读 6K+
收藏 0

结合使用dojo-0.4.3生成dojo button控件是显示问题,

问题描述,

在html中设定一个div区域固定大小,支持scroll滚动,超出的部分将被隐藏,div的内容是一个table,通过dojo button来对某一列进行填充 ,

预期结果:超出div设定的范围,将被隐藏

问题:超出div区域,dojo button 控件没有被隐藏。

求解:如何的解决此问题:

 

html实现如下:

 

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Job Application Form</title>

<script type="text/javascript">
	var djConfig = {
		isDebug : true
	};
</script>
<script type="text/javascript" src="../../dojo.js"></script>
<script type="text/javascript">
	dojo.require("dojo.widget.*");
	dojo.require("dojo.event.*");
	dojo.require("dojo.xml.Parse");
	dojo.require("dojo.widget.Parse");
	var parser = new dojo.xml.Parse();

	dojo.addOnLoad( function() {

		var showCalcMethodbtn = dojo.widget.byId("showCalcMethodbtn");
		dojo.event.connect(showCalcMethodbtn, "onClick",
				showCalcMethodbtnPressed);

		var testbtn = dojo.widget.byId("testbtn");
		dojo.event.connect(testbtn, "onClick", testBtnPressed);
	});

	function testBtnPressed() {

		var str = "<div id=\"okbaba\"><input type=\"checkbox\" name=\"cb7\" id=\"cb7\" value=\"17\" dojoType=\"Checkbox\" /> BT4<br/>"
				+ "<input type=\"checkbox\" name=\"cb9\"  value=\"26\" dojoType=\"Checkbox\" /> BT5<br/></div>";

		var chtest = document.getElementById("chtest");

		chtest.innerHTML = str;
		var chtest1 = document.getElementById("cb3");

		var frag = parser.parseElement(chtest, null, true);
		dojo.widget.getParser().createComponents(frag);
		var test = dojo.widget.byId("cb7");
		test.setValue(true);
		dojo.attr(test, "aaa:checked", true);

	}

	function showCalcMethodbtnPressed() {
		var str = "<table border=\"1\" width=\"98%\" id=\"table10\" bgcolor=\"#CCFFFF\">"
				+ "<tr bgcolor=\"#66FFCC\"> <td width=\"139\"><p align=\"center\"><b>Calc Method</b></td>"
				+ "<td width=\"45\"><p align=\"center\"></td>"
				+ "<td><p align=\"center\"><b>Calc Field</b></td></tr>";
		for ( var i = 0; i < 10; i++) {
			str += "<tr id=\"showCalcFieldRow_"
					+ i
					+ "\"><td width=\"139\" id=\"showCalcMethodTD_"
					+ i
					+ "\" tittle="
					+ i
					+ ">"
					+ i
					+ "</td>"
					+ "<td width=\"45\"><button dojoType=\"Button\" widgetId=\"showCalcMethodbtn\" onClick=\"showCalcFieldbtnPressed("
					+ i
					+ ")\" >Create2</button></td>"
					+ "<td id=\"showCalcFieldTD_"
					+ i
					+ "\" ><option id=\"All\" value=\"All\">All</option></td></tr>";
		}
		str += "</table>";

		var test = document.getElementById("test");
			test.innerHTML = str;

		var frag = parser.parseElement(test, null, true);
		dojo.widget.getParser().createComponents(frag);

	}

	function showCalcFieldbtnPressed(value) {
		alert(value);

		var tt = dojo.widget.byId("showCalcMethodTD_" + value);
		alert(tt.tittle);

	}
</script>
<style type="text/css">
body {
	padding: 1em;
}

div .dojoButton {
	float: left;
	margin-left: 10px;
}
</style>
</head>

<body>
<h2 class="pageSubContentTitle">Job Application Form</h2>
<p>This is just a little demo of dojo's form widgets</p>
<form method="get" id="form1" action="">
<div class="formAnswer" id="D1"><input type="checkbox" name="cb1"
	id="cb1" value="1" dojoType="Checkbox" /> IT<br />
<input type="checkbox" name="cb2" id="cb2" value="1" dojoType="Checkbox" />Marketing<br />
<input type="checkbox" name="cb3" id="cb3" value="1" dojoType="Checkbox"
	checked /> <label for="cb3">Business</label><br />


<input type="checkbox" name="cb8" id="cb8" value="1" dojoType="Checkbox" />
<label for="cb37">Business2</label><br />
<input type="checkbox" name="cb4" id="cb4" value="1" checked="true" />
<button dojoType="Button" widgetId="showCalcMethodbtn">Create</button>
<button dojoType="Button" widgetId="testbtn">Test</button>
</div>
<div id="chtest"></div>
<div id="test"
	style="overflow-y: scroll; height: 120px; bgcolor: #CCFFFF"></div>

</form>
</body>
</html>

 

 

 

加载中
0
我是潮汐
我是潮汐

dojo都1.6.1了  你还是直接放弃了吧..

而且dojo0.4的代码结构跟现在的有天翻地覆之变化,而且0.4的文档估计都是文物级的..

关于你的问题.如果我没记错的话.好像是有个属性 强制将内容在一行输出,然后设定固定宽度 就可以达到你要的效果了.

保罗的寓言
保罗的寓言
找不到相关的文档,官方link也被废弃了, 我做了相关的实验,如果没有img属性的dojo空间,是可以随着外层的div css进行显示,唯有一些类似于button,checkbox组件,dojo使用img进行显示,不过还是谢谢提供的相关信息。
0
保罗的寓言
保罗的寓言
使用dojo0.4的朋友,可以直接将本html放入到你的dojo src中widget中查看此类问题。
0
我是潮汐
我是潮汐

另外哦~欢迎你加入dojo在中国的大家庭 dojocn.org  我们热爱dojo并致力于dojo在中国的推广.

论坛实行邀请注册,有意的话 一起来吧..

http://www.dojocn.org/home.php?mod=invite&u=5&c=4bfdc4ccc943e7d2

返回顶部
顶部