`

JS组件--Menu

阅读更多
function Menu() {
	this.bars = [];
}
Menu.prototype.add = function (title, icon) {
	var bar = new Bar(title, icon);
	this.bars.push(bar);
	return bar;
};
Menu.prototype.render = function () {
	var container = document.body;
	var tbarH = bbarH = 30;
	var len = this.bars.length;
	if (arguments[0]) {
		container = document.getElementById(arguments[0]);
		container.style.borderStyle = "solid";
		container.style.borderColor = "#69c";
		container.style.borderWidth = 1;
	}
	var tbar = document.createElement("div");
	var title = document.createTextNode("\u5bfc\u822a\u83dc\u5355");
	tbar.style.height = tbarH;
	tbar.style.background = "#3586BD url(images/bar.png) repeat-x";
	tbar.style.color = "white";
	tbar.style.fontFamily = "\u9ed1\u4f53";
	tbar.style.fontSize = 16;
	tbar.style.borderStyle = "solid";
	tbar.style.borderColor = "#ccc";
	tbar.style.borderWidth = "1px 1px 1px 1px";
	tbar.style.lineHeight = 1.8;
	tbar.appendChild(title);
	container.appendChild(tbar);
	for (var k = 0; k < this.bars.length; k++) {
		var bar = document.createElement("div");
		bar.setAttribute("id", "bar" + k);
		bar.style.height = 25;
		bar.style.background = "#3586BD url(images/titlebg1.gif) repeat-x";
		bar.style.color = "white";
		bar.style.margin = 0;
		bar.style.cursor = "pointer";
		bar.style.fontFamily = "\u9ed1\u4f53";
		bar.style.fontSize = 14;
		bar.style.textAlign = "center";
		bar.style.lineHeight = 1.8;
		bar.style.borderStyle = "solid";
		bar.style.borderColor = "#ccc";
		bar.style.borderWidth = "0 1px 1px 1px";
		bar.innerHTML = this.bars[k].title;
		var barBox = document.createElement("div");
		barBox.setAttribute("id", "barBox" + k);
		//barBox.style.backgroundColor = "lightyellow";
		barBox.style.fontSize = 12;
		barBox.style.margin = 0;
		barBox.style.textAlign = "center";
		//barBox.style.overflowY = "scroll";
		for (var i = 0; i < this.bars[k].items.length; i++) {
			/**var icon = document.createElement("image");
			icon.src = this.bars[k].items[i].icon;
			icon.setAttribute("valign","top");
			barBox.appendChild(icon);
			var item = document.createElement("li");
			item.style.listStyle = "none";
			item.style.lineHeight = 1.5;**/
			/**var a = document.createElement("a");
			a.href = this.bars[k].items[i].href;
			a.target = this.bars[k].items[i].target;
			a.innerHTML = this.bars[k].items[i].title;
			a.style.textDecoration = "none";
			a.style.background = "url(images/" + this.bars[k].items[i].icon + ") no-repeat top";
			a.style.paddingTop = 35;
			a.style.lineHeight = 1.5;
			a.style.color = "#810081";
			a.style.display = "block";**/
			var a = document.createElement("div");
			a.setAttribute("url", this.bars[k].items[i].href);
			a.innerHTML = this.bars[k].items[i].title;
			a.style.lineHeight = 2;
			a.attachEvent("onclick", function () {
				var sender = window.event.srcElement;
				//ff(sender.innerHTML,sender.getAttribute('url'));
			});
			barBox.appendChild(a);
		}
		if (k == 0) {
			barBox.style.display = "block";
			barBox.style.height = parseInt(container.style.height) - len * 26 - 60;
		} else {
			barBox.style.display = "none";
		}
		container.appendChild(bar);
		container.appendChild(barBox);
	}
	for (var k = 0; k < len; k++) {
		var barx = document.getElementById("bar" + k);
		barx.attachEvent("onclick", function () {
			var sender = window.event.srcElement;
			for (var m = 0; m < len; m++) {
				var box = document.getElementById("barBox" + m);
				if (sender.id.substring(3) == m) {
					box.style.display = "block";
					box.style.height = parseInt(container.style.height) - len * 26 - 60;
				} else {
					box.style.display = "none";
					box.style.height = 0;
				}
			}
		});
	}
	var bbar = document.createElement("div");
	bbar.style.height = bbarH;
	bbar.style.background = "#3586BD url(images/bar.png) repeat-x";
	bbar.style.color = "white";
	bbar.style.borderStyle = "solid";
	bbar.style.borderColor = "#ccc";
	bbar.style.borderWidth = "1px 1px 1px 1px";
	container.appendChild(bbar);
};
function Bar(title, icon) {
	this.title = title;
	this.icon = icon;
	this.items = [];
}
function Item(title, icon, href) {
	this.title = title;
	this.icon = icon;
	this.href = href;
	this.target = "rightFrm";
}
Bar.prototype.add = function (title, icon, href) {
	this.items.push(new Item(title, icon, href));
};

   

    接下来看一个例子:

<html> 
	<head> 
		<script type="text/javascript" src="menu.js"></script> 
	</head> 
	<body>
		<div id="left" style="width:180px;height:600"></div>
		<script type="text/javascript"> 
			var menu = new Menu();
	    		var bar1 = menu.add('菜单一','aaa');
            			bar1.add('asd','asd',"asda");
	    		bar1.add('asd','asd',"asda");
 	    		var bar2 = menu.add('菜单二','aaa');
            			bar2.add('asd','asd',"asda");
	    		bar2.add('asd','asd',"asda");
 	    		var bar3 = menu.add('菜单三','aaa');
            			bar3.add('asd','asd',"asda");
	    		bar3.add('asd','asd',"asda");
	    		menu.render('left');
        		</script> 
	</body> 
</html> 

 
 

 

  • 大小: 9.6 KB
分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    element 中 el-menu 组件的无限极循环思路代码详解

    &lt;el-menu-item index="menu.path"&gt; {{ menu.name }} &lt;recursive-menu v-if="menu.childList && menu.childList.length" :menu="menu.childList" /&gt; &lt;/el-menu-item&gt; ` }); ``` 在这个组件中,`menu` 属性接收...

    vue-context-menu-vue js的上下文菜单组件。-Vue.js开发

    在压缩包`vue-context-menu-master`中,通常会包含源代码、示例项目、README文件和可能的测试用例。你可以通过查看这些文件来了解组件的工作原理,或者直接在本地运行示例项目以进行调试和学习。 总的来说,`vue-...

    后台模板HTML+整套Easyui皮肤组件-后台管理系统模板

    EasyUI是一个基于JavaScript和jQuery的前端框架,它提供了丰富的UI组件,如表格、下拉菜单、对话框、表单等,这些组件具有响应式设计,可以在不同的设备上提供一致的用户体验。EasyUI的核心优势在于其简洁的API和...

    javascript-tree-menu-dTree

    【javascript-tree-menu-dTree】是一种基于JavaScript实现的树形菜单组件,主要用于网页中构建层级结构的导航菜单。这个组件能够帮助用户以清晰、交互性强的方式展示数据的层次关系,广泛应用于网站的侧边栏导航、...

    javascript-tree-menu

    JavaScript Tree Menu是一种常见的网页交互元素,它用于在网站上创建可折叠、层次分明的菜单结构。这个技术基于JavaScript,一种广泛使用的客户端脚本语言,它允许动态地更新和操作HTML内容,提供更丰富的用户交互...

    深入理解使用Vue实现Context-Menu的思考与总结

    在Web开发中,我们常常通过JavaScript来实现这一功能,而在Vue.js框架中,我们可以通过组件化的思想来简化这个过程。 首先,从描述中可以提取出实现上下文菜单的关键步骤: 1. 显示和隐藏上下文菜单。 2. 处理用户...

    js_menu.rar_MENU._javascript_js_menu-collapsed.js_menu_front.

    在这个场景中,我们关注的是一个名为"js_menu.rar_MENU._javascript_js_menu-collapsed.js_menu_front."的压缩包,它涉及到一个JavaScript实现的多级导航菜单。这个菜单可能是一个网页应用的核心组成部分,因为它...

    小程序-dropdownmenu

    在微信小程序的开发中,`dropdownmenu`是一个非常实用的组件,它用于实现下拉菜单功能,能够为用户提供丰富的交互体验。本篇文章将深入探讨如何在小程序中使用`dropdownmenu`,并分享相关的开发技巧。 首先,我们来...

    vue-sidebar-menu:Vue.js侧边栏菜单组件

    Vue.js侧边栏菜单组件 演示版 本文档适用于Vue 2,对于Vue 3,您可以尝试预发行版,请参见 安装 npm i vue-sidebar-menu --save 全局安装插件。 //main.js import Vue from 'vue' import VueSidebarMenu from 'vue...

    前端项目-country-region-dropdown-menu.zip

    在"country-region-dropdown-menu-master"这个文件夹中,我们可能会找到以下文件: - HTML文件(如`index.html`):包含项目的基本结构和样式。 - JavaScript文件(如`script.js`):实现项目逻辑。 - CSS文件(如`...

    vue-dropdown-menu-Vue的下拉菜单组件。 任何元素都可以是下拉触发器,任何内容都可以下拉内容。-Vue.js开发

    安装npm i @ innologica / vue-dropdown-menu-保存或毛线添加@ innologica / vue-dropdown-menu import可以使用:import来自'@ innologica / vue-dropdown-menu'演示的DropdownMenu演示演示和文档位于...

    react-horizontal-scrolling-menu:React的水平滚动菜单组件

    React水平滚动菜单 请帮助我测试&lt;--- 这是React的水平滚动菜单组件。 菜单组件具有自适应宽度,只需为父容器设置...import ScrollMenu from 'react-horizontal-scrolling-menu' ; import './App.css' ; // list o

    bootstrap-js-context-menu.zip

    Bootstrap JS Context Menu是一款基于Bootstrap框架和JavaScript实现的右键菜单插件。这个压缩包`bootstrap-js-context-menu.zip`(注意,文件名中的`.zip`在实际列表中被误写为`.rar`)提供了用于增强网页交互体验...

    react-reactburgermenu一个侧边栏组件

    在`negomi-react-burger-menu-1f7823e`这个压缩包中,包含了`react-burger-menu`的源代码,你可以深入研究其内部实现,学习如何利用JavaScript、CSS和HTML来构建动态交互的组件。通过查看源码,你还可以了解到如何...

    vaadin-menu-bar:Web组件,用于显示带有多级子菜单的水平菜单

    import '@vaadin/vaadin-menu-bar/vaadin-menu-bar.js' ; 入门 Vaadin组件默认使用Lumo主题。 要使用Material主题,请从theme/material文件夹导入对应的文件。 入口点 具有Lumo主题的组件: theme/lumo/vaadin-...

    小程序-dropdownmenu 下拉菜单

    dropdownmenu一个写好的微信小程序帅选条件框,多条件筛选,下拉菜单,直接引用组件就可以 读懂并灵活运用必须具有html,css ,js基础,除此之外还必须阅读小程序官方文档对组件的封装与使用相关文档

    前端工程师-html模板组件-顶部导顶部导航菜单-带图标.zip

    通过选择器,如`.navbar`、`.menu-item`等,我们可以精准地定位到导航菜单的各个部分,进行定制化设计。例如,可以设置背景色、文字颜色、边框样式,以及鼠标悬停时的变换效果。同时,利用Flexbox或Grid布局,可以...

    vue-simple-context-menu::pushpin: 为 Vue 构建的简单上下文菜单组件。 适用于左键和右键单击。 没什么太花哨的,只是有效且易于使用

    script src =" https://unpkg.com/vue-simple-context-menu/dist/vue-simple-context-menu.min.js " &gt; &lt;/ script &gt;&lt; link rel =" stylesheet " type =" text/css " href =" ...

    wc-menu-wrapper:一个Web组件,用于包装HTML元素并从中形成下拉菜单

    现场演示产品特点Wc-menu-wrapper是一个不使用影子DOM的独立香草JS Web组件。 组件功能包括: 内容不可知:菜单项应能够包含任何HTML 可嵌套的:允许创建通用的菜单子菜单结构菜单“放下”方向:向下或向右初始菜单...

    vue-file-toolbar-menu:Vue应用程序的UI文件工具栏菜单

    为菜单和按钮添加自己的自定义组件 使用标准的 热键支持 兼容触摸设备 轻松的多语言实施( ) :speech_balloon: 如果您打算构建文档编辑器,还请签出 安装 在您的Vue.js项目中: npm install vue-file-toolbar-...

Global site tag (gtag.js) - Google Analytics