Prototype-CSS-Accordion.zip_WEB应用_prototype资源-CSDN下载

共8个文件

jpg：4个

js：3个

html：1个

版权申诉

web应用

prototype

194 浏览量 2022-09-22 23:51:08 上传评论收藏 42KB ZIP 举报

在Web开发中，"Prototype"通常指的是Prototype JavaScript框架，它是一个强大的JavaScript库，主要用于简化DOM操作，创建Ajax交互以及构建可复用的JavaScript组件。这个压缩包文件"Prototype-CSS-Accordion.zip"显然是一个关于使用Prototype框架和CSS实现手风琴效果菜单的教学资源。手风琴效果是一种常见的用户界面设计元素，它允许在一个有限的空间内展示大量的信息。这种效果通过折叠和展开各个部分来控制内容的可见性，使得用户可以逐个查看或隐藏内容，从而保持页面的整洁和易用性。在"index.html"文件中，我们很可能会找到HTML结构，这是手风琴效果的基础。HTML元素，如`<div>`，会被组织成可折叠的部分，每个部分可能包含一个标题（通常是一个链接或按钮）和一段内容。这些元素会通过特定的类名或ID与CSS和JavaScript进行关联。 "images"目录可能包含用于美化手风琴效果的图像资源，如箭头图标，指示当前部分是展开还是折叠。这些图像可以通过CSS背景属性或者伪元素来应用到相应的HTML元素上。 "javascript"目录则包含实现手风琴效果的JavaScript代码。在Prototype框架下，这通常涉及到事件监听器（例如，点击事件），DOM遍历，以及修改元素的样式属性（如高度、display属性）来实现内容的隐藏和显示。 Prototype框架提供了便利的方法，如`Element.extend`、`Element.show`、`Element.hide`等，使得JavaScript代码更加简洁且易于理解。 CSS在实现手风琴效果中主要负责布局和动画。通过设置适当的height、overflow属性，以及利用CSS transition来平滑地改变展开和折叠过程中的高度变化，可以创造出流畅的用户体验。此外，还可以通过CSS来控制展开/折叠状态下的视觉反馈，比如改变字体样式、颜色或边框。总结来说，这个"Prototype-CSS-Accordion.zip"项目将教给你如何使用Prototype JavaScript框架和CSS来创建一个交互式的手风琴效果菜单，这对于提升Web应用程序的用户体验和互动性至关重要。通过学习和实践这个例子，你可以深入了解JavaScript库的使用，以及如何结合CSS和JavaScript来实现动态的前端效果。

资源推荐

资源详情

资源评论

收起资源包目录

Prototype-CSS-Accordion.zip （8个子文件）

images

accordion_toggle.jpg 1KB

h_accordion_toggle.jpg 1KB

accordion_toggle_active.jpg 1KB

h_accordion_toggle_active.jpg 1KB

index.html 16KB

javascript

accordion.js 5KB

prototype.js 97KB

effects.js 37KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head profile="http://gmpg.org/xfn/11"> <title>Prototype+CSS手风琴菜单效果</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="javascript/prototype.js"></script> <script type="text/javascript" src="javascript/effects.js"></script> <script type="text/javascript" src="javascript/accordion.js"></script> <script type="text/javascript"> // // In my case I want to load them onload, this is how you do it! // Event.observe(window, 'load', loadAccordions, false); // // Set up all accordions // function loadAccordions() { var topAccordion = new accordion('horizontal_container', { classNames : { toggle : 'horizontal_accordion_toggle', toggleActive : 'horizontal_accordion_toggle_active', content : 'horizontal_accordion_content' }, defaultSize : { width : 525 }, direction : 'horizontal' }); var bottomAccordion = new accordion('vertical_container'); var nestedVerticalAccordion = new accordion('vertical_nested_container', { classNames : { toggle : 'vertical_accordion_toggle', toggleActive : 'vertical_accordion_toggle_active', content : 'vertical_accordion_content' } }); // Open first one bottomAccordion.activate($$('#vertical_container .accordion_toggle')[0]); // Open second one topAccordion.activate($$('#horizontal_container .horizontal_accordion_toggle')[2]); } </script>  <style type="text/css" > /* Vertical Accordions */ .accordion_toggle { display: block; height: 30px; width: 680px; background: url(images/accordion_toggle.jpg) no-repeat top right #a9d06a; padding: 0 10px 0 10px; line-height: 30px; color: #ffffff; font-weight: normal; text-decoration: none; outline: none; font-size: 12px; color: #000000; border-bottom: 1px solid #cde99f; cursor: pointer; margin: 0 0 0 0; } .accordion_toggle_active { background: url(images/accordion_toggle_active.jpg) no-repeat top right #e0542f; color: #ffffff; border-bottom: 1px solid #f68263; } .accordion_content { background-color: #ffffff; color: #444444; overflow: hidden; } .accordion_content h2 { margin: 15px 0 5px 10px; color: #0099FF; } .accordion_content p { line-height: 150%; padding: 5px 10px 15px 10px; } .vertical_accordion_toggle { display: block; height: 30px; width: 600px; background: url(images/accordion_toggle.jpg) no-repeat top right #a9d06a; padding: 0 10px 0 10px; line-height: 30px; color: #ffffff; font-weight: normal; text-decoration: none; outline: none; font-size: 12px; color: #000000; border-bottom: 1px solid #cde99f; cursor: pointer; margin: 0 0 0 0; } .vertical_accordion_toggle_active { background: url(images/accordion_toggle_active.jpg) no-repeat top right #e0542f; color: #ffffff; border-bottom: 1px solid #f68263; } .vertical_accordion_content { background-color: #ffffff; color: #444444; overflow: hidden; } .vertical_accordion_content h2 { margin: 15px 0 5px 10px; color: #0099FF; } .vertical_accordion_content p { line-height: 150%; padding: 5px 10px 15px 10px; } /* Horizontal Accordion */ .horizontal_accordion_toggle { /* REQUIRED */ float: left; /* This make sure it stays horizontal */ /* REQUIRED */ display: block; height: 100px; width: 30px; background: url(images/h_accordion_toggle.jpg) no-repeat top left #a9d06a; color: #ffffff; text-decoration: none; outline: none; border-right: 1px solid #cde99f; cursor: pointer; margin: 0 0 0 0; } .horizontal_accordion_toggle_active { background: url(images/h_accordion_toggle_active.jpg) no-repeat top left #e0542f; border-right: 1px solid #f68263; } .horizontal_accordion_content { /* REQUIRED */ height: 100px; /* We need to define a height for the accordion as it stretches the width */ float: left; /* This make sure it stays horizontal */ /* REQUIRED */ overflow: hidden; background-color: #ffffff; color: #444444; } .horizontal_accordion_content p { width: 450px; line-height: 150%; padding: 5px 10px 15px 10px; } /* Container styling*/ #horizontal_container { margin: 20px auto 20px auto; width: 680px; height: 100px; } #vertical_nested_container { margin: 20px auto 20px auto; width: 620px; } </style> </head> <body> <div id="container"> <h1><span>Prototype+CSS手风琴菜单效果</span></h1> <p class="description" ><a href="#">更多CSS菜单</a></p> <div id="vertical_container" > <h1 class="accordion_toggle">Changelog</h1> <div class="accordion_content"> <h2>What's new in v2.0?</h2> <p>Well i listened to all you guys out there in my forum and my blog and now all those wishes have been granted!</p> <p> <ul style="margin: 0 0 0 50px;"> <li>Open/Close functionality added (Click on an active accordion).</li> <li>Nested Vertical Accordions</li> <li>Accordions will dynamically resize on content added REAL TIME!</li> <li>...lots of bug fixes!</li> </ul> </p> </div> <h1 class="accordion_toggle">Donate! Help me get a MacBook Pro</h1> <div class="accordion_content"> <h2>Help me get a MacBook Pro!</h2> <p> Hello everyone, I have now released my accordion script and its better than any other one out there! That's right I said it. I will be releasing a few more of my scripts in the weeks to come. In the meantime though help me get a MacBook Pro so I have a mac to test on! Anything you could throw my way would be appreciated, I will also give back in my forums, so no worries, I give back even more! </p> <p> </p> <div align="center" style="width: 50%; float: left;" > <strong>$5 donation</strong> </div> <div align="center" style="width: 50%; float: left;" > <strong>Specify your own donation</strong> </div> <p> </p> </div> <h1 class="accordion_toggle">Why another Accordion?</h1> <div class="accordion_content"> <h2>Uhm... There wasn't one, well not a good one.</h2> <p> Haha! Like there was one. Well there was, but only for Rico and a bloated one by mootools, that's right I said bloated, live with it. For some reason there wasn't one for scriptaculous but now there is. The why is pretty simple, just like every other library, I had a need for it. Hope you can get some use out of it. </p> <p> Oh, by the way, not only does this script handle <strong>vertical</strong> accordions, but <strong>horizontal</strong> as well! </p> </div> <h1 class="accordion_toggle">A Horizontal Accordion! (Nested)</h1> <div class="accordion_content"> <h2>Oh yeah, just a few options... BAM Horizontal!</h2> <div id="horizontal_container" > <h3 class="horizontal_accordion_toggle"></h3> <div class="horizontal_accordion_content"> <p> Integer commodo nibh sit amet odio. Pellentesque semper. Integer dolor. Donec scelerisque sapien placerat velit. </p> </div> <h3 class="horizontal_accordion_toggle"></h3> <div class="horizontal_accordion_content"> <p> Sed at pede vitae turpis porta condimentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Morbi erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; </p> </div> <h3 class="horizontal_accordion_toggle"></h3> <div class="horizontal_accordion_content"> <p> Curabitur quam lorem, laoreet molestie, eleifend id, pulvinar vel, nunc. Proin congue felis quis purus. Aenean porttitor, lacus vel bibendum pulvinar, leo nulla suscipit leo, nec lobortis orci diam eget

评论收藏

内容反馈

版权申诉