jQuery多级下拉选中树形菜单特效代码下载



14 54 19



特效描述:多级下拉选中 树形菜单,jQuery多级下拉选中树形菜单特效代码下载

代码结构

1. 引入JS

<script type="text/javascript" src="dtree.js"></script>
<script src="jquery.min.js"></script>

2. HTML代码

<div class="dtree" id="dtree_div">
	<p><a href="javascript:  d.closeAll();">打开</a> | <a href="javascript: d.openAll();">关闭</a></p>
	<input id="dosearch_text" type="text" />
	<input id="dosearch" type="button" value="查询" onClick="nodeSearching() " />
	<script type="text/javascript">
		d = new dTree('d', true);   //参数一: 树名称。参数二:单选多选 true多选  false单选  默认单选               
		d.add(0, -1, '权限管理');
		d.add(1, 0, 'authority', '0001', '日常工作', true, false);
		d.add(2, 1, 'authority', '0002', '新建工作', true, false);
		d.add(3, 2, 'authority', '0003', '人事 ', true, false);
		d.add(4, 2, 'authority', '0004', '财务', false, false);
		d.add(5, 2, 'authority', '0005', '客服', false, false);
		d.add(15, 3, 'authority', '0006', '请假申请', false, false);
		d.add(16, 3, 'authority', '0007', '出差申请', false, false);
		d.add(17, 3, 'authority', '0008', '招聘申请', false, false);
		// dTree实例属性以此为:  节点ID,父类ID,chechbox的名称,chechbox的值,chechbox的显示名称,
		//chechbox是否被选中--默认是不选,chechbox是否可用:默认是可用,节点链接:默认是虚链接
		d.add(6, 0, 'authority', '0012', '一级菜单2 ', true, false);
		d.add(7, 6, 'authority', '0013', '二级菜单2 ', true, false);
		d.add(8, 7, 'authority', '0014', '用户管理 ', false, false);
		d.add(9, 7, 'authority', '0015', '用户组管理 ', false, false);
		d.add(11, 0, 'authority', '0016', '一级菜单3 ', true, false);
		d.add(12, 11, 'authority', '0017', '二级菜单3 ', true, false);
		d.add(13, 12, 'authority', '0018', '用户管理 ', false, false);
		d.add(14, 12, 'authority', '0019', '用户组管理 ', false, false);
		d.add(20, 0, 'authority', '0020', '测试', true, false);
		document.write(d);
		d.openAll();
	</script>
</div>
<div class="selectorResult">
	选择结果:
	<ul id="ulSelected">
		<!--<li id="user_2_1" uid="1" name="姓名" mytype="2">
			<div class="selectedUser" onmouseover="showRemove(this)" onmouseout="hideRemove(this)" onmousemove="setRemove(this,event)" onclick="doRemove(this,event);" style="cursor: pointer;">
				姓名
			</div>
		</li>-->
	</ul>
</div>   
<!--<div>
	<input type='button' name='bTest' value='test' onclick='test();'>
</div>-->
<script type="text/javascript">
function test() {
	var count = 0;
	var obj = document.all.authority;
	for (i = 0; i < obj.length; i++) {
		if (obj[i].checked) {
			alert(obj[i].value);
			count++;
		}
	}
}
//搜索节点并展开节点
function nodeSearching() {
	var dosearch = $.trim($("#dosearch_text").val());//获取要查询的文字
	var dtree_div = $("#dtree_div").find(".dtree_node").show().filter(":contains('" + dosearch + "')");//获取所有包含文本的节点
	$.each(dtree_div, function (index, element) {
		var s = $(element).attr("node_id");
		d.openTo(s);//根据id打开节点
	});
}
</script>
<script type="text/javascript">
//#region 页面执行入口
$(document).ready(function () {
	//#region 浏览器检测相关方法
	window["MzBrowser"] = {}; (function () {
		if (MzBrowser.platform) return;
		var ua = window.navigator.userAgent;
		MzBrowser.platform = window.navigator.platform;
		MzBrowser.firefox = ua.indexOf("Firefox") > 0;
		MzBrowser.opera = typeof (window.opera) == "object";
		MzBrowser.ie = !MzBrowser.opera && ua.indexOf("MSIE") > 0;
		MzBrowser.mozilla = window.navigator.product == "Gecko";
		MzBrowser.netscape = window.navigator.vendor == "Netscape";
		MzBrowser.safari = ua.indexOf("Safari") > -1;
		if (MzBrowser.firefox) var re = /Firefox(\s|\/)(\d+(\.\d+)?)/;
		else if (MzBrowser.ie) var re = /MSIE( )(\d+(\.\d+)?)/;
		else if (MzBrowser.opera) var re = /Opera(\s|\/)(\d+(\.\d+)?)/;
		else if (MzBrowser.netscape) var re = /Netscape(\s|\/)(\d+(\.\d+)?)/;
		else if (MzBrowser.safari) var re = /Version(\/)(\d+(\.\d+)?)/;
		else if (MzBrowser.mozilla) var re = /rv(\:)(\d+(\.\d+)?)/;
		if ("undefined" != typeof (re) && re.test(ua))
			MzBrowser.version = parseFloat(RegExp.$2);
	})();
});
//显示删除
function showRemove(obj) {
	$(obj).addClass("remove");
}
//隐藏删除
function hideRemove(obj) {
	$(obj).removeClass("remove");
}
//鼠标移动到删除图标,显示手(pointer)
function setRemove(obj, event) {
	var width = $(obj).width();
	var left = $(obj).position().left;
	var e = event || window.event;
	var x = IsIE(GetVersion()) ? e.x : e.pageX;
	if (x > left + width - 9) {
		$(obj).css("cursor", "pointer")
	} else {
		$(obj).css("cursor", "default")
	}
}
function GetVersion() { return MzBrowser.version; }
function GetName() {
	var name = "undefined";
	if (MzBrowser.ie) { name = "ie"; }
	else if (MzBrowser.firefox) { name = "firefox"; }
	else if (MzBrowser.safari) { name = "safari"; }
	return name;
}
function IsIE(versionValue) {
	if (versionValue == 11) {
		return IsIE11();
	}
	var name = GetName();
	var version = GetVersion();
	return name == 'ie' && parseInt(version) == versionValue;
}   
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 收缩收起展开 切换按钮 form表单 导航菜单导航条 收缩导航菜单 文本框 树形导航菜单 搜索框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到