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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 轻松实现jquery手风琴效果

    轻松实现jquery手风琴效果

    为大家讲解的JQuery动画特效为手风琴,废话不多说,先看最终实现效果图. 一.实现原理分析 对应的立体图: 二. HTML代码分析 <body> <div id="container"> <ul id="content"> <li class="first"> <h3>真</h3> <div><img src="images/0.jpg"

  • jquery实现手风琴效果

    jquery实现手风琴效果

    本文实例讲述了jquery实现手风琴效果的代码.分享给大家供大家参考.具体如下: 效果过程就是当鼠标覆盖图片时,这张图片的宽度变大,其他兄弟图片宽度变小,效果如下: 具体代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&qu

  • 基于jQuery实现图片推拉门动画效果的两种方法

    ''推拉门''动效也可以称作"手风琴"效果,大多数效果实现的思路基本是一样的,下面介绍两种方法,一种是通过改变图片的偏移位置实现移动,另一种是通过遍历背景图片后改变图片的宽度实现变换. 实现方法一:改变图片宽度 html+css代码 <body> <div class="box"> <ul> <!-- <li>![](images/slidepic2.jpg)</li> --> <li&g

  • 基于Jquery代码实现手风琴菜单

    基于Jquery代码实现手风琴菜单

    先给大家展示效果图: 先看页面代码,列表的嵌套: <div id="menuDiv"> <ul id="menu"> <li class="parentLi"> <span>B</span> <ul class="childrenUl"> <li class="childrenLi"><span>C</sp

  • jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单

    jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单

    先给大家看下效果图,效果图展示如下: 关键代码如下所示: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>首页</title> &l

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

    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&qu

  • Jquery组件easyUi实现表单验证示例

    Jquery组件easyUi实现表单验证示例

    本文实例为大家分享了Jquery easyUi表单验证实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic Form - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" hr

  • 微信小程序实现手风琴折叠面板

    微信小程序实现手风琴折叠面板

    本文实例为大家分享了微信小程序实现手风琴折叠面板的具体代码,供大家参考,具体内容如下 目的:折叠面板默认显示其中一项,利用toggle实现元素的显示和隐藏例如:页面中有四个可折叠元素,默认元素1显示,其余项目内容隐藏:当点击元素2时,元素2显示,其余项目内容隐藏.初始效果如图: 1.wxml部分代码如下: <view class='item' wx:for="{{items}}" wx:key="index">     <view class='t

  • Vue页面内公共的多类型附件图片上传区域并适用折叠面板(示例代码)

    Vue页面内公共的多类型附件图片上传区域并适用折叠面板(示例代码)

    在前端项目中,附件上传是很常用的功能,几乎所有的app相关项目中都会使用到,一般在选择使用某个前端UI框架时,可以查找其内封装好的图片上传组件,但某些情况下可能并不适用于自身的项目需求,本文中实现的附件上传区域支持超多类型附件分类型上传,并且可根据特定条件具体展示某些类型的附件上传,本文中是直接摘自具体的页面,后面会抽时间单独封装出来一个附件上传的组件. 一.Vue页面内附件展示区域代码 <div class="retuinfo"> <div class="

  • Jquery组件easyUi实现选项卡切换示例

    Jquery组件easyUi实现选项卡切换示例

    本文实例为大家分享了Jquery easyUi选项卡切换效果,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic Tabs - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" hre

  • jQuery组件easyui基本布局实现代码

    jQuery组件easyui基本布局实现代码

    本文实例为大家分享了 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic Layout - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../themes/default/easyu

  • jQuery组件easyui对话框实现代码

    jQuery组件easyui对话框实现代码

    本文实例为大家分享了 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic Dialog - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../themes/default/easyu

  • Jquery插件easyUi实现表单验证示例

    Jquery插件easyUi实现表单验证示例

    要实现的功能:在做添加学生信息的时候,利用easyui的验证功能判断 学号是否重复和学号只能为数字 最终效果如下图: 但在做这个的过程中,遇到了一系列的问题: 扩展validatebox的验证方法,最开始的验证代码如下: //学号格式只能为数字 ****//这里没有问题**** number: {//value值为文本框中的值 validator: function (value) { var reg = /^[0-9]*$/; return reg.test(value); }, messag

  • Jquery插件easyUi表单验证提交(示例代码)

    复制代码 代码如下: <form id="myForm" method="post">  <table align="center" style="width:400px;height:auto;margin-top: 20px">           <tr>                                           <td align="righ

  • jQuery EasyUI 折叠面板accordion的使用实例(分享)

    1.对折叠面板区域 div 设置 class="easyui-accordion" 2.在区域添加多个 div, 每个 div 就是一个面板 (每个面板一定要设置 title 属性). 3.设置面板属性 fit 为 true,自适应父容器大小 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>easyui-折叠面板accordion的使用

随机推荐