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({
            width: 300,
            height: 300,
        });
    });
</script>

3. select 설정 accordion 현재pannel

<script type="text/javascript">
    $(function () {
        $("#menu").accordion({
            width: 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、accordionpanel 추가

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

8, accordionpanel 삭제

var pnl = $("#menu").accordion("getSelected");
if (pnl)
{
    var title = pnl.panel("options").title;
    $('#aa').accordion("remove",title);
}

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

바닐라 자바스크립트를 사용하여 아코디언 만들기

HTML, CSS 및 Vanilla Javascript를 사용하여 팩트 아코디언을 만들어 봅시다 먼저 아코디언의 HTML 뼈대를 만듭니다. 4개의 팩트 카드가 있습니다. 따라서 HTML은 아래와 같이 표시됩니다. [...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

jQueryEasyUI Accordion의 기본 사용

좋은 웹페이지 즐겨찾기