dhtmlxlayout隐藏、显示、设置标题

首先先看下效果图:

下面是源码:

<!DOCTYPE html>
<html>
<head>
	<title>Cells header manipulations</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
	<script src="../../../codebase/dhtmlx.js"></script>
	<style>
		div#layoutObj {
			position: relative;
			margin-top: 20px;
			margin-left: 20px;
			width: 600px;
			height: 400px;
		}
	</style>
	<script>
		var myLayout;
		var sel;
		function doOnLoad() {
			myLayout = new dhtmlXLayoutObject({
				parent: "layoutObj",
				pattern: "3L"
			});
			myLayout.cells("b").attachObject("objId");
			sel = document.getElementById("sel");
			myLayout.forEachItem(function(item){sel.options.add(new Option(item.getId(),item.getId()));});
		}
		function getId() {
			var sel = document.getElementById("sel");
			var id = sel.options[sel.selectedIndex].value;
			return id;
		}
		function setText() {
			myLayout.cells(getId()).setText(document.getElementById("txt").value);
		}
		function isVisible() {
			alert(myLayout.cells(getId()).isHeaderVisible());
		}
		function hidePanel() {
			myLayout.cells(getId()).hideHeader();
		}
		function showPanel() {
			myLayout.cells(getId()).showHeader();
		}
	</script>
</head>
<body οnlοad="doOnLoad();">
	<div id="layoutObj"></div>
	<div style="position: relative; margin-top: 40px; margin-left: 20px;">
		Item: <select id="sel"></select>
		<input type="button" value="Show Header" οnclick="showPanel();">
		<input type="button" value="Hide Header" οnclick="hidePanel();">
		<input type="button" value="Is Header Visible?" οnclick="isVisible();">
		<input id="txt" type="text" value="New Text">
		<input type="button" value="Set Text" οnclick="setText();">
	</div>
	<div id="objId" style="width: 100%; height: 100%; overflow: auto; display: none; font-family: Tahoma; font-size: 11px;">
		<div style="margin: 3px 5px 3px 5px;">
		King Arthur is a 2004 film directed by Antoine Fuqua and written by David Franzoni. It stars Clive Owen as the title character.
		<br><br>
		The makers of the film claim to present a historically accurate version[1] of the Arthurian legends, supposedly inspired by new archaeological findings. The accuracy of these claims is subject to debate, but the film is unusual in representing Arthur as a Roman soldier rather than a medieval knight.
		<br><br>
		Arthur, also known as Artorius Castus (Clive Owen), is portrayed as a Roman cavalry officer and commander, the son of a Roman father and a Celtic mother, who leads a military force of Sarmatian cavalry in Britain at the close of the Roman occupation in 467 A.D. He and his men guard Hadrian's Wall against the Woads, a Celtic people who resist Roman rule, based on the historical Picts,[2] led by their mysterious leader Merlin. He is not the first Arthur - over the years, many of his ancestors have manned the Wall, leading Sarmatian auxiliaries.
		<br><br>
		As the film starts, Arthur and his remaining men Lancelot (whose voiceover is heard at the beginning and end), Bors, Tristan, Gawain, Galahad and Dagonet - are expecting discharge from the service of the Empire after faithfully serving for 15 years (Lancelot's entry into service as a youth in 452 A.D. is depicted at the very beginning of the film). However, they are dispatched on a final and possibly suicidal mission by Bishop Germanius of Auxerre in the freezing winter to rescue an important Roman family, which includes the Pope's godson, from impending capture by the invading Saxons, who are led by their chief Cerdic and his son Cynric. The knights are charged with this rescue because Rome is retiring from Britain, now considered an indefensible outpost.
		<br><br>
		In the course of this mission, Arthur encounters and rescues a Woad princess, Guinevere (Keira Knightley), from the imprisonment and torture by the Roman citizen he is charged with rescuing. Guinevere reveals that she is the daughter of Merlin, and Arthur himself is revealed to be half Celt (on his mother's side). His famous sword, Excalibur, is also shown to be his father's, which he drew from the tombstone on Pendragon's burial mound as a boy (inspiring the legend of the Sword in the Stone) in an effort to rescue his mother who died during a Woad attack.
		<br><br>
		The Roman family is rescued, but the party soon encounter the Saxons at an ice-covered lake. Though greatly outnumbered, Arthur, Guinevere and the knights manage to repel them (by getting the ice to break, drowning many) at the cost of Dagonet's life.
		<br><br>
		Struck by Rome leaving its subjects to the mercy of the Saxons, Arthur is further disillusioned when he learns that Bishop Pelagius, whose teachings about the equality of all men inspired the brotherhood of his Round Table has been executed as a heretic by order of Bishop Germanius himself.
		<br><br>
		In due course, Arthur and his remaining men forsake Roman citizenship and form an alliance with the Woads to fight the Saxons. In the climactic battle, the Battle of Badon Hill, the Saxons are defeated and Cerdic and his son are killed at the cost of many lives, including Lancelot's and Tristan's.
		<br><br>
		The film ends with Arthur and Guinevere's marriage. Merlin then proclaims him to be their king. King Arthur and his remaining knights promise to lead the Britons, now united after the Romans leave, against future invaders. The last scene shows Lancelot, Dagonet and Tristan roaming the lands freely as reincarnated horses as told in a legend by Lancelot's father.
		</div>
	</div>
</body>
</html>

 

转载于:https://www.cnblogs.com/streamice/p/DhtmlxlayoutHeader.html

dhtmlXTree进行一个小的扩展 需求1: 动态生成树形菜单,每个节点都有各自的URL地址,单击不同的节点框架页的右侧跳转到该节点所对应的URL。(框架页说明:左边是树形菜单;右边是显示页面相应信息的页面) 分析: dhtmlXTree提供了很好的添加,删除节点的方法,故选择dhtmlXTree。 但是dhtmlXTree不能满足"每个节点都有各自的URL地址,单击不同的节点框架页的右侧跳转到该节点所对应的URL"这点需求,因次想到了对dhtmlXTree进行一个小的扩展,即在其节点对象原有属性的基础上,再添加两个扩展属性。具体操作如下: 1、找到定义节点对象的那个函数(或方法) function dhtmlXTreeItemObject(itemId,itemText,parentObject,treeObject,actionHandler,mode) 修改为 function dhtmlXTreeItemObject(itemId,itemText,parentObject,treeObject,actionHandler,mode,url,target) 并在方法体中添加赋值语句:this.itemURL=url;this.itemTarget=target; 2、然后修改所有与dhtmlXTreeItemObject有关(直接或者间接相关)的方法: _attachChildNode,insertNewItem,insertNewChild,insertNewNext,_recreateBranch,_parseXMLTree 注:_parseXMLTree方法是与loadXML,loadXMLString相关的。 在这些方法中生成节点的语句中添加相应的参数和语句,以支持新添加的属性itemURL,itemTarget。 需求2: 为dhtmlXTree树上的每一个节点添加右键菜单。附:在树上的节点上点右键时才会生成菜单,空白区域单击时不会生成菜单。 分析: 1、用 dhtmlXTree + dhtmlxmenu 实现。 2、 用dhtmlxmenu生成菜单的部分代码: var menu = new dhtmlXMenuObject(); menu.setImagePath("imgs/"); menu.setIconsPath("images/"); menu.renderAsContextMenu(); menu.loadXML("dhtmlxmenu.xml?e="+new Date().getTime()); menu.addContextZone("treeboxbox_tree"); menu.addContextZone方法是为了把菜单添加到指定区域。 3、dhtmlXTreeObject.prototype._createItem方法是构造树形菜单上元素的具体实现方法。看这个方法的具体操作,可以发现它为每一个节点构建了一个table,节点的内容(即名字)放置在一个span中。 4、考虑到dhtmlxmenu实在指定的区域构建菜单,所以可以为dhtmlXTree树上的每一个节点添加右键事件,在这个右键事件里获得该节点对象所对应的区域,然后在这个区域内构建Menu菜单。 难点和解决方案: 1、怎样获得dhtmlXTree树上的每一个节点对象所对应的区域?(dhtmlXTreeObject.prototype._createItem方法没有为这个节点的span设置id) 解决方法: 在dhtmlXTreeObject.prototype._createItem方法中添加一个为span设置id的语句: 即: 在itemObject.span=document.createElement('span'); itemObject.span.className="standartTreeRow"; 后,新添加一句 itemObject.span.id="treeNode_"+itemObject.id;//为这个span新增一个Id属性 2、为dhtmlXTree树上的每一个节点添加右键事件,在这个右键事件里获得该节点对象所对应的区域,然后在这个区域内构建Menu菜单。 解决方法: a、为dhtmlXTree树上的每一个节点添加右键事件: tree.setOnRightClickHandler(treeOnRegihtClick);//右键事件 b、构建Menu菜单: var menu = new dhtmlXMenuObject(); function treeOnRegihtClick(id){ alert("右键 "+" span.id:"+tree.getItem(id).span.id); menu.setImagePath("imgs/"); menu.setIconsPath("images/"); menu.renderAsContextMenu(); menu.loadXML("dhtmlxmenu.xml?e="+new Date().getTime()); menu.addContextZone(tree.getItem(id).span.id);alert("width:"+tree.getItem(id).span.clientWidth); //var X=tree.getItem(id).span.getBoundingClientRect().left; //var Y=tree.getItem(id).span.getBoundingClientRect().top; var X=document.getElementById('mouseXPosition').value;//获得鼠标的横坐标位置 var Y=document.getElementById('mouseYPosition').value;//获得鼠标的纵坐标位置 menu.showContextMenu(X,Y);//调用showContextMenu方法显示菜单 说明:如果这儿不加上这条语句的话,第一次点击右键时只能生成菜单,但是显示不出菜单,下次点击右键Menu菜单才能弹出。 //menu._showContextMenu(X,Y,tree.getItem(id).span.id); } c、用 javascript 获取当页面上鼠标(光标)位置 <script type="text/javascript"> // 说明:获取鼠标位置 function mousePosition(ev){ if(ev.pageX || ev.pageY){ return {x:ev.pageX, y:ev.pageY}; } return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, y:ev.clientY + document.body.scrollTop - document.body.clientTop }; } document.onmousemove = mouseMove; function mouseMove(ev){ ev = ev || window.event; var mousePos = mousePosition(ev); document.getElementById('mouseXPosition').value = mousePos.x; document.getElementById('mouseYPosition').value = mousePos.y; } </script> 页面上放置两个隐藏域存放鼠标的位置:<input type="hidden" id=mouseXPosition><input type="hidden" id=mouseYPosition>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值