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 相关文章推荐
JS调试必备的5个debug技巧
Mar 07 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
Apr 30 Javascript
jquery+html5制作超酷的圆盘时钟表
Apr 14 Javascript
js实现字符串转日期格式的方法
May 20 Javascript
js仿微信公众平台打标签功能
Apr 08 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
Jul 13 Javascript
js中this对象用法分析
Jan 05 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
Apr 29 Javascript
Vue组件基础用法详解
Feb 05 Javascript
vue-cli3中配置alias和打包加hash值操作
Sep 04 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 Javascript
Js类的构建与继承案例详解
Sep 15 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对大文件进行读取操作的实现代码
2013/01/23 PHP
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
浅析memcache启动以及telnet命令详解
2013/06/28 PHP
yii2学习教程之5种内置行为类详解
2017/08/03 PHP
tp5(thinkPHP5框架)使用DB实现批量删除功能示例
2019/05/28 PHP
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
2013/04/24 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
2013/06/04 Javascript
简单选项卡 js和jquery制作方法分享
2014/02/26 Javascript
jquery实现通用版鼠标经过淡入淡出效果
2014/06/15 Javascript
node.js中的fs.utimesSync方法使用说明
2014/12/15 Javascript
JavaScript数组对象赋值用法实例
2015/08/04 Javascript
jQuery实现的登录浮动框效果代码
2015/09/26 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
2015/11/18 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
JavaScript创建对象的七种方式(推荐)
2017/06/26 Javascript
vue中各组件之间传递数据的方法示例
2017/07/27 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
2018/01/05 Javascript
Vue.js 表单控件操作小结
2018/03/29 Javascript
js合并两个数组生成合并后的key:value数组
2018/05/09 Javascript
Python实现将16进制字符串转化为ascii字符的方法分析
2017/07/21 Python
windows下python和pip安装教程
2018/05/25 Python
获取django框架orm query执行的sql语句实现方法分析
2019/06/20 Python
利用Python代码实现一键抠背景功能
2019/12/29 Python
Python利用逻辑回归模型解决MNIST手写数字识别问题详解
2020/01/14 Python
css3.0 图形构成实例练习一
2013/03/19 HTML / CSS
我们是伦敦女孩:WalG
2018/01/08 全球购物
基层干部十八大感言
2014/01/19 职场文书
运动会领导邀请函
2014/02/05 职场文书
八项规定整改措施
2014/02/12 职场文书
教师节商场活动方案
2014/02/13 职场文书
求职简历自我评价范例
2014/03/12 职场文书
学习型班组申报材料
2014/05/31 职场文书
爱心募捐感谢信
2015/01/22 职场文书
结婚通知短信大全
2015/04/17 职场文书
学雷锋团日活动总结
2015/05/06 职场文书
2015年环卫处个人工作总结
2015/07/27 职场文书