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 相关文章推荐
快速保存网页中所有图片的方法
Jun 23 Javascript
jquery清空textarea等输入框实现代码
Apr 22 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
Oct 22 Javascript
javascript实现数字验证码的简单实例
Feb 10 Javascript
jQuery插件制作之全局函数用法实例
Jun 01 Javascript
基于jQuery实现返回顶部实例代码
Jan 01 Javascript
js鼠标移动时禁止选中文字
Feb 19 Javascript
详解Vue.js入门环境搭建
Mar 17 Javascript
简单实现jQuery弹幕效果
May 06 jQuery
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 27 Javascript
修改vue源码实现动态路由缓存的方法
Jan 21 Javascript
React实现轮播效果
Aug 25 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
我的论坛源代码(八)
2006/10/09 PHP
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
php中3种方法删除字符串中间的空格
2014/03/10 PHP
Zend Framework基本页面布局分析
2016/03/19 PHP
PHP入门教程之图像处理技巧分析
2016/09/11 PHP
Yii2框架中日志的使用方法分析
2017/05/22 PHP
jQuery .tmpl(), .template()学习资料小结
2011/07/18 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
判断是否安装flash player及当前版本的JS代码
2013/08/08 Javascript
js判断上传文件的类型和大小示例代码
2013/10/18 Javascript
js实现DOM走马灯特效的方法
2015/01/21 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
2015/02/13 Javascript
Angular中$cacheFactory的作用和用法实例详解
2016/08/19 Javascript
Vue.js创建Calendar日历效果
2016/11/03 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
2017/05/17 Javascript
vue.js项目打包上线的图文教程
2017/11/16 Javascript
React Native自定义控件底部抽屉菜单的示例
2018/02/08 Javascript
24行JavaScript代码实现Redux的方法实例
2019/11/17 Javascript
[01:23:35]Ti4主赛事胜者组 DK vs EG 1
2014/07/19 DOTA
在Docker上部署Python的Flask框架的教程
2015/04/08 Python
用Eclipse写python程序
2018/02/10 Python
Python利用正则表达式实现计算器算法思路解析
2018/04/25 Python
Python3实现计算两个数组的交集算法示例
2019/04/03 Python
Python中一些深不见底的“坑”
2019/06/12 Python
Python使用socket_TCP实现小文件下载功能
2020/10/09 Python
意大利奢侈品多品牌集合店:TheDoubleF
2019/08/24 全球购物
物流管理专业应届生求职信
2013/11/21 职场文书
新郎新娘婚礼答谢词
2014/01/11 职场文书
访谈节目策划方案
2014/05/15 职场文书
银行金融服务方案
2014/06/11 职场文书
个人工作作风整改措施思想汇报
2014/10/13 职场文书
学习委员竞选稿
2015/11/20 职场文书
2016护理专业求职自荐书
2016/01/28 职场文书
Oracle数据库中通用的函数实例详解
2022/03/25 Oracle
Python+DeOldify实现老照片上色功能
2022/06/21 Python