easyui学习笔记10—手风琴格子始终展开和多个格子展开

始终打开有时候可能会很管用，其实就是一个设置问题。这里就不再介绍引用的资源了，这里只看看html是怎么写的。

1.html代码

<body>
    <h2>Basic Accordion</h2>
    <div class="demo-info">
        <div class="demo-tip icon-tip"></div>
        <div>Click on panel header to show its content.</div>
    </div>
    <div style="margin:10px 0;"></div>
    <div class="easyui-accordion" style="width:500px;height:300px;">
        <div title="Top Panel" data-options="iconCls:'icon-search',collapsed:false,collapsible:false" style="padding:10px;">
            <input class="easyui-searchbox" prompt="Enter something here" style="width:300px;height:25px;">
        </div>
        <div title="About" data-options="selected:true" style="padding:10px;">
            <h3 style="color:#0099FF;">Accordion for jQuery</h3>
            <p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
        </div>
        <div title="Title1" style="padding:10px">
            <p>Content1</p>
        </div>
        <div title="Title2" style="padding:10px">
            <p>Content2</p>
        </div>        
    </div>
</body>
data-options="iconCls:'icon-search',collapsed:false,collapsible:false"

这个属性设置就是当前状态是关闭false，当前可展开性为false。下面是效果图

可以看到第一个格子始终是展开的没有右边那个展开的图标“《”。

 

2.前面我们看到的手风琴都是始终只有一个可以展开的格子，开可以设置有多个展开的格子。这里看看html代码是怎么写的

    <div class="easyui-accordion" data-options="multiple:true" style="width:500px;">
        <div title="Language" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
            <p>A programming language is a formal language designed to communicate instructions to a machine, particularly a computer. Programming languages can be used to create programs that control the behavior of a machine and/or to express algorithms precisely.</p>
        </div>
        <div title="Java" style="padding:10px">
            <p>Java (Indonesian: Jawa) is an island of Indonesia. With a population of 135 million (excluding the 3.6 million on the island of Madura which is administered as part of the provinces of Java), Java is the world's most populous island, and one of the most densely populated places in the world.</p>
        </div>
        <div title="C#" style="padding:10px;">
            <p>C# is a multi-paradigm programming language encompassing strong typing, imperative, declarative, functional, generic, object-oriented (class-based), and component-oriented programming disciplines.</p>
        </div>
        <div title="Ruby" style="padding:10px">
            <p>A dynamic, reflective, general-purpose object-oriented programming language.</p>
        </div>
        <div title="Fortran" stylep="padding:10px">
            <p>Fortran (previously FORTRAN) is a general-purpose, imperative programming language that is especially suited to numeric computation and scientific computing.</p>
        </div>
    </div>

这里起作用的就一句，data-options="multiple:true"这个就是让手风琴可以多个展开的效果。如下图

 

posted @ 2014-01-23 22:37  nd  阅读(5303)  评论(1)  编辑  收藏  举报