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);
    }
  • 相关阅读:
    TCP/IP详解学习笔记
    C++知识库
    C++中基类的析构函数为什么要用virtual虚析构函数
    秒杀多线程面试题系列
    很详细全部的WinDbg学习资料
    Ubuntu中libprotobuf版本冲突的解决方案
    Windows系统中内存泄露与检测工具及方法
    Ubuntu脚本修改IP信息
    【Qt】Qt Quick 之 QML 与 C++ 混合编程详解
    分布式系统消息中间件——RabbitMQ的使用基础篇
  • 原文地址:https://www.cnblogs.com/libingql/p/2115710.html
Copyright © 2011-2022 走看看