右键小菜单练习---JavaScript

最新推荐文章于 2025-09-13 16:07:06 发布

iteye_3846

最新推荐文章于 2025-09-13 16:07:06 发布

阅读量119

点赞数

分类专栏： JavaScript练习文章标签： JavaScript UI jQuery Mobile Oracle ViewUI

JavaScript练习专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的JavaScript框架菜单展示系统。该系统通过加载不同的JavaScript框架信息，如JQuery、ExtJS、Dojo等，并展示它们的子模块，如UI、Mobile等。此外，还介绍了如何使用jQuery进行DOM操作，包括创建菜单项、设置样式和响应鼠标悬停事件。


<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>