Динамически разворачивать сворачиваемое содержимое

0

Я хочу расширить сворачиваемый контент раздела jQuery Mobile для разборки контента. Я знаю, что я могу щелкнуть заголовок, чтобы развернуть его, но я не хочу полагаться на пользователя, чтобы он щелкнул тот же раздел каждый раз, когда страница обновляется. Я знаю, что могу установить переменную в html, но это не будет сделано, потому что складной контент по-прежнему будет закрыт после обратной передачи.

Мне нужно, чтобы это было сделано с кодом, а не с пользователем. Вы можете увидеть мою неудачную попытку ниже. Я использовал шаблон из проекта VS 2013 Web Forms в качестве старта, затем добавил jQuery Mobile и выполнил инструкции с сайта jQuery Mobile, или так я думал. Это упрощенная тестовая страница, но в конечном итоге я хочу, чтобы переменные ASP.NET определяли, был ли нажат клик по обратной стороне, и если сбрасываемый раздел уже был нажат, откройте его снова, чтобы пользователь не снова нажмите на одно и то же место. Есть ли способ сохранить расширенное состояние или динамически расширять складной контент jQuery Mobile?

<%@ Page Title="Home Page" Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.vb" Inherits="ExpandTest._Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

    <script>
        $(".myDiv").trigger("expand");
    </script>

    <div class="jumbotron">
        <h1>ASP.NET</h1>
        <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
        <p><a href="http://www.asp.net" class="btn btn-primary btn-large">Learn more &raquo;</a></p>
    </div>

    <div class="row">
        <div class="myDiv" data-role="collapsible">
            <h2>Getting Started</h2>
            <p>ASP.NET Web Forms lets you build dynamic websites using a familiar drag-and-drop, event-driven model. A design surface and hundreds of controls and components let you rapidly build sophisticated, powerful UI-driven sites with data access.
            </p>
            <p>
                <a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301948">Learn more &raquo;</a>
            </p>
        </div>
    </div>

</asp:Content>

- EDIT - Вещь, которую я попробовал (даже для доказательства концепции), которая не срабатывает:

$(".myDiv").trigger('expand'); // Apparently does not execute
$('.myDiv').on("click", alert("Fe Fi Foo Bar!");); // does not run anything within
$(document).on("pagecreate", function () {

Кроме того, я недавно прочитал, что document.ready предполагается использовать для jQuery, но не для jQuery Mobile. Рассказывать - это тот факт, что я не могу использовать тот же код, который, как кажется, кажется, кажется, работает другим пользователем, и тот же код, который уже работает в jsfiddle. Это заставляет меня поверить, что я пропускаю то, что должно быть очевидно. Я изменил порядок загрузки jQuery Mobile по отношению к коду безрезультатно.

Изображение 174551

  • 0
    Вы пробовали атрибут data-collapsed="false" в разборном div? Если вы используете JQM 1.4 $(".selector").collapsible("expand"); ,
  • 0
    data-collapsed="false" сохраняет один и тот же набор открытым независимо от погоды или нет, я хочу, чтобы он был открытым, то есть он не динамический. Я использую JQM 1.4 и $(".myDiv").collapsible("expand"); не работает таким образом, я использую это как-то.
Показать ещё 7 комментариев
Теги:
jquery-mobile

3 ответа

1

Добавьте скрытое поле ASP.Net на страницу с включенным viewstate.

Сжатый JQM имеет события для расширения и краха. На стороне клиента вы можете обрабатывать эти события и создавать список существующих расширенных коллажей и сохранять этот список в скрытом поле. После обратной передачи клиентский код в событии pagecreate может прочитать список из скрытого поля и развернуть эти элементы.

Присвоить идентификаторы всем сворачиваемым divs, тогда вы можете сохранить список идентификаторов с разделителями-запятыми для скрытого ввода:

$(document).on("pagecreate", "#page1", function(){
    var prevExpanded =  $("#hidden").val().split(',');
    $.each( prevExpanded, function( key, value ) {
          $("#" + value).collapsible( "option", "collapsed", false );
    });

    $( "[data-role=collapsible]" ).on("collapsiblecollapse collapsibleexpand", function( event, ui ) {
             GetAllExpanded();    
    });
});


function GetAllExpanded(){
    var AllExpanded = [];
    $( "[data-role=collapsible]" ).not(".ui-collapsible-collapsed").each(function( index ) {
      AllExpanded.push($(this).prop("id"));
    });
    $("#hidden").val(AllExpanded.join(','));
}
0

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

<script type="text/javascript">
    $(function () {
        $("h2.ui-collapsible-heading").trigger("click");
    });
</script>
0

Используйте поля <asp:hidden> и поменяйте их значения. Затем вы сможете установить значение $(".col-md-4").trigger("expand"); по обратной передаче.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню