jqueryaccordiontree菜单栏框架示例资源-CSDN文库

共141个文件

gif：68个

js：26个

css：16个

jquery

accordion

jquery

4星 · 超过85%的资源需积分: 9 70 浏览量 2010-04-29 11:09:18 上传评论收藏 502KB RAR 举报

jQuery Accordion是一款非常流行的JavaScript插件，用于创建可折叠的面板式布局，常用于构建菜单栏、信息分类或导航结构。在本示例中，我们将深入探讨如何利用jQuery Accordion来构建一个树形菜单栏框架。让我们理解jQuery Accordion的基本概念。Accordion组件允许用户点击面板标题来展开或收起内容区域，只显示一个面板内容，其他面板默认保持折叠状态。这种交互方式既节省空间，又能提供清晰的层级关系。在jQuery UI库中，Accordion是内置的一个组件。要使用它，你需要在HTML文件中引入jQuery库和jQuery UI库的CSS及JS文件。通常，这会包括以下代码： ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script> ``` 接下来，创建HTML结构，每个折叠面板由一个`<h3>`标题和一个`<div>`内容区域组成。例如： ```html <div id="accordion"> <h3>标题1</h3> <div> 内容1 </div> <h3>标题2</h3> <div> 内容2 </div>  </div> ``` 然后，使用jQuery来初始化Accordion组件： ```javascript $(function() { $("#accordion").accordion(); }); ``` 上述代码会将id为"accordion"的元素转换为Accordion组件。如果想要自定义行为，如改变默认的折叠效果，可以通过设置选项来实现。例如，若要使所有面板同时打开，可以使用`collapsible: true`和`multiple: true`： ```javascript $(function() { $("#accordion").accordion({ collapsible: true, multiple: true }); }); ``` 现在，关于jQuery Accordion的树形菜单栏扩展，我们可以结合使用jQuery UI的Accordion和Treeview插件。Treeview用于展示层次化的数据，而Accordion则提供折叠效果。在HTML结构中，我们需要添加额外的类名和属性来表示树节点： ```html <ul id="treeview-accordion"> <li> <span class="folder">父节点1</span> <ul> <li><span>子节点1.1</span></li> <li><span>子节点1.2</span></li> </ul> </li>  </ul> ``` 接着，为树形结构和Accordion功能分别初始化： ```javascript $(function() { $("#treeview-accordion").treeview({ animated: "medium", collapsed: true }).accordion({ header: "> li > span", fillHeight: true, collapsible: true }); }); ``` 这样，我们得到了一个既有折叠效果又有树形结构的菜单栏框架。你可以根据实际需求调整样式、动画效果和交互行为，以实现更丰富的用户体验。总结一下，jQuery Accordion是一个强大的工具，可以帮助我们构建交互式的折叠菜单栏。结合Treeview插件，我们可以创建出层次分明、易于导航的树形菜单。通过自定义选项和事件处理，可以进一步定制其外观和功能，以适应各种项目需求。在这个示例中，你可以学习到如何将简单的HTML结构转换为功能完善的菜单栏框架。

资源推荐

资源详情

资源评论

收起资源包目录

jquery accordion tree 菜单栏框架示例（141个子文件）

.classpath 362B

jquery-ui-1.8rc3.custom.css 30KB

jquery.ui.theme.css 18KB

ui.theme.css 18KB

demos.css 14KB

demo.css 4KB

jquery.treeview.css 3KB

tipswindown.css 1KB

jquery.ui.tabs.css 1KB

style.css 969B

jquery.ui.accordion.css 807B

screen.css 623B

jquery.ui.base.css 388B

ui.base.css 261B

jquery.ui.all.css 63B

jquery.ui.all.css 61B

tu1.gif 14KB

main_01.gif 9KB

treeview-default-line.gif 2KB

treeview-gray-line.gif 2KB

treeview-red-line.gif 2KB

treeview-black-line.gif 2KB

main_11.gif 2KB

main_46.gif 1KB

main_40.gif 1KB

main_52.gif 1KB

main_50.gif 1KB

main_48.gif 1KB

treeview-famfamfam.gif 1KB

main_34_1.gif 1KB

main_34.gif 1KB

treeview-gray.gif 1KB

treeview-red.gif 1KB

treeview-default.gif 1KB

treeview-black.gif 1KB

main_07.gif 1KB

main_19.gif 1KB

plus.gif 841B

minus.gif 837B

treeview-famfamfam-line.gif 807B

main_29.gif 785B

main_05.gif 760B

main_06.gif 632B

main_13.gif 615B

main_03.gif 598B

user.gif 596B

main_17.gif 589B

main_15.gif 589B

main_21.gif 586B

main_10.gif 549B

main_58.gif 524B

main_56.gif 517B

main_60.gif 514B

main_54.gif 506B

pass.gif 500B

2.gif 495B

1.gif 483B

main_62.gif 454B

quit.gif 426B

tab_bg.gif 376B

tb.gif 368B

main_32.gif 175B

main_71.gif 134B

main_30.gif 116B

file.gif 110B

folder.gif 106B

folder-closed.gif 105B

del.gif 96B

main_69.gif 96B

add.gif 91B

edit.gif 91B

main_74.gif 85B

main_31.gif 83B

bg.gif 64B

main_72.gif 58B

sj.gif 58B

main_711.gif 55B

desc.gif 54B

asc.gif 54B

main_43.gif 54B

main_35.gif 54B

main_28.gif 54B

list.html 13KB

top.html 5KB

center.html 958B

down.html 716B

jquery-ui-1.8rc3.custom.min.js 209KB

jquery-1.4.2.js 160KB

jquery.js 98KB

jquery.js 94KB

jquery.js 92KB

jquery.layout.js 81KB

jquery-1.4.2.min.js 70KB

jquery.js 56KB

jquery-latest.js 53KB

共 141 条

<!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>无标题文档</title> <style type="text/css">  </style> <script> var highlightcolor='#d5f4fe'; //此处clickcolor只能用win系统颜色代码才能成功,如果用#xxxxxx的代码就不行,还没搞清楚为什么:( var clickcolor='#51b2f6'; function changeto(){ source=event.srcElement; if (source.tagName=="TR"||source.tagName=="TABLE") return; while(source.tagName!="TD") source=source.parentElement; source=source.parentElement; cs = source.children; //alert(cs.length); if (cs[1].style.backgroundColor!=highlightcolor&&source.id!="nc"&&cs[1].style.backgroundColor!=clickcolor) for(i=0;i<cs.length;i++){ cs[i].style.backgroundColor=highlightcolor; } } function changeback(){ if (event.fromElement.contains(event.toElement)||source.contains(event.toElement)||source.id=="nc") return if (event.toElement!=source&&cs[1].style.backgroundColor!=clickcolor) //source.style.backgroundColor=originalcolor for(i=0;i<cs.length;i++){ cs[i].style.backgroundColor=""; } } function clickto(){ source=event.srcElement; if (source.tagName=="TR"||source.tagName=="TABLE") return; while(source.tagName!="TD") source=source.parentElement; source=source.parentElement; cs = source.children; //alert(cs.length); if (cs[1].style.backgroundColor!=clickcolor&&source.id!="nc") for(i=0;i<cs.length;i++){ cs[i].style.backgroundColor=clickcolor; } else for(i=0;i<cs.length;i++){ cs[i].style.backgroundColor=""; } } </script> </head> <body> <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="30"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="24" bgcolor="#353c44"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="6%" height="19" valign="bottom"><div align="center"><img src="images/tb.gif" width="14" height="14" /></div></td> <td width="94%" valign="bottom"><span class="STYLE1"> 管理人员基本信息列表</span></td> </tr> </table></td> <td><div align="right"><span class="STYLE1"> <input type="checkbox" name="checkbox11" id="checkbox11" /> 全选   <img src="images/add.gif" width="10" height="10" /> 添加   <img src="images/del.gif" width="10" height="10" /> 删除   <img src="images/edit.gif" width="10" height="10" /> 编辑  </span><span class="STYLE1">  </span></div></td> </tr> </table></td> </tr> </table></td> </tr> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#a8c7ce" onmouseover="changeto()" onmouseout="changeback()"> <tr> <td width="4%" height="20" bgcolor="d3eaef" class="STYLE10"><div align="center"> <input type="checkbox" name="checkbox" id="checkbox" /> </div></td> <td width="10%" height="20" bgcolor="d3eaef" class="STYLE6"><div align="center"><span class="STYLE10">用户名</span></div></td> <td width="15%" height="20" bgcolor="d3eaef" class="STYLE6"><div align="center"><span class="STYLE10">用户角色</span></div></td> <td width="14%" height="20" bgcolor="d3eaef" class="STYLE6"><div align="center"><span class="STYLE10">联系方式</span></div></td> <td width="16%" height="20" bgcolor="d3eaef" class="STYLE6"><div align="center"><span class="STYLE10">IP地址</span></div></td> <td width="27%" height="20" bgcolor="d3eaef" class="STYLE6"><div align="center"><span class="STYLE10">详细描述</span></div></td> <td width="14%" height="20" bgcolor="d3eaef" class="STYLE6"><div align="center"><span class="STYLE10">基本操作</span></div></td> </tr> <tr> <td height="20" bgcolor="#FFFFFF"><div align="center"> <input type="checkbox" name="checkbox2" id="checkbox2" /> </div></td> <td height="20" bgcolor="#FFFFFF" class="STYLE6"><div align="center"><span class="STYLE19">admin</span></div></td> <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">系统管理员</div></td> <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">13913612548</div></td> <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">192.168.0.124</div></td> <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">用户可以对系统的所有操作进行管理...</div></td> <td height="20" bgcolor="#FFFFFF"><div align="center" class="STYLE21">删除 | 查看</div></td> </tr> <tr> <td height="20" bgcolor="#FFFFFF"><div align="center"> <input type="checkbox" name="checkbox3" id="checkbox3" /> </div></td> <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">admin</div></td> <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">系统管理员</div></td> <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">13913612548</div></td> <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">192.168.0.124</div></td> <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">用户可以对系统的所有操作进行管理...</div></td> <td height="20" bgcolor="#FFFFFF"><div align="center"><span class="STYLE21">删除 | 查看</span></div></td> </tr> <tr> <td height="20" bgcolor="#FFFFFF"><div align="center"> <input type="checkbox" name="checkbox4" id="checkbox4" /> </div></td> <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">admin</div></td> <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">系统管理员</div></td> <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">13913612548</div></td> <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">192.168.0.124</div></td> <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">用户可以对系统的所有操作进行管理...</div></td> <td height="20" bgcolor="#FFFFFF"><div align="center"><span class="STYLE21">删除 | 查看</span></div></td> </tr> <tr> <td height="20" bgcolor="#FFFFFF"><div align="center"> <input type="checkbox" name="checkbox5" id="checkbox5" /> </div></td> <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">admin</div></td> <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">系统管理员</div></td> <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">13913612548</div></td> <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">192.168.0.124</div></td> <td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="center">用户可以对系统的所有操作进行管理...</div></td> <td height="20" bgcolor="#FFFFFF"><div align="center"><span class="STYLE21">删除 | 查看</span></div></td> </tr> <tr>

评论收藏

内容反馈