Я хочу расширить сворачиваемый контент раздела 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 »</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 »</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 по отношению к коду безрезультатно.
Добавьте скрытое поле 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(','));
}
Хорошо, что следующие работы, хотя я все еще в недоумении относительно лучших способов работы с Web Forms, и мне придется найти способ условно загрузить это, возможно, используя скрытые поля, как было предложено ранее. Спасибо за помощь.
<script type="text/javascript">
$(function () {
$("h2.ui-collapsible-heading").trigger("click");
});
</script>
Используйте поля <asp:hidden>
и поменяйте их значения. Затем вы сможете установить значение $(".col-md-4").trigger("expand");
по обратной передаче.
data-collapsed="false"
в разборном div? Если вы используете JQM 1.4$(".selector").collapsible("expand");
,data-collapsed="false"
сохраняет один и тот же набор открытым независимо от погоды или нет, я хочу, чтобы он был открытым, то есть он не динамический. Я использую JQM 1.4 и$(".myDiv").collapsible("expand");
не работает таким образом, я использую это как-то.