mootools里面有个能够实现类似QQ面板功能的功能类,效果?如下:
我的折叠菜单
网站简介
作者简介
作者的其他作品
欧洲某魔术网
Artificial selection offers remarkable examples of the amount of diversity that can exist between individuals sharing a late common ancestor. To perform artificial selection, one begins with a particular species (following examples include wolves and wild cabbage) and then, at every generation, only allow certain individuals to reproduce, based on the degree to which they exhibit certain desirable characteristics. In time, it is expected that these characteristics become increasingly well-developed in successive generations. Many examples of artificial selection, like the ones below, occurred without the guidance of modern scientific insight.
双语手机网
An obvious example of the power of artificial selection is the diversity found in various breed in domesticated dogs. The various breeds of dogs all share common ancestry (being all ultimately descended from wolves) but were domesticated by humans and then selectively bred in order to enhance various features such as coat color and length or body size. To see the wide range of difference between the many breeds of dogs compare the Chihuahua, Great Dane, Basset Hound, Pug, and Poodle. Also compare this enormous diversity with the relative uniformity of wild wolves.
该例子包含的html代码
<h3><strong>我的折叠菜单</strong></h3> <div id="accordion"> <h3 class="toggler atStart">网站简介</h3> <div class="element atStart"> 写笔记的小Joe,是一个记录网络笔记,趣事,心得的个人独立博客,有专有的主题风格。其中大部分内容有:mootools,js,php,falsh等电脑语言笔记,当然还有电影,音乐等娱乐资讯,有一定的访问群体。写笔记的小Joe,是一个记录网络笔记,趣事,心得的个人独立博客,有专有的主题风格。其中大部分内容有:mootools,js,php,falsh等电脑语言笔记,当然还有电影,音乐等娱乐资讯,有一定的访问群体。写笔记的小Joe,是一个记录网络笔记,趣事,心得的个人独立博客,有专有的主题风格。其中大部分内容有:mootools,js,php,falsh等电脑语言笔记,当然还有电影,音乐等娱乐资讯,有一定的访问群体。写笔记的小Joe,是一个记录网络笔记,趣事,心得的个人独立博客,有专有的主题风格。其中大部分内容有:mootools,js,php,falsh等电脑语言笔记,当然还有电影,音乐等娱乐资讯,有一定的访问群体。写笔记的小Joe,是一个记录网络笔记,趣事,心得的个人独立博客,有专有的主题风格。其中大部分内容有:mootools,js,php,falsh等电脑语言笔记,当然还有电影,音乐等娱乐资讯,有一定的访问群体。</div> <h3 class="toggler atStart">作者简介</h3> <div class="element atStart"> 小JOE,一个极端热爱网页学习的笨学生,什么都学,但是什么都不精通。相对熟悉的计算机语言和软件包括:photoshop,flash,php,js,java,mootools和小部分.net。作者性格怪异,可以坐在电脑面前连续工作十几个小时,曾经为用photoshop画一幅画,连续工作了三天。小JOE,一个极端热爱网页学习的笨学生,什么都学,但是什么都不精通。相对熟悉的计算机语言和软件包括:photoshop,flash,php,js,java,mootools和小部分.net。作者性格怪异,可以坐在电脑面前连续工作十几个小时,曾经为用photoshop画一幅画,连续工作了三天。小JOE,一个极端热爱网页学习的笨学生,什么都学,但是什么都不精通。相对熟悉的计算机语言和软件包括:photoshop,flash,php,js,java,mootools和小部分.net。作者性格怪异,可以坐在电脑面前连续工作十几个小时,曾经为用photoshop画一幅画,连续工作了三天。小JOE,一个极端热爱网页学习的笨学生,什么都学,但是什么都不精通。相对熟悉的计算机语言和软件包括:photoshop,flash,php,js,java,mootools和小部分.net。作者性格怪异,可以坐在电脑面前连续工作十几个小时,曾经为用photoshop画一幅画,连续工作了三天。</div> <h3 class="toggler atStart">作者的其他作品</h3> <div class="element atStart"> <h4>欧洲某魔术网</h4> Artificial selection offers remarkable examples of the amount of diversity that can exist between individuals sharing a late common ancestor. To perform artificial selection, one begins with a particular species (following examples include wolves and wild cabbage) and then, at every generation, only allow certain individuals to reproduce, based on the degree to which they exhibit certain desirable characteristics. In time, it is expected that these characteristics become increasingly well-developed in successive generations. Many examples of artificial selection, like the ones below, occurred without the guidance of modern scientific insight. <h4>双语手机网</h4> An obvious example of the power of artificial selection is the diversity found in various breed in domesticated dogs. The various breeds of dogs all share common ancestry (being all ultimately descended from wolves) but were domesticated by humans and then selectively bred in order to enhance various features such as coat color and length or body size. To see the wide range of difference between the many breeds of dogs compare the Chihuahua, Great Dane, Basset Hound, Pug, and Poodle. Also compare this enormous diversity with the relative uniformity of wild wolves.</div> </div>
该例子js源码解释
//在id为accordion的div元素内以类名为atStart'的h3标签为标题,以类名为atStart'的div标签为内容构造Accordion类 var accordion = new Accordion('h3.atStart', 'div.atStart', { opacity: false,//初始化的时候内容透明度为0 onActive: function(toggler, element){ toggler.setStyle('color', '#ff3300');//当某个标题被激活(刚开始打开其下内容)时,激发函数:标题设置css样式,字体颜色设置为红色。这里的toggler就是$$('h3.atStart')这组元素 }, onBackground: function(toggler, element){ toggler.setStyle('color', '#222');//当某标题不是激活的时候设置其文字颜色为灰黑色 } }, $('accordion')); var newTog = new Element('h3', {'class': 'toggler'}).setHTML('历史');//构造一个element类,也就是产生一个页面元素,改元素为《h3 class="“toggler”"》历史《/h3》 var newEl = new Element('div', {'class': 'element'}).setHTML('2008年建博2008年建博2008年建博2008年建博2008年建博2008年建博2008年建博2008年建博2008年建博2008年建博2008年建博2008年建博2008年建博2008年建博2008年建博');//同上,产生一个页面元素《div class="element"》2008年建博200....年建博《/div》 accordion.addSection(newTog, newEl, 0);//往之前定义的Accordion类里面添加新的标题和内容页
这里的css代码不列举了,主要阐述一下Accordion类的使用。
^_^!是不是很简单而效果很炫?mootools的特效真的很不错的。
原创教程,转载请注明,出处:http://xiebiji.com/2008/12/mootools-accordion 作者:Joe
Great site.
回复