2

我想在我的 jQM 应用程序（1.3.2）中集成一个可折叠的应用程序，其工作方式如下：

  1. 它开始崩溃。
  2. 单击时，它开始从服务器获取可折叠的列表项。可折叠设备保持关闭状态，加载图标可能正在旋转。
  3. 在加载所有元素并且列表视图刷新并准备好之后，可折叠展开。
  4. 如果再次点击它，它直接关闭，没有延迟，从 1 开始。

我最初的想法是抓住expand事件并阻止其传播。加载完成后，我取消注册我的自定义事件处理程序以将可折叠恢复正常，最后从 JavaScript 触发展开事件以打开。

问题是这适用于第一轮，但之后折叠式无论如何都会打开。考虑这个例子（也在jsfiddle中）：

<div data-role="collapsible" id="c">
  <h2>Collapse</h2> 
  <ul data-role="listview" id="lv">
    <li>You don't see me!</li>
  </ul>
</div>

<a href="#" data-role="button" onClick="$('#c').off('expand', stop)">
  Unlock the collapsible
</a>

<a href="#" data-role="button" onClick="$('#c').on('expand', stop)">
  Lock the collapsible
</a>

JavaScript：

var stop = function(event) {
  alert('Locked!');
  event.preventDefault();
}

// executed after the element is created ...
$('#c').on('expand', stop)

在这里，如果您在加载后单击可折叠，它会保持关闭状态（好）。当您单击解锁时，它会打开并且不显示任何警报（好）。如果您再次锁定它，它会显示警报（好）但无论如何都会打开（坏）。

谁能启发我我做错了什么？解锁似乎有我看不到的副作用。这里有几个类似的问题，但大多数人都对阻止扩展而不重新打开它感到满意。

所以我的问题是：可靠地延迟可折叠扩展的最佳方法是什么？

编辑：我添加了另一个集成列表视图逻辑的示例，也显示了此错误。jsFiddle 在这里。我还转向.one()使注销更可追溯。

新的 JavaScript：

var stop_n_load = function (event) {
  alert('stop opening! (or at least try to ...)');

  // try to stop the expanding by stopping the event
  event.preventDefault();

  // Do some work that takes time and trigger expand afterwards ...
  setTimeout(function (e) {
    dd = new Date();
    $('#lv').empty();
    $('#lv').append("<li><a href='#'>Item A ("+dd+")</a></li>");
    $('#lv').append("<li><a href='#'>Item B ("+dd+")</a></li>");
    $('#lv').listview('refresh');

    // when done, start expanding without this handler (was register only once)
    $('#c').trigger('expand');
    // for the next collapse register stop_n_load again
    $('#c').one('collapse', reset);
  }, 2000);
};

var reset = function (event) {
  $('#c').one('expand', stop_n_load);
};

$('#c').one('expand', stop_n_load);

在第一次扩展时，它按预期工作，它首先更新然后打开。在第二次运行时，它无需等待即可打开，稍后您可以看到时间戳更新，因此事件被正确调用。

好像有问题，.preventDefault()看不懂。。。

4

3 回答 3

2

当expand/collapse事件被触发时，jQM 添加几个类来显示/隐藏内容以及更新可折叠按钮/标题。

在这种情况下，event.preventDefault()不会阻止事件冒泡并阻止它们执行。因此，单击标题后，您需要使用event.stopImmediatePropagation()停止事件。expand

当一个collapsible被折叠时，它有一个类ui-collapsible-collapsed，一旦展开，这个类就会被移除。因此，当collapse被触发时，它可以正常工作而不会中断。

$(".ui-collapsible-heading-toggle").on("click", function (e) {

    // check if collapsible is whether expanded or collapsed
    if ($(this).closest(".ui-collapsible").hasClass("ui-collapsible-collapsed")) {

        // true
        // stop "expand" event on click,tap,vclick,touchstart, etc...
        e.stopImmediatePropagation();

        // show loading msg - optional
        $.mobile.loading("show", {
            text: "Loading...Please wait",
            textVisible: true
        });

        // for demo
        // add items, expand and hide loading msg
        setTimeout(function () {                
            $("#lv").empty().append(items).listview("refresh");
            $("#c").trigger("expand");
            $.mobile.loading("hide");
        }, 1000);
    }

    // false
    // collapse normally or do something else
});

演示

于 2013-11-03T17:33:50.923 回答
1

我对 JQM 不是很熟悉，但我的第一个想法是在发送更多数据之前清空列表……这似乎阻止了它的扩展。

var stop = function(event) {    
    $(this).find('.ui-listview').empty()
    event.preventDefault();

    /* do ajax and then refresh component with expand enabled */
}

$('#c').on('expand', stop);

演示 - 没有 ajax

于 2013-11-03T01:59:09.170 回答
0

在事件系统中涉水之后，我现在得出的结论是，如果你设置preventDefault()一次，你就会永远被它困住。基于charlietfl的解决方案，我添加了代码以使视觉影响最小化，也许还有一种方法可以防止 GUI 在 20 毫秒内刷新以使其完全不引人注目。

var stop_n_load = function (event) {
  $('#lv').empty();
  $('#lv').listview('refresh');

  setTimeout(function() {
    $('#c').trigger('collapse');
  }, 20);

  // Do some work that takes time and trigger expand afterwards ...
  setTimeout(function () {
    dd = new Date();
    $('#lv').empty();
    $('#lv').append("<li><a href='#'>Item A (" + dd + ")</a></li>");
    $('#lv').append("<li><a href='#'>Item B (" + dd + ")</a></li>");
    $('#lv').listview('refresh');

    $('#c').trigger('expand');
    $('#c').one('collapse', reset);
  }, 2000);
};

不过，我仍在寻找将事件重置为其先前状态的解决方案。

于 2013-11-03T12:13:22.820 回答