<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实现右键菜单功能以及拖拽功能,让我们深入了解一下这两个关键知识点。 首先,我们来看右键菜单的实现。在浏览器中,通常右键点击会触发浏览器的默认上下文菜单,但通过...
在 HTML 事件中,oncontextmenu 是右键菜单事件,而不是键盘相关事件。getDate() 方法可以获取当前日期中的天数。JavaScript 是运行在浏览器端的脚本语言。 在日期对象中,getDate() 方法可以获取当前日期中的天数...
模仿"IMO办公软件"的右键菜单,表明开发者想在z-tree节点上添加上下文菜单功能,使得用户可以通过鼠标右键点击节点来执行各种操作,如新建、删除、修改等。右键菜单的实现通常需要结合事件监听和自定义函数,以响应...
16. 页面属性可通过“修改”菜单或右键快捷菜单执行。Dreamweaver CS6支持的图片格式包括PNG、JPEG,不支持ASP或TXT格式的图片。 17. 一些其他知识点: - CSS样式用于控制网页元素的外观。 - 表单操作还包括按钮...
2. **查看源代码**:通过浏览器右键菜单选择“查看网页源代码”选项,这一步骤对于理解网页结构至关重要。 3. **复制源代码**:将查看到的源代码完整复制下来。 4. **保存至本地**:将复制的源代码保存为.html文件...
当悬停在一天中时,完整的消息将显示在月份和星期几之间的小节(奖励)中,右键单击应显示更改单元格颜色的上下文菜单,方法是单击颜色,即单元格颜色更改为相应的 通过按t键,应该在顶部显示所花费的小时数(我们...
8. 插入表格行的方法多种多样,包括在单元格中使用Modify菜单,右键快捷菜单,或者在最后一行末尾按下Tab键。但按下Ctrl+W会关闭当前文档,而不是插入新行(选项D错误)。 9. 创建模板是Dreamweaver中提高效率的...
- **建立超链接:** 选中文本或图像,使用属性面板或右键菜单中的“创建链接”选项,设置链接目标,如内部页面、外部网站或电子邮件地址。 #### 实例练习:制作一个简单的静态网页 1. **设置页面背景和插入图片:*...
- 右键点击编辑区域,在弹出的菜单中选择“在默认浏览器中打开”(Open in Default Browser),或者使用安装的“Open in Browser”插件。 - 浏览器将自动打开,并显示你刚才输入的文字“Hello World!”。 通过...
- **删除操作**:完成对“PERSON”表的操作后,可以通过右键菜单选择删除选项,将该表从数据库中移除。同样地,如果需要删除整个“Test”数据库,也可以通过类似的步骤来实现。 ##### 3.3 数据库的备份与恢复 - **...
鼠标右键单击触发的主标题栏中的上下文菜单 触摸事件以供手持设备使用 使用Topaz字体的自定义键盘输入 去做 错误修正 内容 介绍应用程序 进一步重构 继续将前端代码拆分为多个文件 将workbench.json数据放入自己容器...
2. **新元素和属性**:HTML5中新增了如(标记文本)、(表示时间)、(显示度量)和(进度条)等元素,以及(自定义右键菜单)和(显示/隐藏详细信息)等属性,丰富了网页的表现力。 3. **Canvas与SVG绘图**:HTML5...
使用Chrome上下文菜单的扩展名: 右键单击>复制代码段/模板 *您可以使用Chrome上下文菜单在网页中保存所选文本: 右键单击> EZ Snippet>保存选择 其他 这是一个我用于练习一些JavaScript和ES6功能的个人项目。...
Idea Cards (BETA)插件可能是通过集成到浏览器的工具栏或者右键菜单,让用户方便地启动创新练习。 至于压缩包子文件的文件名称列表中仅有的"Idea_Cards_(BETA).crx",这是该扩展程序的完整安装包。用户通常需要将此...
只需选中要插入或删除的行或列的位置,然后使用相应的工具或右键菜单命令即可。此外,移动表格内容涉及选中整行并拖放到新位置,这对于重新排列数据很有帮助。 对表格内容进行排序是组织数据的一种方式,这可能需要...
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...
鼠标手势的基本原理是,用户在浏览网页时,可以通过鼠标右键按住并移动来触发不同的命令,比如关闭当前标签页、前进、后退、刷新等。这种操作方式比传统的菜单或快捷键更加直观和便捷,尤其对于频繁进行浏览操作的...