Нужна помощь в создании неразборного раздела с помощью мобильного jQuery - PullRequest
Новая
       1

Нужна помощь в создании неразборного раздела с помощью мобильного jQuery

0 голосов
/ 16 февраля 2012 
<div data-role="collapsible-set">

    <div data-role="collapsible" data-collapsed="false">
        <h3>Section 1</h3>
        <p>I'm the collapsible set content for section 1.</p>
    </div>

    <div data-role="collapsible">
        <h3>Section 2</h3>
        <p>I'm the collapsible set content for section 2.</p>
    </div>        

    <div> <!--I tried this but this only makes simple heading without any background style used for other collapsible section headings-->
        <h3>Read only Section 3</h3>
    </div>        

</div>

Используя вышеупомянутый шаблон, я хочу сделать несколько div в пределах collabsile-set только с заголовком и хочу сделать их неразборными из-за некоторых требований. Если кто-нибудь знает что-нибудь об этом, пожалуйста, дайте мне знать

Ответы [ 3 ]

3 голосов
/ 17 февраля 2012

Свертывание / развертывание содержимого обрабатывается в обработчике click складного заголовка. Так, отменив привязку события click, вы можете сохранить аккордеон всегда развернутым. 

$(".ui-collapsible-heading").unbind("click");

Демо здесь - http://jsfiddle.net/8dLw4/

Редактировать

Отредактированная скрипка для сохранения некоторых в расширенном состоянии всегда - http://jsfiddle.net/8dLw4/2/

Добавлен атрибут data-allow-collapse. Для разделов, которые вы хотите разрешить свертывание, установите его как true. Для других разделов false.

Вот полный исходный код: 

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery Mobile Sample</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
        <script>
            $("#page").live('pageinit', function(event) {
                $(".ui-collapsible[data-allow-collapse=false]").unbind("expand collapse");
            });
        </script>
        <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
    </head>
    <body>
        <div data-role="page" id="page">
            <div data-role="header">
                <h1>Page Title</h1>
            </div><!-- /header -->
            <div data-role="content">
                <div data-role="collapsible-set">
                    <div data-role="collapsible" data-collapsed="false" data-allow-collapse="false">
                        <h3>Section 1-Not allowed</h3>
                        <p>
                            I'm the collapsible set content for section B.
                        </p>
                    </div>
                    <div data-role="collapsible" data-collapsed="false" data-allow-collapse="true">
                        <h3>Section 2-Allowed</h3>
                        <p>
                            I'm the collapsible set content for section B.
                        </p>
                    </div>
                    <div data-role="collapsible" data-collapsed="false" data-allow-collapse="true">
                        <h3>Section 3-Allowed</h3>
                        <p>
                            I'm the collapsible set content for section B.
                        </p>
                    </div>
                    <div data-role="collapsible" data-collapsed="false" data-allow-collapse="false">
                        <h3>Section 4-Not allowed</h3>
                        <p>
                            I'm the collapsible set content for section B.
                        </p>
                    </div>
                </div>
            </div><!-- /content -->
        </div><!-- /page -->
    </body>
</html>
0 голосов
/ 19 ноября 2013

Вы можете сделать это: 

$(".ui-collapsible").on("collapsiblecreate", function( event, ui ) {
    $(this).unbind();
});
0 голосов
/ 09 октября 2013

Или вы можете использовать этот код, пока роль секционного блока не станет доступна: 

<div class="ui-collapsible ui-body-c">
    <h3 class="ui-collapsible-heading">
        <span style="margin:0; cursor:auto;" class="ui-btn ui-corner-top ui-btn-up-a">
            <span class="ui-corner-top ui-corner-bottom" style="display:block; padding: .6em 5px">Title
            </span>
        </span>
    </h3>
    <div class="ui-collapsible-content ui-body-c ui-corner-bottom">
        <div>Content
        </div>
    </div>
</div>
...