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);
    }
  • 相关阅读:
    Alpha 冲刺 (4/10)
    福大软工1816 · 团队现场编程实战(抽奖系统)
    Alpha 冲刺 (3/10)
    Alpha 冲刺 (2/10)
    Alpha 冲刺 (1/10)
    福大软工 · 第七次作业
    福大软工 · 第八次作业(课堂实战)- 项目UML设计(团队)
    福大软工1816 · 第六次作业
    福大软工1816 · 第五次作业
    福大软工1816 · 第四次作业
  • 原文地址:https://www.cnblogs.com/libingql/p/2115710.html
Copyright © 2011-2022 走看看