<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>Accordion（分类）</title>

    <meta http-equiv="keywords" content="学习,IT学习,好好学习">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

      <!-- 引入css文件，不限顺序 -->

    <link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link>

    <link rel="stylesheet" href="../themes/icon.css" type="text/css"></link>

      <!-- 引入js文件，有顺序限制 -->

    <script type="text/javascript" src="../js/jquery.min.js"></script>

    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>

    <!-- 所有的css文件和的有的js文件位置不限 -->

  </head>

  <body>

    <!-- 容器 -->

    <div

        id="accordionID"

        class="easyui-accordion"

        data-options="fit:false,border:true,animate:true,multiple:false,selected:-1"

        style="width:300px;height:400px;">   

        <!-- 面板 -->

        <div title="标题1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">

               北京

        </div>

        <div title="标题2" data-options="iconCls:'icon-reload'" style="padding:10px;">

            上海

        </div>

        <div title="标题3">

            广州

        </div>

        <div title="标题4" data-options="collapsible:true">

            深圳

        </div> 

    </div> 

    <script type="text/javascript">

        //当浏览器加载web页面时触发

        $(function(){

            //增加一个面板

            //$('selector').plugin('method', parameter);

            $("#accordionID").accordion("add",{

                "title" : "标题5",

                "iconCls" : "icon-add",

                "content" : "武汉",

                "selected" : false

            });

            //休息3秒

            window.setTimeout(function(){

                //移除标题1面板

                $("#accordionID").accordion("remove",0);

                //取消面板2选中

                $("#accordionID").accordion("unselect",0);

                //面板3选中

                $("#accordionID").accordion("select",1);

            },3000);

        });

    </script>

  </body>

</html>

easyUI之Accordion（分类）的更多相关文章

  1. 第二百零一节，jQuery EasyUI，Accordion(分类)组件

    jQuery EasyUI,Accordion(分类)组件 学习要点: 1.加载方式 2.容器属性 3.事件列表 4.方法列表 5.面板属性 本节课重点了解 EasyUI 中 Accordion(选项 ...

  2. accordion 分类

    <!--accordion--><h1>accordion 分类</h1><div id="accordionId" class=&quo ...

  3. EasyUI系列学习(十一)-Accordion(分类)

    一.加载 1.class加载 <div class="easyui-accordion" style="width:300px;height:200px" ...

  4. Accordion( 分类) 组件

    一． 加载方式 //class 加载方式<div id="box" class="easyui-accordion"style="width:3 ...

  5. Easyui之accordion修改Title样式，字体等

    .accordion{background:#fff;overflow:hidden;}.accordion .accordion-header{background:#efefef;border-t ...

  6. （八）easyUI之Accordion折叠面板：动态面板

    二.动态面板 数据库设计 函数设计:该函数用于获取某个节点的所有子节点 CREATE FUNCTION fn_getAddress_ChildList_test(rootId INT) RETURNS ...

  7. （七）easyUI之Accordion折叠面板：普通的静态面板

    一.普通的静态面板 前台 <%@ page language="java" contentType="text/html; charset=UTF-8" ...

  8. 本人为项目组制定的一份页面优化指南（easyui页面优化方案）

    #本人为项目组制定的一份页面优化指南(easyui页面优化方案) ##背景 这是一篇我之前为项目组制定的页面优化指南,主要是面向表单页面,典型的像[注册用户](https://passport.cnb ...

  9. Easyui + asp.net mvc + sqlite 开发教程（录屏）适合入门

    Easyui + asp.net mvc + sqlite 开发教程(录屏)适合入门 第一节: 前言(技术简介) EasyUI 是一套 js的前端框架 利用它可以快速的开发出好看的 前端系统 web ...

随机推荐

  1. 原创js脚本实现百度网盘任意文件强制下载

    代码: //get file list data var data=require("system-core:context/context.js").instanceForSys ...

  2. 【Distributed】互联网安全架构

    一.常见Web安全漏洞 1.1 XSS攻击 什么是XSS攻击手段 如何防御XSS攻击 1.2 SQL注入攻击 什么是SQL注入 SQL注入防攻击手段 MyBatis #与$区别 1.3 Http请求防 ...

  3. Miniconda虚拟环境管理工具命令方法

    创建制定Python版本的虚拟环境 conda create --name 虚拟环境名称 Python=3.7.3(版本号) 进入指定虚拟环境 conda activate 虚拟环境名称 退出虚拟环境 ...

  4. linux 使用 rz 上传和 sz下载 命令

    linux系统 root权限 lrzsz安装包 ①.在线安装-执行命令 yum install lrzsz  离线安装-需要提前准备好安装包 编译安装 root 账号登陆后,依次执行以下命令: tar ...

  5. shell 入门及常用命令

    1.shell 是什么 shell是指一种程序, 它是和linux沟通的桥梁, 这个应用程序提供了一个界面,用户通过这个界面访问操作系统内核的服务, Ken Thompson 的 sh 是第一种 Un ...

  6. SCU 4442 party 二分图最大点权独立集

    每个青蛙喝黑茶或者红茶或者都可以喝 M个矛盾关系 有矛盾的不能喝同种茶 但你可以花费Wi使得这个青蛙消除所有矛盾 把矛盾当作边 青蛙当作点 如果这两个青蛙只喝不同的一种茶就不建边 题目中保证了不存在奇 ...

  7. Vue入门（三）——模拟网络请求加载本地数据

    1.首先我们需要在webpack.dev.conf.js中const PORT = process.env.PORT && Number(process.env.PORT) 的后面追加 ...

  8. linux基础_关机重启注销

    1.关机重启命令 (1)shutdown shutdown -h now:表示立即关机 shutdown -h 1:表示1分钟后关机 shutdown -r  now:立即重启 (2)halt:就是直 ...

  9. linux系统相关文件和操作

    查看内核: uname -r [root@server0 ~]# uname -r -.el7.x86_64 [root@server0 ~]# 查看版本: cat  /etc/redhat-rele ...

  10. BZOJ 1867 [Noi1999]钉子和小球 DP

    想状态和钉子的位置如何匹配想了半天...后来发现不是一样的吗$qwq$ 思路:当然是$DP$啦 提交:>5次(以为无故$RE$,实则是先乘后除爆了$long\space long$) 题解: 若 ...