zoukankan      html  css  js  c++  java
  • jQueryEasyUI Accordion基本使用

    html代码:

    <div id="menu">
    <div title="Title1">
    content1
    </div>
    <div title="Title2">
    content2
    </div>
    <div title="Title3">
    content3
    </div>
    </div>

    1、accordion

    <link type="text/css" rel="stylesheet" href="jquery-easyui-1.2.3/themes/default/easyui.css">
    <link type="text/css" rel="stylesheet" href="jquery-easyui-1.2.3/themes/icon.css">
    <script type="text/javascript" src="jquery-easyui-1.2.3/jquery-1.6.2.min.js">
    <script type="text/javascript" src="jquery-easyui-1.2.3/jquery.easyui.min.js">
    <script type="text/javascript" src="jquery-easyui-1.2.3/locale/easyui-lang-zh_CN.js">
    <script type="text/javascript">
    $(
    function () {
    $(
    "#menu").accordion();
    });
    </script>

    2、设置accordion的Width、Height

    <script type="text/javascript">
    $(
    function () {
    $(
    "#menu").accordion({
    300,
    height:
    300,
    });
    });
    </script>

    3、select设置accordion当前pannel

    <script type="text/javascript">
    $(
    function () {
    $(
    "#menu").accordion({
    300,
    height:
    300,
    });

    $(
    "#menu").accordion("select", "Title2");
    });
    </script>

    4、fit

    fit为true时,width及height无效

    <script type="text/javascript">
    $(
    function () {
    $(
    "#menu").accordion({
    fit:
    true
    });
    });
    </script>

    <div id="menu" fit="true">
    <div title="Title1">
    content1
    </div>
    <div title="Title2">
    content2
    </div>
    <div title="Title3">
    content3
    </div>
    </div>

    5、border

    取消accordion边界线border

    <div id="menu" border="false">
    <div title="Title1">
    content1
    </div>
    <div title="Title2">
    content2
    </div>
    <div title="Title3">
    content3
    </div>
    </div>

    6、panel icon

    <div id="menu">
    <div title="Title1" iconCls="icon-ok">
    content1
    </div>
    <div title="Title2">
    content2
    </div>
    <div title="Title3">
    content3
    </div>
    </div>

    7、添加accordion panel

    $("#menu").accordion("add",{
    title:
    "New Title",
    content:
    "New Content",
    iconCls:
    "icon-ok"
    });

    8、删除accordion panel

    var pnl = $("#menu").accordion("getSelected");
    if (pnl)
    {
    var title = pnl.panel("options").title;
    $(
    '#aa').accordion("remove",title);
    }
  • 相关阅读:
    Object.defineProperty 监听对象属性变化
    Object.create(null) 和 {} 区别
    Vue 源码 基础知识点
    js setTimeout和setInterval区别
    Fiddler抓包工具使用方法
    使用 Jmeter 做 Web 接口测试
    Python 操作 SQL 数据库 (ORCAL)
    python连接MySQL数据库问题
    抓包工具Charles基本用法
    Python数据分析之pandas学习
  • 原文地址:https://www.cnblogs.com/libingql/p/2115710.html
Copyright © 2011-2022 走看看