Jquery组件easyUi实现手风琴(折叠面板)示例


Posted in Javascript onAugust 23, 2016

本文是为大家分享了Jquery easyUi手风琴效果,供大家参考,具体内容如下

效果图:

Jquery组件easyUi实现手风琴(折叠面板)示例

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Basic Accordion - jQuery EasyUI Demo</title>
 <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
 <link rel="stylesheet" type="text/css" href="../themes/icon.css">
 <link rel="stylesheet" type="text/css" href="demo.css">
 <script type="text/javascript" src="../jquery.min.js"></script>
 <script type="text/javascript" src="../jquery.easyui.min.js"></script>
</head>
<body>
 <h2>Basic Accordion</h2>
 <p>单击面板头部显示内容.</p>
 <div style="margin:20px 0 10px 0;"></div>
 <div class="easyui-accordion" style="width:500px;height:300px;">
 <div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
 <h3 style="color:#0099FF;">手风琴</h3>
 <p>手风琴组件.</p>
 </div>
 <div title="Help" data-options="iconCls:'icon-help'" style="padding:10px;">
 <p>The accordion allows you to provide multiple panels and display one or more at a time. Each panel has built-in support for expanding and collapsing. Clicking on a panel header to expand or collapse that panel body. The panel content can be loaded via ajax by specifying a 'href' property. Users can define a panel to be selected. If it is not specified, then the first panel is taken by default.</p> 
 </div>
 <div title="菜单" data-options="iconCls:'icon-search'" style="padding:10px;">
 <ul class="easyui-tree">
 <li>
  <span>食物</span>
  <ul>
  <li>
  <span>水果</span>
  <ul>
  <li>苹果</li>
  <li>橙子</li>
  </ul>
  </li>
  <li>
  <span>蔬菜</span>
  <ul>
  <li>西红柿</li>
  <li>胡萝卜</li>
  <li>洋白菜</li>
  <li>土豆</li>
  <li>莴苣</li>
  </ul>
  </li>
  </ul>
 </li>
 </ul>
 </div>
 </div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
css图片自适应大小
Nov 28 Javascript
利用jQuery接受和处理xml数据的代码(.net)
Mar 28 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
Dec 31 Javascript
javascript生成随机大小写字母的方法
Feb 20 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
Mar 10 Javascript
AngularJS进行性能调优的7个建议
Dec 28 Javascript
高效利用Angular中内置服务$http、$location等
Mar 22 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
Mar 02 Javascript
VUE element-ui 写个复用Table组件的示例代码
Nov 18 Javascript
vue-cli3全面配置详解
Nov 14 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
Oct 26 Javascript
如何通过vscode运行调试javascript代码
Jul 24 Javascript
Javascript将JSON日期格式化
Aug 23 #Javascript
Jquery组件easyUi实现选项卡切换示例
Aug 23 #Javascript
Jquery调用iframe父页面中的元素及方法
Aug 23 #Javascript
Jquery组件easyUi实现表单验证示例
Aug 23 #Javascript
利用JavaScript判断浏览器类型及版本
Aug 23 #Javascript
AngularJS使用ng-repeat指令实现下拉框
Aug 23 #Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
Aug 23 #Javascript
You might like
php Rename 更改文件、文件夹名称
2011/05/24 PHP
PHP中文件缓存转内存缓存的方法
2011/12/06 PHP
深入php函数file_get_contents超时处理的方法详解
2013/06/03 PHP
Smarty使用自定义资源的方法
2015/08/08 PHP
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
JS复制到剪贴板示例代码
2013/10/30 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
javascript实现依次输入input自动定焦
2014/12/23 Javascript
angularjs客户端实现压缩图片文件并上传实例
2015/07/06 Javascript
JavaScript 常见安全漏洞和自动化检测技术
2015/08/21 Javascript
jQuery Dialog对话框事件用法实例分析
2016/05/10 Javascript
angularjs中回车键触发某一事件的方法
2017/04/24 Javascript
Vuejs实现带样式的单文件组件新方法
2017/05/02 Javascript
jquery加载单文件vue组件的方法
2017/06/20 jQuery
JavaScript数据结构之双向链表定义与使用方法示例
2017/10/27 Javascript
一篇文章,教你学会Vue CLI 插件开发
2019/04/17 Javascript
优雅的处理vue项目异常实战记录
2019/06/05 Javascript
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
vuecli项目构建SSR服务端渲染的实现
2020/10/30 Javascript
pandas ix &amp;iloc &amp;loc的区别
2019/01/10 Python
python3.7 的新特性详解
2019/07/25 Python
解决python执行较大excel文件openpyxl慢问题
2020/05/15 Python
Python datetime模块使用方法小结
2020/06/18 Python
英国在线滑雪板和冲浪商店:The Board Basement
2020/01/11 全球购物
俄罗斯第一家篮球店:StreetBall
2020/07/30 全球购物
十八届三中全会学习方案
2014/02/16 职场文书
机电一体化求职信
2014/03/10 职场文书
投资意向书范本
2014/04/01 职场文书
南京青奥会口号
2014/06/12 职场文书
小学生民族团结演讲稿
2014/08/27 职场文书
个人诉讼委托书范本
2014/10/17 职场文书
工厂清洁工岗位职责
2015/02/14 职场文书
杨善洲观后感
2015/06/04 职场文书
2015年小学生暑假总结
2015/07/13 职场文书
廉洁自律准则学习心得体会
2016/01/13 职场文书
星际争霸 Light vs Action 一场把教主看到鬼畜的比赛
2022/04/01 星际争霸