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 调整select 位置的函数
Feb 21 Javascript
读jQuery之十一 添加事件核心方法
Jul 31 Javascript
这些年、我收集的JQuery代码小结
Aug 01 Javascript
javascript中方便增删改cookie的一个类
Oct 11 Javascript
jquery实现文本框数量加减功能的例子分享
May 10 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
Apr 13 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
Jun 19 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
Oct 24 Javascript
webstorm中vue语法的支持详解
May 09 Javascript
解决antd的Form组件setFieldsValue的警告问题
Oct 29 Javascript
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
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
2006/11/25 PHP
php实现的仿阿里巴巴实现同类产品翻页
2009/12/11 PHP
PHP 之Section与Cookie使用总结
2012/09/14 PHP
php删除字符串末尾子字符,删除开始字符,删除两端字符(实现代码)
2013/06/27 PHP
JS简单的图片放大缩小的两种方法
2013/11/11 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
2014/01/14 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
javascript弹出窗口中增加确定取消按钮
2016/06/24 Javascript
AngularJS之自定义服务详解(factory、service、provider)
2017/04/14 Javascript
Javascript Promise用法详解
2018/05/10 Javascript
Vue加载组件、动态加载组件的几种方式
2018/08/31 Javascript
爬虫利器Puppeteer实战
2019/01/09 Javascript
node.js制作一个简单的登录拦截器
2020/02/10 Javascript
[06:43]DAC2018 4.5 SOLO赛 Maybe vs Paparazi
2018/04/06 DOTA
Python lxml模块安装教程
2015/06/02 Python
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
浅谈python中set使用
2016/06/30 Python
使用Python从有道词典网页获取单词翻译
2016/07/03 Python
python smtplib模块实现发送邮件带附件sendmail
2018/05/22 Python
Python运维之获取系统CPU信息的实现方法
2018/06/11 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
Python中asyncio与aiohttp入门教程
2018/10/16 Python
Django中多种重定向方法使用详解
2019/07/17 Python
Python学习笔记之Zip和Enumerate用法实例分析
2019/08/14 Python
Python实现滑动平均(Moving Average)的例子
2019/08/24 Python
python实现单张图像拼接与批量图片拼接
2020/03/23 Python
Python性能测试工具Locust安装及使用
2020/12/01 Python
简单html5代码获取地理位置
2014/03/31 HTML / CSS
Expedia法国:全球最大在线旅游公司
2018/09/30 全球购物
SmartBuyGlasses意大利:购买太阳镜、眼镜和隐形眼镜
2018/11/20 全球购物
美国葡萄酒网上商店:Martha Stewart Wine Co.
2019/03/17 全球购物
2014年志愿者工作总结
2014/11/20 职场文书
中学生打架《检讨书》范文
2019/08/12 职场文书
导游词之山东红叶谷
2019/10/31 职场文书