Question

我有一个具有多个字段集的Dexterity类型，以及允许在添加或编辑时一次显示一个字段集的内置Javascript很棒。

但我想邀请用户按顺序遍历字段集，因此我的理想情况不会显示“提交”按钮，直到最后一个字段集可见，而是呈现NEXT>或{{1 }}和<PREV按钮，直到最后一个字段集。

我认为这是一种行为？但是我对如何添加它以及如何控制它感到有点失落。我目前正在使用默认的EditForm，我更喜欢只做一个微小的调整，但如果它意味着自己下降到构建表单，那没关系。我只需要知道这是否是获得此添加的唯一方法，这似乎不太可能。

Answer 1

可以操纵字段集以添加“上一个”和“下一个”按钮以及一些额外的JavaScript魔法。这是我在当前项目中使用的内容：

var prevnext = {
    formTabs: null,

    next: function() { prevnext.formTabs.data('tabs').next(); prevnext._scrollToTop(); },
    prev: function() { prevnext.formTabs.data('tabs').prev(); prevnext._scrollToTop(); },

    _scrollToTop: function() {
        $(window).scrollTop(prevnext.formTabs.closest('form').offset().top);  
    },

    showButtons: function(event, index) {
        var tabs = prevnext.formTabs.data('tabs'),
            index = typeof(index) === 'undefined' ? tabs.getIndex() : index,
            current = tabs.getTabs()[index],
            count = tabs.getTabs().length;

        $('#prevnext_previous').toggle(index !== 0);
        $('#prevnext_next').toggle(index !== (count - 1));

        $('.formControls:last :submit[name=form_submit]').toggle(index === )count - 1));
    },

    init: function() {
        var tabs;
        prevnext.formTabs = $('.formTabs');
        tabs = prevnext.formTabs.data('tabs');
        if (tabs.getTabs().length > 0) {
            if ($('fieldset#fieldset-distribution').length === 0)
                 return;
            $('.formControls:last :submit:first')
                .before($('<input id="prevnext_previous" class="context" ' +
                          '       type="button" value="" />')
                      .val('< Previous')
                      .click(prevnext.prev))
                .before(document.createTextNode(' '));
            $('.formControls:last :submit:first')
                .before($('<input id="prevnext_next" class="context" ' +
                          '       type="button" value="" />')
                      .val('Next >')
                      .click(prevnext.next))
                .before(document.createTextNode(' '));
            prevnext.showButtons();
            tabs.onClick(prevnext.showButtons);
        }
    }
};

$(prevnext.init());

如何为Dexterity Plone类型的添加/编辑表单添加“next fieldset”按钮

1 个答案: