10个jQuery的标签页tabs和手风琴效果Accordion实现
fmms 13年前
<p>手风琴效果和标签页效果很类似。主要的区别在于显示和隐藏的方式不同。这里我们精心收集了10个标签页和手风琴效果的实现,希望大家喜欢!</p> <h3><a title="gbin1.com" href="/misc/goto?guid=4958328419646738447" target="_blank">1. Yetii – Yet (E)Another JavaScript Tab Interface</a></h3> <p>不使用javascript而使用轻量级,面对对象的代码,你可以有很多独立的标签页界面,指定初始的标签,打开自动标签轮播,添加上一个/下一个导航等等</p> <p><img alt="10个jQuery的标签页tabs和手风琴效果Accordion实现" src="https://simg.open-open.com/show/2b9ae9d38e8a9daab8abd622877e5f7d.jpg" width="520" height="134" /></p> <h3><a title="gbin1.com" href="/misc/goto?guid=4958328420450334384" target="_blank">2. Fresh Content Accordion</a></h3> <p>一个简单,但是非常炫的手风琴效果实现,使用CSS,jQuery和easing插件</p> <p><img alt="10个jQuery的标签页tabs和手风琴效果Accordion实现" src="https://simg.open-open.com/show/f3baa10e784864dea5c1819b34ca9317.jpg" width="520" height="134" /></p> <h3><a title="gbin1.com" href="/misc/goto?guid=4958187913222746305" target="_blank">3. Sweet AJAX Tabs with jQuery 1.4 And CSS3</a></h3> <p>在这个教程中你将学习创建一个多彩的AJAX支持的标签页页面,使用CSS3和jQuery1.4。</p> <p><img alt="10个jQuery的标签页tabs和手风琴效果Accordion实现" src="https://simg.open-open.com/show/a3a69fb5777e5c073a80a9cf08dc7fd4.jpg" width="520" height="134" /></p> <h3><a title="gbin1.com" href="/misc/goto?guid=4958328421983228023" target="_blank">4. TN34 Timetabs – jQuery Plugin</a></h3> <p>这个jQuery插件由Mario Alves开发,自动切换标签页,兼容现代浏览器</p> <p><img alt="10个jQuery的标签页tabs和手风琴效果Accordion实现" src="https://simg.open-open.com/show/d8285d7bbe6a3c944d6281bfd68d61cc.jpg" width="520" height="134" /></p> <h3><a title="gbin1.com" href="/misc/goto?guid=4958328422791588843" target="_blank">5. Easy Accordion – jQuery Plugin</a></h3> <p>根据定义的list来产生一个非常光滑的水平手风琴效果。你可以定义幻灯或者静态效果</p> <p><img alt="10个jQuery的标签页tabs和手风琴效果Accordion实现" src="https://simg.open-open.com/show/5664328024a4367976799c8b63f2429e.jpg" width="520" height="134" /></p> <h3><a title="gbin1.com" href="/misc/goto?guid=4958328423589889612" target="_blank">6. jQuery Smooth Tabs Plugin</a></h3> <p>使用简单的插件,允许你使用漂亮的效果展示内容,提供更好的用户体验</p> <p><img alt="10个jQuery的标签页tabs和手风琴效果Accordion实现" src="https://simg.open-open.com/show/fcf490ceb90277865260b11c28ff2632.jpg" width="520" height="134" /></p> <h3><a title="gbin1.com" href="/misc/goto?guid=4958328424395985594" target="_blank">7. Elegant Accordion – jQuery And CSS3</a></h3> <p>一个使用简单的教程,帮助你创建优雅的手风琴效果。主要想法是鼠标悬浮时使用垂直的标签滑出</p> <p><img alt="10个jQuery的标签页tabs和手风琴效果Accordion实现" src="https://simg.open-open.com/show/0fe2d86f0155690ffa65ecca3ce6459f.jpg" width="520" height="134" /></p> <h3><a title="gbin1.com" href="/misc/goto?guid=4958185450095416024" target="_blank">8. Collapser – jQuery Plugin</a></h3> <p>一个非常轻量级的Collapse插件用来扩展或者收缩元素</p> <p><img alt="10个jQuery的标签页tabs和手风琴效果Accordion实现" src="https://simg.open-open.com/show/366c58193a0378c18872c34be2e6e9a2.jpg" width="520" height="134" /></p> <h3><a title="gbin1.com" href="/misc/goto?guid=4958328425940235304" target="_blank">9. Horizontal Accordion using the Tabs</a></h3> <p>非常容易使用标签页创建水平手风琴效果。使用内置的水平效果和一些CSS调整。你可以创建很大不同的外观。你可以设置mouseover的事件配置属性,这样直到mouseover面板才展现</p> <p><img alt="10个jQuery的标签页tabs和手风琴效果Accordion实现" src="https://simg.open-open.com/show/8e761fa2cca1d5b384ca1d58d5137e5d.jpg" width="520" height="134" /></p> <h3><a title="gbin1.com" href="/misc/goto?guid=4958328426738856210" target="_blank">10. Multiple Tabs and Accordion instances</a></h3> <p>自从jQuery Tools 1.1.0 就可以使用一个调用来实例多个手风琴tab。这里你可以看到5个不同的Tabs,其中3个镶套在第二个Tab中。</p> <p><img alt="10个jQuery的标签页tabs和手风琴效果Accordion实现" src="https://simg.open-open.com/show/8aceadcc75452f85f8338caaf0ca315c.jpg" width="520" height="134" /></p> <p>via <a title="gbin1.com" href="/misc/goto?guid=4958328427531490955" target="_blank">jquery4u.com </a></p> <p>来源: <a title="gbin1.com" href="/misc/goto?guid=4958328428332780257" target="_blank">分享10个jQuery的标签页tabs和手风琴效果Accordion实现</a></p>