`
ziyuewang
  • 浏览: 40102 次
  • 性别: Icon_minigender_2
  • 来自: 济南
社区版块
存档分类
最新评论

右键小菜单练习---JavaScript

阅读更多
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
		<script type="text/javascript">
			$(function(){
				var settings = [
					{
						text : "JavaScript框架" , 
						items : [
								{
									text : "JQuery" ,
									items : [
										{
											text : "UI" ,
											items : []
										} ,
											{
											text : "Mobile" ,
											items : []
										}
									]
								} ,
								{
									text : "ExtJS" ,
									items : []
								} ,
								{
									text : "Dojo" ,
									items : [
										{
											text : "IBM" ,
											items : [
												{
													text : "Web Application Server X" ,
													items : []
												} ,
												{
													text : "TAM" ,
													items : []
												}
											]
										} ,
										{
											text : "Oracle-Sun" ,
											items : []
										}
									]
								}
						]
					} ,
					{
						text : "J2ee框架" ,
						items : []
					}
				] ;
				Menu.load(settings)
			}) ;
			
			var Menu = function(){
				function _getDomId(){
					var myString = [
						"0","1","2","3","4","5","6","7","8","9","a","b",
						"c","d","e","f","g","h","i","j","k","l","m","n",
						"o","p","q","r","s","t","u","v","w","x","y","z","_"
					] ;
					var domId = "" ;
					for(var i=0;i<8;i++){
						var index = parseInt(Math.random() * myString.length) ;
						domId += myString[index] ;
					}
					return domId ;
				}
				function _render(items,dom){
					var _ul_ = $("<ul></ul>")
						.attr("id",_getDomId())
						.addClass("menu")
						.appendTo("body")
						.css(
							{
								top : dom.offset().top + 5 + "px" ,
								left : dom.offset().left + dom.width() - 4 + "px"
							}
						) ;
					dom.attr("ui",_ul_.attr("id")) ;
					for(var j=0;j<items.length;j++){
						var item = items[j] ;
						var _li_ = $("<li></li>")
								.appendTo(_ul_)
								.mouseover(function(){
									$(this).addClass("active") ;
									var s = $(this).attr("ui") ;
									$(document.getElementById(s)).fadeIn("normal") ;
								})
								.mouseout(function(){
									$(this).removeClass("active") ;
									var s = $(this).attr("ui") ;
									$(document.getElementById(s)).fadeOut("fast") ;
								}) ;
						var _a_ = $("<a href='#'></a>")
								.html(item.text)
								.appendTo(_li_) ;
						if(item.items.length){
							_a_.addClass("more") ;
							_render(item.items,_li_) ;
						}
					}
				} ;
				function _init(jq){
					jq.show("slow") ;
				} ;
				function load(settings){
					var _ul = $("<ul></ul>")
							.addClass("menu")
							.appendTo("body") ;
					for(var i=0;i<settings.length;i++){
						var data = settings[i] ;
						var text = data.text ;
						var items = data.items ;
						var _li = $("<li></li>")
								.appendTo(_ul)
								.mouseover(function(){
									$(this).addClass("active") ;
									var s = $(this).attr("ui") ;
									$(document.getElementById(s)).fadeIn("normal") ;
								})
								.mouseout(function(){
									$(this).removeClass("active") ;
									var s = $(this).attr("ui") ;
								//	$(document.getElementById(s)).fadeOut("fast") ;
								}) ;
						var _a = $("<a href='#'></a>")
								.html(text)
								.appendTo(_li) ;
						if(items.length){
							_a.addClass("more") ;
							_render(items,_li)
						}
					}
					_init(_ul) ;
				} ;
				return {
					load : load
				} ;
			}() ;
		</script>
  • 大小: 13.1 KB
分享到:
评论

相关推荐

    基于JavaScript实现右键菜单和拖拽功能

    本篇文章主要探讨了如何利用JavaScript实现右键菜单功能以及拖拽功能,让我们深入了解一下这两个关键知识点。 首先,我们来看右键菜单的实现。在浏览器中,通常右键点击会触发浏览器的默认上下文菜单,但通过...

    前端练习题前端练习题前端练习题周考.docx

    在 HTML 事件中,oncontextmenu 是右键菜单事件,而不是键盘相关事件。getDate() 方法可以获取当前日期中的天数。JavaScript 是运行在浏览器端的脚本语言。 在日期对象中,getDate() 方法可以获取当前日期中的天数...

    z-tree,增删改查

    模仿"IMO办公软件"的右键菜单,表明开发者想在z-tree节点上添加上下文菜单功能,使得用户可以通过鼠标右键点击节点来执行各种操作,如新建、删除、修改等。右键菜单的实现通常需要结合事件监听和自定义函数,以响应...

    Dreamweaver-CS6练习题.docx

    16. 页面属性可通过“修改”菜单或右键快捷菜单执行。Dreamweaver CS6支持的图片格式包括PNG、JPEG,不支持ASP或TXT格式的图片。 17. 一些其他知识点: - CSS样式用于控制网页元素的外观。 - 表单操作还包括按钮...

    软件测试-自动化测试-web自动化-教学研究

    2. **查看源代码**:通过浏览器右键菜单选择“查看网页源代码”选项,这一步骤对于理解网页结构至关重要。 3. **复制源代码**:将查看到的源代码完整复制下来。 4. **保存至本地**:将复制的源代码保存为.html文件...

    vanillaJS-calendar:JavaScript练习,adaptipe布局,使用Date()类

    当悬停在一天中时,完整的消息将显示在月份和星期几之间的小节(奖励)中,右键单击应显示更改单元格颜色的上下文菜单,方法是单击颜色,即单元格颜色更改为相应的 通过按t键,应该在顶部显示所花费的小时数(我们...

    Dreamweaver模拟练习题.docx

    8. 插入表格行的方法多种多样,包括在单元格中使用Modify菜单,右键快捷菜单,或者在最后一行末尾按下Tab键。但按下Ctrl+W会关闭当前文档,而不是插入新行(选项D错误)。 9. 创建模板是Dreamweaver中提高效率的...

    制作静态网页

    - **建立超链接:** 选中文本或图像,使用属性面板或右键菜单中的“创建链接”选项,设置链接目标,如内部页面、外部网站或电子邮件地址。 #### 实例练习:制作一个简单的静态网页 1. **设置页面背景和插入图片:*...

    VIsual Studio Code基本配置及使用

    - 右键点击编辑区域,在弹出的菜单中选择“在默认浏览器中打开”(Open in Default Browser),或者使用安装的“Open in Browser”插件。 - 浏览器将自动打开,并显示你刚才输入的文字“Hello World!”。 通过...

    数据库实验一实验报告

    - **删除操作**:完成对“PERSON”表的操作后,可以通过右键菜单选择删除选项,将该表从数据库中移除。同样地,如果需要删除整个“Test”数据库,也可以通过类似的步骤来实现。 ##### 3.3 数据库的备份与恢复 - **...

    Renkbench:Javascript Amiga Workbench 1.3外观克隆

    鼠标右键单击触发的主标题栏中的上下文菜单 触摸事件以供手持设备使用 使用Topaz字体的自定义键盘输入 去做 错误修正 内容 介绍应用程序 进一步重构 继续将前端代码拆分为多个文件 将workbench.json数据放入自己容器...

    (完整版)Html5程序设计基础教程(练习题参考答案).pdf

    2. **新元素和属性**:HTML5中新增了如(标记文本)、(表示时间)、(显示度量)和(进度条)等元素,以及(自定义右键菜单)和(显示/隐藏详细信息)等属性,丰富了网页的表现力。 3. **Canvas与SVG绘图**:HTML5...

    Ez Snippets & Templates-crx插件

    使用Chrome上下文菜单的扩展名: 右键单击&gt;复制代码段/模板 *您可以使用Chrome上下文菜单在网页中保存所选文本: 右键单击&gt; EZ Snippet&gt;保存选择 其他 这是一个我用于练习一些JavaScript和ES6功能的个人项目。...

    Idea Cards (BETA)-crx插件

    Idea Cards (BETA)插件可能是通过集成到浏览器的工具栏或者右键菜单,让用户方便地启动创新练习。 至于压缩包子文件的文件名称列表中仅有的"Idea_Cards_(BETA).crx",这是该扩展程序的完整安装包。用户通常需要将此...

    使用表格布局网页.ppt

    只需选中要插入或删除的行或列的位置,然后使用相应的工具或右键菜单命令即可。此外,移动表格内容涉及选中整行并拖放到新位置,这对于重新排列数据很有帮助。 对表格内容进行排序是组织数据的一种方式,这可能需要...

    测试培训教材

    The VAPI-XP testing tool enables you to create new testing scripts using Microsoft VBScript, Microsoft JavaScript (JScript version), PerlScript, and PythonScript, and integrate these scripts into your...

    Firefox 火狐 鼠标手势

    鼠标手势的基本原理是,用户在浏览网页时,可以通过鼠标右键按住并移动来触发不同的命令,比如关闭当前标签页、前进、后退、刷新等。这种操作方式比传统的菜单或快捷键更加直观和便捷,尤其对于频繁进行浏览操作的...

Global site tag (gtag.js) - Google Analytics