KISSY基础篇乄KISSY之优化实例

KISSY之优化实例

今日任务：拆合菜单代码优化重构

这一节我们主要来看一下拆合菜单进行代码优化重构后的效果。

一、测试页面代码

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

</div>

二、css样式代码

body{

background-color:#66cccc;

}

#content{

padding-top:20px;

}

#menu{

width:180px;

background-color:#66cccc;

border:0px solid #CDC8CF;

border-bottom:none;

}

#menu .menu-list{

display:inline;

}

#menu .menu-list div{

height:27px;

background:url(../img/menu-header-bg.jpg) 0px 0px repeat-x #99F;

border-bottom:1px solid #CDC8CF;

padding-top:3px;

padding-left:10px;

cursor:pointer;

}

#menu .menu-list div a{

font-size:14px;font-weight:bold;color:#765D97;

margin-left:10px;

background:url(../img/menu-arrow.jpg) 0px -24px no-repeat;padding-left:20px;

}

#menu .menu-list ul{

background-color:#FFF;

border-bottom:1px solid #CDC8CF;

padding:5px 50px;

height:90px;

}

#menu .menu-item ul li{

padding:2px 20px;

border:1px solid #FFF;

}

#menu .menu-item ul li a{

color:#666;

}

.arrow-down{

background-position:0px 2px !important;

}

图片依然是之前的那两张图片，此处不再展示。

三、js之KISSY方法

KISSY.use('node,anim', function (S,Node,Anim) {

var $=Node.all;

//隐藏所有子菜单项

$(".menu-list").each(function(v){

$(v).children('ul').hide();

});

$("#menu div").on('click',function(ev){

//获得当前menu-list的ul节点

var nextMenu = $(ev.target).next();

//获得当前menu-list节点

var parentMenu=$(ev.target).parent();

//获取当前menu-list的ul节点的display样式属性值

var display =$(nextMenu).css('display');

//获取当前menu-list的div的子节点a

var children = $(ev.target).children();

//获得当前menu-list之外的同级menu-list节点

var sibItems = $(parentMenu).siblings();

//隐藏其同级节点

$(sibItems).each(function(v){

$(v).children('ul').hide();

$(v).children('div').children().removeClass('arrow-down');

});

/*$("#btn-1").on('click',function(){

//创建一个新的li节点

alert(nextMenu.text());

$(nextMenu).append('<li class="new"><a>test13</a></li>');

});*/

//根据子菜单的显示情况来判断是否显示子菜单

if(display == 'none'){

var h = $(nextMenu).height();

$(nextMenu).css({height: 0,display: 'block',overflow:'hidden'});

//此处用了Anim模块，也可用node模块的animate方法：$(nextMenu).animate({'height':h+'px'},1,'elasticOut');

var anim=Anim($(nextMenu),{'height':h+'px'},1,Anim.Easing.elasticOut);

anim.run();

$(children).addClass('arrow-down');

}else{

$(nextMenu).slideUp(0.5);

$(children).removeClass('arrow-down');

}

return false;

});

来亲自操作，体验一下吧！

KISSY基础篇乄KISSY之优化实例相关推荐

KISSY基础篇乄KISSY之DOM（1）
KISSY之DOM(1) 今日任务:了解学习DOM的基础知识以及学习拆合菜单实例 KISSY的DOM模块的子模块和方法众多,但又很重要,最好的情况是全部熟练掌握,当然一开始学是不可能全部记住DOM的方 ...
KISSY基础篇乄KISSY之HelloWorld
KISSY之HelloWorld 今日任务:使用kissy实现简单的hello World! 一.新建Kissy测试项目打开STS,File->StaticWeb Project,命名其Pro ...
KISSY基础篇乄KISSY之DOM（2）
KISSY之DOM(2) 今日任务:深入学习DOM知识及进一步完善拆合菜单实例在上一篇的教程中,明河使用KISSY.DOM的常用方法制作了一个拆合菜单,同时也演练到了几个常用方法,比如addClas ...
KISSY基础篇乄KISSY简介
KISSY简介今日任务:了解学习有关Kissy的一些知识,以便于后续的学习一.相约KISSY,必先了解 KISSY 是一款跨终端.模块化.高性能.使用简单的 JavaScript 框架.除了完备的 ...
KISSY基础篇乄KISSY之Event
KISSY之Event事件今日任务:了解学习Event事件的基础知识 Event 模块是KISSY最重要的模块之一,他包含自定义事件机制.事件对象封装.DOM事件封装.面向多终端的事件行为统一.下辖 ...
KISSY基础篇乄KISSY之IO前奏
KISSY之IO前奏今日任务:了解学习IO模块之前必备知识. 在学习Kissy的IO之前,咱们先来了解下ajax,http,json等知识,这些是学习IO模块的必备知识.这里只是给出了一些概念性的介 ...
KISSY基础篇乄KISSY之IO（2）
第14天:KISSY之IO(2) 今日任务:创建Maven Project并学习IO模块. 这一节我们主要来看一下IO模块里的一些方法. 一.Maven Project (1)创建mavenproje ...
KISSY基础篇乄KISSY之Node（1）
KISSY之Node(1) 今日任务:学习Node模块,对拆合菜单实例代码进行优化重构. 前面我们分别讲解了DOM 和Event模块,那时是按照使用什么模块就引用什么模块的原则编写代码的.同时,我们也 ...
KISSY基础篇乄KISSY之Seed
KISSY之Seed 今日任务:了解Kissy的模块载入机制首先恭喜你已经成功使用kissy想世界打了个招呼,不过这只是刚起步,咱们还有很多地方需要学习.在本节咱们就推开kissy的大门,看看房间里 ...

KISSY基础篇乄KISSY之优化实例

KISSY之优化实例

KISSY基础篇乄KISSY之优化实例相关推荐

最新文章

热门文章