Как разделить гармошку jQuery UI на 2 столбца - PullRequest
Новая
       11

Как разделить гармошку jQuery UI на 2 столбца

1 голос
/ 27 марта 2012

Я хотел бы разделить аккордеон jQuery UI на 2 столбца, но я не могу понять, как это сделать. Когда я ставлю 

div style="float:left; width:50%;"

аккордеон больше не работает должным образом. Я настроил это демо http://jqueryui.com/demos/accordion/collapsible.html

Может кто-нибудь помочь мне, пожалуйста? 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Accordion - Collapse content</title>
    <script src="jquery-1.7.1.js"></script>
    <script src="ui/jquery.ui.core.js"></script>
    <script src="ui/jquery.ui.widget.js"></script>
    <script src="ui/jquery.ui.accordion.js"></script>
    <script>
    $(function() {
        $( "#accordion" ).accordion({
            collapsible: true,
            animated: false,
            active: false,
            autoHeight: false
        });
    });
    </script>
</head>

<body>
<div class="demo">
    <div id="accordion">

    <div style="float:left; width:50%;">
        <li><a href="#">TITLE 1</a>
        <p>TEXT 1</p></li>

        <li><a href="#">TITLE 2</a>
        <p>TEXT 2</p></li>
    </div>

    <div style="float:left; width:50%;">
        <li><a href="#">TITLE 3</a>
        <p>TEXT 3</p></li>

        <li><a href="#">TITLE 4</a>
        <p>TEXT 4</p></li>
    </div>

    </div><!-- End accordion -->
</div><!-- End demo -->

</body>
</html>

1 Ответ

0 голосов
/ 08 июня 2012

Мне удалось разделить аккордеон на две части, хотя и немного окольным путем.Возможно, есть лучший способ сделать это, но я пока не знаю ни одного.

<div id="accordion">    
    <h3><a href="#">Top Accordion Content Area</a></h3>
        <div id="TopA">
            <div id="Top_A_left">      
                <p><b>Content for left section goes here</b></p>
            </div>  

            <div id="Top_A_right">
                <p><b>Content for right section goes here</b></p>
            </div>

        </div>
 ...[rest of the accordion code goes here]...

И, конечно, вы можете настроить свой CSS, чтобы получить нужный макет.Я бы порекомендовал присоединить идентификатор к DIV, в котором содержатся оба раздела, а затем настроить некоторые параметры стиля в CSS, иначе вы можете получить слишком много или недостаточно заполнений.

CSS: 

#Top_A_Left 
{
   width:20%;
   float:left;
}

#Top_A_Right
{
   width:auto;
   float:left;
}
...