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
分享到:
相关推荐
<el-menu-item index="menu.path"> {{ menu.name }} <recursive-menu v-if="menu.childList && menu.childList.length" :menu="menu.childList" /> </el-menu-item> ` }); ``` 在这个组件中,`menu` 属性接收...
在压缩包`vue-context-menu-master`中,通常会包含源代码、示例项目、README文件和可能的测试用例。你可以通过查看这些文件来了解组件的工作原理,或者直接在本地运行示例项目以进行调试和学习。 总的来说,`vue-...
EasyUI是一个基于JavaScript和jQuery的前端框架,它提供了丰富的UI组件,如表格、下拉菜单、对话框、表单等,这些组件具有响应式设计,可以在不同的设备上提供一致的用户体验。EasyUI的核心优势在于其简洁的API和...
【javascript-tree-menu-dTree】是一种基于JavaScript实现的树形菜单组件,主要用于网页中构建层级结构的导航菜单。这个组件能够帮助用户以清晰、交互性强的方式展示数据的层次关系,广泛应用于网站的侧边栏导航、...
JavaScript Tree Menu是一种常见的网页交互元素,它用于在网站上创建可折叠、层次分明的菜单结构。这个技术基于JavaScript,一种广泛使用的客户端脚本语言,它允许动态地更新和操作HTML内容,提供更丰富的用户交互...
在Web开发中,我们常常通过JavaScript来实现这一功能,而在Vue.js框架中,我们可以通过组件化的思想来简化这个过程。 首先,从描述中可以提取出实现上下文菜单的关键步骤: 1. 显示和隐藏上下文菜单。 2. 处理用户...
在这个场景中,我们关注的是一个名为"js_menu.rar_MENU._javascript_js_menu-collapsed.js_menu_front."的压缩包,它涉及到一个JavaScript实现的多级导航菜单。这个菜单可能是一个网页应用的核心组成部分,因为它...
Vue.js侧边栏菜单组件 演示版 本文档适用于Vue 2,对于Vue 3,您可以尝试预发行版,请参见 安装 npm i vue-sidebar-menu --save 全局安装插件。 //main.js import Vue from 'vue' import VueSidebarMenu from 'vue...
在微信小程序的开发中,`dropdownmenu`是一个非常实用的组件,它用于实现下拉菜单功能,能够为用户提供丰富的交互体验。本篇文章将深入探讨如何在小程序中使用`dropdownmenu`,并分享相关的开发技巧。 首先,我们来...
在"country-region-dropdown-menu-master"这个文件夹中,我们可能会找到以下文件: - HTML文件(如`index.html`):包含项目的基本结构和样式。 - JavaScript文件(如`script.js`):实现项目逻辑。 - CSS文件(如`...
安装npm i @ innologica / vue-dropdown-menu-保存或毛线添加@ innologica / vue-dropdown-menu import可以使用:import来自'@ innologica / vue-dropdown-menu'演示的DropdownMenu演示演示和文档位于...
React水平滚动菜单 请帮助我测试<--- 这是React的水平滚动菜单组件。 菜单组件具有自适应宽度,只需为父容器设置...import ScrollMenu from 'react-horizontal-scrolling-menu' ; import './App.css' ; // list o
Bootstrap JS Context Menu是一款基于Bootstrap框架和JavaScript实现的右键菜单插件。这个压缩包`bootstrap-js-context-menu.zip`(注意,文件名中的`.zip`在实际列表中被误写为`.rar`)提供了用于增强网页交互体验...
在`negomi-react-burger-menu-1f7823e`这个压缩包中,包含了`react-burger-menu`的源代码,你可以深入研究其内部实现,学习如何利用JavaScript、CSS和HTML来构建动态交互的组件。通过查看源码,你还可以了解到如何...
import '@vaadin/vaadin-menu-bar/vaadin-menu-bar.js' ; 入门 Vaadin组件默认使用Lumo主题。 要使用Material主题,请从theme/material文件夹导入对应的文件。 入口点 具有Lumo主题的组件: theme/lumo/vaadin-...
dropdownmenu一个写好的微信小程序帅选条件框,多条件筛选,下拉菜单,直接引用组件就可以 读懂并灵活运用必须具有html,css ,js基础,除此之外还必须阅读小程序官方文档对组件的封装与使用相关文档
通过选择器,如`.navbar`、`.menu-item`等,我们可以精准地定位到导航菜单的各个部分,进行定制化设计。例如,可以设置背景色、文字颜色、边框样式,以及鼠标悬停时的变换效果。同时,利用Flexbox或Grid布局,可以...
script src =" https://unpkg.com/vue-simple-context-menu/dist/vue-simple-context-menu.min.js " > </ script >< link rel =" stylesheet " type =" text/css " href =" ...
在Vue.js框架中,Ant Design Vue是一个非常流行的UI组件库,它提供了丰富的界面元素和设计模式,便于开发者构建美观且功能强大的Web应用。本项目主要关注的是Ant Design Vue中的菜单(Menu)组件,特别是如何处理...
现场演示产品特点Wc-menu-wrapper是一个不使用影子DOM的独立香草JS Web组件。 组件功能包括: 内容不可知:菜单项应能够包含任何HTML 可嵌套的:允许创建通用的菜单子菜单结构菜单“放下”方向:向下或向右初始菜单...