鑑於系統左側導航選單的欄目過多，出現有些模組看不到的情況，考慮做一個選單上下滾動。目前系統左側導航選單是easyui的手風琴效果，UI更新後是圖片和文字配合形式。以下是對於過程的整理：

一、方案的查詢與確定

1、方案1（引入js外掛）

嘗試結果：匯入外掛，導航模組那裡不能展示，一些js方法報錯，影響原有功能，考慮到引入外掛影響東西太多，放棄這種實現方法。

2、方案2（js方法實現）

                將js引入專案，導航資料有誤。

解決思路：js中“$”需要替換掉，和jQuery中衝突，重新定義方法名稱，動態獲取導航的資料，標籤的id、class等修飾，註冊事件。接下來就按照這種思路嘗試：

二、示例引用

1、css

2、js

js部分已經整理好，直接上程式碼了。

<!--左側選單上下滾動start-->
<script type="text/javascript">
//獲取id
function a(id){
	return typeof id === "string" ? document.getElementById(id) : id; 
}
//獲取tagName
function aa(elem, oParent){
	return (oParent || document).getElementsByTagName(elem); 
}
//獲取class
function aaa(className, oParent){
	var aClass = [];
	var reClass = new RegExp("(//s|^)" + className + "($|//s)");
	var aElem = aa("*", oParent);
	for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);
	return aClass
}
//初始化物件
function Roll(){
	this.initialize.apply(this, arguments) 
}
Roll.prototype ={
 	initialize: function (obj){
  		var _this = this;
  		this.obj = a(obj);
  		this.oUp = aaa("left_up", this.obj)[0];
  		this.oDown = aaa("left_down", this.obj)[0];
 		 this.oList = aaa("list", this.obj)[0];
  		this.aItem = this.oList.children;
  		this.timer = null;
  		this.iNow = 0;
  		this.iHeight = this.aItem[0].offsetHeight;
  		this.oUp.onclick = function (){
   			_this.up() 
  		};
	  	this.oDown.onclick = function (){
	   		_this.down()
	  	} 
	},
	up: function (){
		this.oList.insertBefore(this.aItem[this.aItem.length - 1], this.oList.firstChild);
	  	this.oList.style.top = -this.iHeight + "px";
	  	this.doMove(0)
	},
	down: function (){
	 	this.doMove(-this.iHeight, function (){	
	 		alert("down2");
	 		this.oList.appendChild(this.aItem[0]);
	 		this.oList.style.top = 0; 
	 	})
	},
	doMove: function (iTarget, callBack){
	  	var iTarget;
                var _this = this;
	  	clearInterval(this.timer)
	  	this.timer = setInterval(function (){
	   		var iSpeed = (iTarget - _this.oList.offsetTop) / 5;
	   		iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
	   		_this.oList.offsetTop == iTarget ? (clearInterval(_this.timer), callBack && callBack.apply(_this)) : _this.oList.style.top = iSpeed + _this.oList.offsetTop + "px"
	  	}, 30)
	}
};
window.onload = function (){
	new Roll("box");
};
</script>
<!--左側選單上下滾動end-->
 

三、針對性的更改

1、初始化左側js方法

//初始化左側
	function InitLeftMenuNew(){
		var menulist ='';
	    $.each(_menus[0].children, function(i, n) {//$.each 遍歷_menu中的元素
			menulist +='<div class="item">';
			menulist +='<div class="list"><dl class="'+n.iconCLS+'"></dl></div>';
			menulist +='<div class="title"><a href="#">'+n.navNodeName+'</a></div>'
			menulist +='<div class="line"></div>';
			menulist +='<div class="subitem"><div class="inner"><div class="tit tit1"><ul>';
			
	        $.each(n.children, function(j, o) {
				menulist += '<li><a class="ui-link" ref="'+o.nodeId+'" href="' + o.nodeURL + '" rel="' + o.nodeURL + '"><span class="icon '+o.iconCLS+'" > </span>' + o.navNodeName + '</a></li>';
	        });
	        menulist +='</ul></div></div></div></div>';
	    });
	    
	    $("#nav").append(menulist);
	    
	    $('.ui-link').click(function(){//當單擊選單某個選項時，在右邊出現對用的內容
			var tabTitle = $(this).text();//獲取超鏈裡span中的內容作為新開啟tab的標題
			var url = $(this).attr("rel");
			var menuid = $(this).attr("ref");//獲取超連結屬性中ref中的內容
			var icon = getIcon(menuid);
			addTab(tabTitle,url,icon);//增加tab
			return false;
		}).hover(function(){
			//$(this).parent().addClass("hover");
		},function(){
			//$(this).parent().removeClass("hover");
		});
	}
 

（2）修改之後的js方法

//初始化左側
	function InitLeftMenuNew(){
		var menulist ='<li>';
	    $.each(_menus[0].children, function(i, n) {//$.each 遍歷_menu中的元素
			menulist +='<div class="item">';
			menulist +='<div class="list"><dl class="'+n.iconCLS+'"></dl></div>';
			menulist +='<div class="title"><a href="#">'+n.navNodeName+'</a></div>'
			menulist +='<div class="line"></div>';
			menulist +='<div class="subitem"><div class="inner"><div class="tit tit1"><ul>';
			
	        $.each(n.children, function(j, o) {
				menulist += '<li><a class="ui-link" ref="'+o.nodeId+'" href="' + o.nodeURL + '" rel="' + o.nodeURL + '"><span class="icon '+o.iconCLS+'" > </span>' + o.navNodeName + '</a></li>';
	        });
	        menulist +='</ul></div></div></div></div></li>';
	    });
	    
	    $("#nav").append(menulist);
	    
	    $('.ui-link').click(function(){//當單擊選單某個選項時，在右邊出現對用的內容
			var tabTitle = $(this).text();//獲取超鏈裡span中的內容作為新開啟tab的標題
			var url = $(this).attr("rel");
			var menuid = $(this).attr("ref");//獲取超連結屬性中ref中的內容
			var icon = getIcon(menuid);
			addTab(tabTitle,url,icon);//增加tab
			return false;
		}).hover(function(){
			//$(this).parent().addClass("hover");
		},function(){
			//$(this).parent().removeClass("hover");
		});
	}

2、接收資料的標籤

<div class="product_sort" id="nav">
			<div class="left_up">
			</div>
			<div class="left_down"></div>
		</div>

（2）修改之後的標籤

<div id="box" class="product_sort">
			<div class="left_up"></div>
			<div class="left_down"></div>
		    <div>
				<ul id="nav" class="list"></ul>
		    </div>
		</div>