在添加菜单项期间将脚本入队意味着在保存菜单项之前

时间：2018-06-13 作者：Shwan Namiq

我延长了Walker_Nav_Menu_Edit 类并基于一些jQuery插件（如wpColorPicker、fonIconPicker和Select2）添加了一些新的自定义字段。我从不同的js文件调用这些函数，如下所示

jQuery(document).ready(function($) {

$(\'.fonticons-iconwpcolorpicker\').wpColorPicker();

$(".hpemenu-fonticons-size").TouchSpin({
    min: 12,
    max: 100,
    stepinterval: 50,
    maxboostedstep: 1000,
    postfix: \'px\'
});

$(".hpemenu-itemesnum").TouchSpin({
        min: 1,
        max: 100,
        stepinterval: 50,
        maxboostedstep: 1000,
        postfix: \'Items or posts\'
});

$(".bsnselect").select2({
    placeholder: "Select ...",
    width: \'100%\',
    minimumResultsForSearch: Infinity,
    theme: "classic"
});

var hpemenuFontIcons = $(\'.hpemenu-fonticons\').fontIconPicker({
    theme: \'fip-bootstrap\'
});
$.ajax( {
    url: hpemenu_ajax_object.fontIconsJsonUrl,
    type: \'GET\',
    dataType: \'json\'
} )
.done( function( response ) {
    hpemenuFontIcons.setIcons( response );
} );

$(\'a.item-edit\').click(function() {
    var itemId = $(this).closest(\'li\').attr(\'id\');
    var menuItemType = $(\'#\' + itemId + \' .field-menuitem-type input\');
    var defaultMenu = $(\'#\' + itemId + \' .bsnavbar-default\');
    var advanceMenu = $(\'#\' + itemId + \' .bsnavbar-advance\');
    var urlInput = $(\'#\' + itemId + \' .bsn-menuitem-url\');
    var bsnAdditionalSection = $(\'#\' + itemId + \' .bsn-menuitem-additional\');

    var showHideMenuItem = function() {
        var menuItemValue = $(\'#\' + itemId + \' .field-menuitem-type input:checked\').val();
        if (menuItemValue === \'defaultmenu\') {
            defaultMenu.add(urlInput).add(bsnAdditionalSection).show();
            advanceMenu.hide();
        } else if (menuItemValue === \'advancemenu\') {
            advanceMenu.add(defaultMenu).show();
            urlInput.add(bsnAdditionalSection).hide();
        } else {
            defaultMenu.add(advanceMenu).hide();
        }
    };
    showHideMenuItem();
    menuItemType.on(\'change\', showHideMenuItem);


    var menuItemLayoutCheckboxes = $(\'#\' + itemId + \' .field-menuitemlayouts input\');
    var menuItemName = $(\'#\' + itemId + \' .bsn-menuitem-name\');
    var fontIconsSection = $(\'#\' + itemId + \' .menuitem-fonticons\');

    var menuItemLayoutsFunc = function() {
        var menuItemLayoutChecked = $(\'#\' + itemId + \' .field-menuitemlayouts input:checked\').val();
        if ( menuItemLayoutChecked === \'itemwithouticon\' ) {
            fontIconsSection.hide();
            menuItemName.show();
        } else if ( menuItemLayoutChecked === \'itemicon\' ) {
            menuItemName.hide();
            fontIconsSection.show();
        } else {
            fontIconsSection.add(menuItemName).show();
        }
    };
    menuItemLayoutsFunc();
    menuItemLayoutCheckboxes.on( \'change\', menuItemLayoutsFunc);

    var contentType = $(\'#\' + itemId + \' .field-content-type input\');
    var uniformBox = $(\'#\' + itemId + \' p.uniform-title, #\' + itemId + \' p.field-uniform\');
    var uniformSelect = $(\'#\' + itemId + \' p.field-uniform select\');
    var customCat = $(\'#\' + itemId + \' p.field-custom-cat\');
    var customTag = $(\'#\' + itemId + \' p.field-custom-tag\');
    var customCatsTab = $(\'#\' + itemId + \' p.field-custom-cats-tab\');
    var customTagsTab = $(\'#\' + itemId + \' p.field-custom-tags-tab\');
    var customTagsOfCat = $(\'#\' + itemId + \' p.field-custom-tags-of-cat-tab\');
    var gridLayout = $(\'#\' + itemId + \' p.field-items-grid\');
    var itemsNumber = $(\'#\' + itemId + \' p.field-items-num\');

    var showHideCatTagTab = function() {
        uniformSelect.find(\'option:selected\').each(function() {
            if ($(this).attr(\'value\') === \'custom-cat\') {
                customCat.show();
                customTag.add(customCatsTab).add(customTagsTab).add(customTagsOfCat).hide();
            } else if ($(this).attr(\'value\') === \'custom-tag\') {
                customTag.show();
                customCat.add(customCatsTab).add(customTagsTab).add(customTagsOfCat).hide();
            } else if ($(this).attr(\'value\') === \'custom-cats-tab\') {
                customCatsTab.show();
                customCat.add(customTag).add(customTagsTab).add(customTagsOfCat).hide();
            } else if ($(this).attr(\'value\') === \'custom-tags-tab\') {
                customTagsTab.show();
                customCat.add(customTag).add(customCatsTab).hide();
            } else if ($(this).attr(\'value\') === \'custom-tags-of-cat-tab\') {
                customTagsOfCat.show();
                customTag.add(customCat).add(customCatsTab).add(customTagsTab).hide();
            } else {
                customCat.add(customTag).add(customCatsTab).add(customTagsTab).add(customTagsOfCat).hide();
            }
            if ($(this).attr(\'value\') === \'contact\' || $(this).attr(\'value\') === \'search\') {
                itemsNumber.add(gridLayout).hide();
            } else {
                itemsNumber.add(gridLayout).show();
            }
        });
    };
    showHideCatTagTab();
    uniformSelect.on(\'change\', showHideCatTagTab);

    var multipleBox = $(\'#\' + itemId + \' p.multiple-title, #\' + itemId + \' p.field-multiple\');
    var multipleSelect = $(\'#\' + itemId + \' p.field-multiple select\');
    var customCategory = $(\'#\' + itemId + \' p.field-custom-category\');
    var customTags = $(\'#\' + itemId + \' p.field-custom-tags\');
    var categoryFlag = false;
    var tagFlag = false;
    var itemsFalg = false;

    var showHideCatTag = function() {
        multipleSelect.find(\'option:selected\').each(function() {
            if ($(this).attr(\'value\') === \'custom-category\') {
               categoryFlag = true;
            }
            if ($(this).attr(\'value\') === \'custom-tags\') {
               tagFlag = true;
            }
        });
        if(categoryFlag && tagFlag) {
            customCategory.add(customTags).show();
            categoryFlag = false;
            tagFlag = false;
        } else if(categoryFlag && !tagFlag) {
            customCategory.show();
            customTags.hide();
            categoryFlag = false;
            tagFlag = false;
        } else if(!categoryFlag && tagFlag) {
            customCategory.hide();
            customTags.show();
            categoryFlag = false;
            tagFlag = false;
        } else {
            customCategory.add(customTags).hide();
            categoryFlag = false;
            tagFlag = false;
        }
    };
    showHideCatTag();
    multipleSelect.on(\'change\', showHideCatTag);

    var showHideUniMul = function() {
        var contentTypeValue = $(\'#\' + itemId + \' .field-content-type input:checked\').val();
        if (contentTypeValue === \'uniform\') {
            uniformBox.show();
            showHideCatTagTab();
            multipleBox.hide(function() {
                customCategory.add(customTags).hide();
            });
        } else if (contentTypeValue === \'multiple\') {
            multipleBox.show();
            showHideCatTag();
            uniformBox.hide(function() {
                customCat.add(customTag).add(customCatsTab).add(customTagsTab).add(customTagsOfCat).hide();
            });
        } else {
            uniformBox.add(multipleBox).hide();
        }
    };
    showHideUniMul();
    contentType.on(\'change\', showHideUniMul);

});

});
然后，我使用admin_enqueue_scripts 行动

当我从添加新菜单项时Custom Link 面板中，只有单击Save Menu 保存菜单项并重新加载后，用于保存菜单项的按钮nav-menus.php 所有功能都可以正常工作。

INFO: 当我在Walker_Nav_Menu_Edit类（表示不在单独的js文件中）内部<script></script> 在保存菜单项之前标记所有功能的工作状态。

如何在Walker_Nav_Menu_Edit? 或者，在保存菜单项之前添加自定义链接项时，如何触发js文件代码？

1 个回复
最合适的回答,由SO网友:Shibi 整理而成

由于此菜单项附加了ajax响应，因此需要为使用添加到菜单中的每个项再次运行此JS函数document#menu-item-added 事件

在JS文件中添加类似的内容。

$(document).on(\'menu-item-added\', function(event, markup) {
    // debug that the hook work
    console.log(markup);
    $.each(markup, function(index, menuItem) {
        if(menuItem.id) {
            // check menu item html markup
            console.log(menuItem);
            $(\'#\' + menuItem.id).find(\'.hpemenu-fonticons\').fontIconPicker();
            $(\'#\' + menuItem.id).find(\'.fonticons-iconwpcolorpicker\').wpColorPicker();
            $(\'#\' + menuItem.id).find(\'.bsnselect\').select2();
        }
    });
});
添加click event（添加click事件），该功能可在文档中单击的位置和添加后的菜单项中运行。

因此，您的代码应该如下所示：

jQuery.(document).ready(function($) {

    $(\'.hpemenu-fonticons\').fontIconPicker();
    $(\'.fonticons-iconwpcolorpicker\').wpColorPicker();
    $(".bsnselect").select2();

    // Add click event
    $(\'a.item-edit\').click(some_function);

    $(document).on(\'menu-item-added\', function(event, markup) {
        // debug that the hook work
        console.log(markup);
        $.each(markup, function(index, menuItem) {
            if(menuItem.id) {
                // check menu item html markup
                console.log(menuItem);
                $(\'#\' + menuItem.id).find(\'.hpemenu-fonticons\').fontIconPicker();
                $(\'#\' + menuItem.id).find(\'.fonticons-iconwpcolorpicker\').wpColorPicker();
                $(\'#\' + menuItem.id).find(\'.bsnselect\').select2();

                // Add click event
                $(\'#\' + menuItem.id).find(\'a.item-edit\').click(some_function);
            }
        });
    });

    function some_function() {
        var itemId = $(this).closest(\'li\').attr(\'id\'),
            menuItemType = $(\'#\' + itemId + \' .field-menuitem-type input\');

        var showHideMenuItem = function() {
            //Some codes here
        };
        showHideMenuItem();
        menuItemType.on(\'change\', showHideMenuItem);
    }
});

结束
标签： menus   admin-menu   小码农  

相关推荐

Custom Menus and taxonomies

好的，我刚开始使用WordPress，不是很好，我有一个菜单问题，我真的需要一些帮助。我在一个网站上工作，它有多个地点，并非所有地点都销售相同的产品。所有位置都是具有父结构的页面。俄亥俄州-联系我们-关于我们-产品等。。。西弗吉尼亚州-联系我们-关于我们-产品等。。。宾夕法尼亚州-联系我们-关于我们-产品等我掌握了自定义页面模板的窍门，并为其添加了自定义菜单（因此，我所有的Ohio页面都使用了我制作的自定义Ohio模板，并包含了自定义Ohio菜单）。我正在使用帖子创建产品信息页面，并使用以下方式显示它们：