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的使用</title>
    <!-- 导入jquery核心类库 -->
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <!-- 导入easyui类库 -->
    <link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../css/default.css">
    <script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
  </head>
  <body class="easyui-layout">
    <div data-options="region:'north',title:'你我他学习吧-学习Java的好博客！'" style="height:100px"></div>
    <div data-options="region:'west',title:'菜单导航'" style="width:200px">
      <!--折叠面板-->
      <div class="easyui-accordion" data-options="fit:true">
        <div data-options="title:'基础菜单'">面板一</div>
        <div data-options="title:'系统菜单'">面板二</div>
      </div>
    </div>
    <div data-options="region:'center',title:'中部区域'"></div>
    <div data-options="region:'east',title:'东部区域'" style="width:100px"></div>
    <div data-options="region:'south',title:'南部区域'" style="height:100px"></div>
  </body>
</html>

以上这篇jQuery EasyUI 折叠面板accordion的使用实例(分享)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • Jquery组件easyUi实现手风琴(折叠面板)示例
  • jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
  • jQuery Easyui使用（二）之可折叠面板动态加载无效果的解决方法
  • jQuery实现的简单折叠菜单(折叠面板)效果代码
  • jquery实现的Accordion折叠面板效果代码
  • jQuery之折叠面板的深入解析
  • 微信小程序实现折叠面板
赞 (0)

相关推荐

  • jQuery之折叠面板的深入解析

    jQuery之折叠面板的深入解析

    1:折叠面板可以将不同分类的内容分别放在不同的面板中,这些面板在页面中层叠摆放,用户可以通过单击各个面板的标题来展开该面板,查看面板的内容,与此同时,将自动折叠隐藏其他面板$(selector).accordion(options);options可以选择的属性为:disabled, active, animated, autoHeight, clearStyle, collapsible, event, fillSpace, header, icons, navigation, navigat

  • jQuery Easyui使用（二）之可折叠面板动态加载无效果的解决方法

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

  • 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使用(一)之可折叠面板的布局手风琴菜单

    先给大家看下效果图,效果图展示如下: 关键代码如下所示: <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实现的简单折叠菜单(折叠面板)效果代码

    jQuery实现的简单折叠菜单(折叠面板)效果代码

    本文实例讲述了jQuery实现的简单折叠菜单(折叠面板)效果代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的折叠菜单,可展开一些内容,实际上称它为一个面板比较好,是一个折叠面板,使用了jQuery1.6.2插件. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-toggle-zd-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD X

  • jquery实现的Accordion折叠面板效果代码

    jquery实现的Accordion折叠面板效果代码

    本文实例讲述了jquery实现的Accordion折叠面板效果代码.分享给大家供大家参考.具体如下: 这是一款Accordion折叠面板,折叠菜单代码,简单Accordion效果,采用CSS与jQuery实现,鼠标点击后展开,再次点击后折叠起来.是网上很常用的手风琴效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-Simple-Accordion-style-codes/ 具体代码如下: <!DOCTYPE html PUBL

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

    微信小程序实现折叠面板

    本文实例为大家分享了微信小程序MUI折叠面板的具体代码,供大家参考,具体内容如下 实现原理 通过控制详情部分的显示隐藏,来实现折叠效果,同时切换右侧向下箭头. 效果图 WXML <!--pages/accordion/accordion.wxml--> <view class="tui-accordion-content"> <view class="tui-menu-list {{isShowFrom1 ? 'tui-shangjiantou'

  • 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的使用

  • jQuery EasyUI 选项卡面板tabs的使用实例讲解

    1. 对选项卡面板区域 div 设置 class="easyui-tabs" 2. 对选项卡面板区域添加多个 div,每个 div 就是一个选项卡(每个面板一定设置 title) 3. 设置面板 fit 为 true ,自适应父容器大小 4. 设置选项卡 closable 为 true ,添加可关闭按钮 5.通过超链接,点击后,添加新的选项卡 语法: 页面对象.easyui 插件(方法名, 参数) ; <!DOCTYPE html> <html> <hea

  • jQuery EasyUI Panel面板组件使用详解

    panel面板组件,跟前面的组件用法几乎都差不多,也是从设置一些面板属性.操作面板触发的事件.我们可针对面板对象的操作方法这三个点去学习. 后面有一些组件要依赖于这个组件. 还有一点跟前面不同的就是面板内容可以请求远程数据. 示例: <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <scr

  • jQuery EasyUI Layout实现tabs标签的实例

    jQuery EasyUI Layout实现tabs标签的实例

    jQuery EasyUI Layout实现tabs标签的实例 一.概述: 1.引入jquery.js与easyUi相关文件 2.效果如图: 二.创建Layout主页: <%@ page language="java" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!D

  • jquery easyui中treegrid用法的简单实例

    jquery easyui中treegrid用法的简单实例

    项目需求如下图,在服务端返回的json数据中,要经过JS处理,添加复选框,并且复选框需响应JS操作.在easyui 的treegrid中,没有找到现成的插件,自己需要修改整理,代码如下 复制代码 代码如下: <table class="easyui-treegrid" style="width:700px;height:250px"  url='control_node_json?group_id=$info[id]&access_node=$_REQ

  • jquery插件EasyUI中form表单提交实例分享

    jquery插件EasyUI中form表单提交实例分享

    之前用AJax给Controller传递参数,然后再调用服务端的方法对数据库进行更改,今天碰到一个新的方法,就是表单的提交,这样可以省去AJax传参. 当表单提交后,我们可以获取表单上控件中的值,然后再调用服务端的方法对数据库进行更改.下面的一张截图是具体的业务需求. 一.要实现的功能:从上面这个表单中,获取控件中的值,然后传递给后台.下面是表单代码. 二.表单代码 <div id="Editwin" class="easyui-window" title=&

  • jQuery EasyUI 入门必看

    jQuery EasyUI 入门必看

    学习要点: 1.什么是 jQuery EasyUI 2.学习 jQuery EasyUI 的条件 3.jQuery EasyUI 的功能和优势 4.其他的 UI 插件 5.是否兼容低版本 IE 6.下载及运行 jQuery EasyUI 在正式了解 jQuery EasyUI 之前,我们先了解一下什么是 jQuery EasyUI.它的学习条件.市场上的同类产品.所支持的浏览器等.然后配置运行 jQuery EasyUI. 一．什么是 jQuery EasyUI jQuery EasyUI 是一

  • jQuery EasyUI Accordion可伸缩面板组件使用详解

    jQuery EasyUI Accordion可伸缩面板组件使用详解

    Accordion 可伸缩面板组件,基于panel,示例如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type=

随机推荐