dhtmlx menus



dhtmlx   attachEvent("onClick",openlink) function  ,  add new Attribute to a dom 




<?php
$userinfo = json_decode(VSession::get("user_info"), true);
Yii::app()->params['username'] = $userinfo['name']; // set name to yii global variables
?>


<style  type='text/css'>
.group_label{
    clear: both;
    display: block;
    font-weight: normal;
    line-height: 20px;
    padding: 3px 10px;
    white-space: nowrap;
    font-weight:bold;
}
</style>
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <img src="<?php echo $baseUrl; ?>/img/global_advantest_logo.gif"  class="brand pull-left" alt="Advantest" >
            <div id="nav_menu_id" class="nav-collapse" style="float: left; margin-left: 150px;">
                <?php

                /**
                 * author cherry
                 * desc get all menus from database.
                 * date : 2013/13/06
                 */
                function getMenus() {
		    $menu=array();
                    $sql = "SELECT auto_id as id,label,link,parent,roles FROM etlt_Menus";
                    $conn = Yii::app()->db;
                    $rows = $conn->createCommand($sql)->queryAll();
                    //Yii::app()->params['cmenus'] = $rows;
                	




			}

                function getMenuParent($id) {
                    $cmenus = Yii::app()->params['cmenus'];
                    $parent_menus = array();
                    foreach ($cmenus as $key => $v) {
                        if ($v["parent"] == $id) {
                            $parent_menus[] = $v;
                        }
                    }
                    return $parent_menus;
                }

                /**
                 *
                 * dynamic build menus
                 * @param <type> $menuId
                 * @param <type> $order
                 * @return string
                 */
                function buildMenu($menuId, $order) {
                    $menus = getMenuParent($menuId);
                    $order++;
                    $html = "";
                    if ($menus) {
                        if ($order == 1) {
                            $html .="<ul id='yw0' class='pull-right nav' style='float: left;'>";
                        } else {
                            $html .="<ul class='dropdown-menu'>";
                        }
                        $role = json_decode(VSession::get("user_info"),TRUE);
                        foreach ($menus as $menu) {
                            if ($menu["roles"]=="*" || stripos($menu["roles"],$role["type"])!==false) {
                                if ($menu["link"] == "#") {
                                    $html.="<li class='dropdown item-test' tabindex='-1' >";
                                    $html.="<a href='#'  data-toggle='dropdown' class='dropdown-toggle'>" . $menu["label"] . "<span class='caret'></span></a>";
                                } else {
                                    $html.="<li class='item-test'>";
                                    $m_label = preg_replace("/(\(user\))/i", "(" . Yii::app()->params['username'] . ")", $menu["label"]);
                                    if ($menu["link"] != "") {
                                        $m_link = Yii::app()->createUrl($menu["link"]);
                                        $html.="<a href='" . $m_link . "'>" . $m_label . "</a>";
                                    } else {
                                        $html.= "<label class='group_label'>".$m_label."</label>";
                                    }
                                }
                                $html.= buildMenu($menu['id'], $order);
                                $html.="</li>";
                            }
                        }

                        $html.="</ul>";
                    }
                    return $html;
                }

                //getMenus();
                //echo buildMenu(0, 0);
		function getparentmenu(){
			/*
			author : mort 
			*/
                    $sql = "SELECT auto_id as id,label,link,parent,roles FROM etlt_Menus WHERE parent=0";
                    $conn = Yii::app()->db;
                    $rows = $conn->createCommand($sql)->queryAll();
		    return $rows;

			}
		function getsubmenubyid($id){

                    $sql = "SELECT auto_id as id,label,link,parent,roles FROM etlt_Menus WHERE parent="."'".$id."'";
                    $conn = Yii::app()->db;
                    $rows = $conn->createCommand($sql)->queryAll();
		    return $rows;
				}

                ?>
            </div>
        </div><!-- container -->
    </div><!-- navbar-inner -->
</div><!-- subnav -->

<div id="menuData" style="display:none"> 
	
<?php $parentmenu=getparentmenu();  

		foreach($parentmenu as $k => $v){

			$html.='<div id='.'"'.$v['id'].'"'.' text='.'"'.$v['label'].'"'.'link='.'"'.$v['link'].'"'.'>';
			$submenus_by_id=getsubmenubyid($v["id"]); 
			foreach($submenus_by_id as $s_k=>$s_v){
				
			$html.='<div id='.'"'.$s_v["id"].'"'.' text='.'"'.$s_v["label"].'"'.'link='.'"'.$s_v['link'].'"'.'></div>';

				}

			$html.="</div>";

					}


			echo $html;
?>
</div>
<div style="display:none">

<?php  echo $html;?>

</div>


<script>
	document.getElementByTagName("div").setAttribute("link");
	var nav_Menu;

	function initMenu(){
		nav_Menu=new 	dhtmlXMenuObject("nav_menu_id");
		nav_Menu.setIconsPath("../../img/icons");
		nav_Menu.loadFromHTML("menuData",true);
		nav_Menu.attachEvent("onClick",openlink);
		}

	function openlink(id){
		var menu_clicked_href=document.getElementById(id).attributes["link"].value;
		window.location.href="<?php echo Yii::app()->request->baseUrl;?>"+"/"+menu_clicked_href;
			}
	

</script>

<script>
initMenu();

</script>


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、付费专栏及课程。

余额充值