Jquery-UI—制作可折叠面板(accordion)
2016-12-09 23:11
381 查看
先来看一下效果:
使用jquery-ui制作如可折叠选项卡非常简单:
第一步:引入 jquery 和 jquery-ui 文件。
注 jquery-ui 要放在jquery引入之后。因为要引入自己的外部样式文件和脚本文件,以下是我的head部分代码。
第二步:写面板布局。
使用一个div来包裹我们的面板,这里给他一个id ="panel",h2是我们点击时面板伸缩和折叠,h2下方的div是当点击h2时面板展示的内容。样式可以自己加成想要的效果。这里为了区分我简单加入“面板内容1”等文本。
第三步:编写脚本。
这里我们同样要在dom加载完成之后开始运行我们的代码,选取到面板之后,使用jquery-ui中的 accordion() 方法即可实现可折叠面板功能。
示例代码地址:https://github.com/nongweiyi/csdnBlogProjects/tree/master/Jquery-UI/panel
您可以在这里下载Jquery库:https://github.com/nongweiyi/csdnBlogProjects/tree/master/Jquery-UI/libs
使用jquery-ui制作如可折叠选项卡非常简单:
第一步:引入 jquery 和 jquery-ui 文件。
注 jquery-ui 要放在jquery引入之后。因为要引入自己的外部样式文件和脚本文件,以下是我的head部分代码。
<head> <meta charset="UTF-8"> <title>可折叠面板</title> <link rel="stylesheet" href="style.css"> <script type="text/javascript" src="../jquery-1.8.3.js"></script> <script type="text/javascript" src="../jquery-ui-1.9.2.custom.js"></script> <script type="text/javascript" src="script.js"></script> </head>
第二步:写面板布局。
使用一个div来包裹我们的面板,这里给他一个id ="panel",h2是我们点击时面板伸缩和折叠,h2下方的div是当点击h2时面板展示的内容。样式可以自己加成想要的效果。这里为了区分我简单加入“面板内容1”等文本。
<body> <div id="panel"> <h2>标题1</h2> <div> 面板1内容 </div> <h2>标题2</h2> <div> 面板2内容 </div> <h2>标题3</h2> <div> 面板3内容 </div> </div> </body>
第三步:编写脚本。
这里我们同样要在dom加载完成之后开始运行我们的代码,选取到面板之后,使用jquery-ui中的 accordion() 方法即可实现可折叠面板功能。
$(function(){ $("#panel").accordion(); })
示例代码地址:https://github.com/nongweiyi/csdnBlogProjects/tree/master/Jquery-UI/panel
您可以在这里下载Jquery库:https://github.com/nongweiyi/csdnBlogProjects/tree/master/Jquery-UI/libs
相关文章推荐
- Jquery-UI—制作可折叠面板(accordion)
- jQuery Easy UI Accordion(可伸缩面板)组件
- jQuery Easy UI Accordion(可伸缩的面板)包
- 通过扩展jQuery UI Widget Factory实现手动调整Accordion高度
- jquery UI Accordion
- 关于JQuery-ui中提示面板的问题
- jquery插件ui中tabs实现选择面板效果
- jQuery UI Accordion的使用
- jQuery-UI实现折叠面板里的控件拖曳
- Jquery.Treeview+Jquery UI制作Web文件预览
- jquery.ui.accordion的修改(支持展开多个)
- jQuery插件2(拖拽draggable/放置droppable/排序sortable/面板折叠accordion/横向选项卡tabs/对话框dialog/menu/微调spinner/框提示)
- Accordion控件制作下拉面板菜单(静态数据)
- jQuery Easy UI Panel(面板)组件
- Jquery Accordion 折叠面板
- Accordion:可折叠面板的集合
- jquery-ui 手风琴组件Accordion学习(可全部折叠)
- Jquery UI accordion
- Accordion:可折叠面板的集合
- jquery.ui.accordion的修改(支持展开多个)