新闻投稿:76937083@qq.com QQ:76937083

使用javascript oop开发滑动(slide) 菜单控件

时间: 2010-08-21 来源: 未知 关键词: slide 菜单 阅读次数:

核心提示:这里使用原生的 javascrip t,用 面向对象 的方式创建一个容易维护使用方便的滑动菜单,调用方式如下: var $sliding = document. get ElementById( silding ); var s1 = new Sliding(); s1.commands = $sliding.getElementsByTagName( dt ); s1.panels = $sliding.getElementsByTagName( dd );; s1.init( mou seo ver ...

这里使用原生的javascript,用面向对象的方式创建一个容易维护使用方便的滑动菜单,调用方式如下:

var $sliding = document.getElementById("silding");
var s1 = new Sliding();
s1.commands 
= $sliding.getElementsByTagName("dt");
s1.panels 
= $sliding.getElementsByTagName("dd"); ;
s1.init(
"mouseover""active");

演示代码分为slide.js和slide.html两个文件
 

 slide.htm:

代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript slide控件演示</title>
<style type="text/css">
    
/*reset*/
    dl,ul,li,dt,dd
{ margin:0; padding:0; list-style:none; }
    
/*silding*/
    .silding
{ width:200px; border:1px solid #ccc; line-height:25px; overflow:hidden;}
    .silding dt
{border-bottom:1px solid #ccc; background-color:#bebebe; cursor:pointer}
    .silding dd
{ display:none; background:#efefef; overflow:hidden; font-size:12px; }
    .silding .active
{ font-weight:bold;}
</style>
<script type="text/javascript" src="slide.js"></script>
</head>

<body>
<div id="silding" class="silding">
    
<dl>
        
<dt class="active">第一个一级菜单</dt>
           
<dd style="display:block;">
            
<ul>
                
<li><href="#">第一个二级菜单</a></li>
                
<li>第一个二级菜单</li>
                
<li>第一个二级菜单</li>
            
</ul>
        
</dd>
   
</dl>
    
<dl>
        
<dt>第二个一级菜单</dt>
           
<dd>
            
<ul>
                
<li>第二个二级菜单</li>
                
<li>第二个二级菜单</li>
                
<li>第二个二级菜单</li>
            
</ul>
        
</dd>
   
</dl>
    
<dl>
        
<dt>第三个一级菜单</dt>
           
<dd>
            
<ul>
                
<li>第三个二级菜单</li>
                
<li>第三个二级菜单</li>
                
<li>第三个二级菜单</li>
            
</ul>
        
</dd>
   
</dl>
</div>
<script type="text/javascript">
    
var $sliding = document.getElementById("silding");
    
var s1 = new Sliding();
    s1.commands 
= $sliding.getElementsByTagName("dt");
    s1.panels 
= $sliding.getElementsByTagName("dd"); ;
    s1.init(
"mouseover""active");
</script>
</body>
</html>

slide.js:
 

代码

    
function Slider(i, panelHeight) { //dto
        this.index = i;
        
this.panelHeight = panelHeight;
    }
    
 
//class  Sliding {
    function Sliding(activeIndex) {
        
this.commands = [];
        
this.panels = [];
        
this.activeIndex = activeIndex || 0;
        
this.sliderCache = {};
    }
    Sliding.prototype 
= {
        
//绑定事件
        init: function(eventName, activeCssClass) {
            
var _this = this;
            
var cmds = _this.commands;
            _this.activeClass 
= activeCssClass;
            
for (var i = 0, n = cmds.length; i < n; i++) {
                cmds[i][
"on" + eventName] = function(e) {
                    _this.handel(
this, e);
                }
                cmds[i].index 
= i;
                
if (i == _this.activeIndex) {
                    _this.sliderCache 
= new Slider(i, _this.panels[i].offsetHeight);
                }
            }


        },
        
//事件处理函数
        handel: function(elem, args) {
            
var _this = this;
            
var index = elem.index;
            
var cacheIndex = _this.sliderCache.index;
            
var cacheElem =  _this.commands[cacheIndex];
            
if (index == cacheIndex) return;
            
var showPanel = _this.panels[index];
            
var hidePanel = _this.panels[cacheIndex];
            
var h = parseInt(_this.sliderCache.panelHeight);
            showPanel.style.height 
= "0px";
            showPanel.style.display 
= "block";
            _this.tween(hidePanel, showPanel, h);
            elem.className 
= _this.activeClass;
            cacheElem.className 
= cacheElem.className.replace(eval("/ ?"+_this.activeClass+" ?/"),"");
            _this.sliderCache 
= new Slider(index, h);

        },
        
//动画算法
        tween: function(obj0, obj1, h) {
            _this 
= arguments.callee;
            
var step = 20;
            
if ("\v" == "v") {
                step 
= 30;
            }
            
if (h > 0) {
                
var h0 = obj0.offsetHeight;
                
var h1 = obj1.offsetHeight;
                
if (h < step) {
                    obj0.style.display 
= "none";
                    obj0.style.height 
= (h1 + h) + "px";
                    obj1.style.height 
= (h1 + h) + "px";

                } 
else {
                    h 
= h - step;
                    obj0.style.height 
= (h0 - step) + "px";
                    obj1.style.height 
= (h1 + step) + "px";
                    setTimeout(
function() {
                        _this(obj0, obj1, h)
                    },
                    
50)
                }
            }
        }
    }
//}    

 上面就所有代码了这里因为是演示所以让HTML CSS尽量的简化,另外使用jqueryfn.slideUp fn.slideDown 实现起来会更容易不过我作为一个专业的开发者多了解些原生的JS对技术的提高还是很有帮助。

上一篇:2010-2013年中国可编程控制器行业市场运行及投资前景研究报告
下一篇:PIC单片机AD转化器编程方法
责任编辑:admin

相关新闻

请自觉遵守互联网相关政策法规,作者可以直接删除恶意评论、广告或违禁词语
用户名: 验证码:点击我更换图片
打理网店四大“俗招”
人靠衣服马靠鞍 货好还需巧打扮打理网店四大俗招 消费者去街上购物,多数人会选择正规的大商店、大超市。同样,...[详细]