web-dev-qa-db-ja.com

「記事が正常に保存されました」というメッセージをx秒後にフェードアウェイする

記事を編集して保存するとします。 「記事が正常に保存されました」というメッセージがsystem-message-container divに表示され、そこに貼り付けられます。たとえば、編集を行っている最中に他の作業に割り込まれ、しばらくして記事に戻ってきたとします。 「記事が正常に保存されました」というメッセージが表示されたら、[閉じる]をクリックします。その後、実際には最初の保存以降にメッセージが存在し、2番目の編集を保存していないことに気付きました。

（ちなみにウェブ編集だけでなく）もっと注意を払うことができることはわかっていますが、「記事が正常に保存されました」というメッセージを20秒後に消える方法があります。

PS：*よくわからない場合は[保存して閉じる]をクリックできると教えてくれますが、戻ってきたときに記事をめちゃくちゃにしていて、このメッセージを見たので自分に「わかりました問題ありません。記事を閉じて保存せずにもう一度開くと、戻ってきたときのバージョンに戻りますが...」.

編集：administrator\templates\isis\html\layouts\joomla\system\message.phpの内容：

<?php
/**
 * @package     Joomla.Administrator
 * @subpackage  Template.Isis
 *
 * @copyright   Copyright (C) 2005 - 2014 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

$msgList = $displayData['msgList'];

$alert = array('error' => 'alert-error', 'warning' => '', 'notice' => 'alert-info', 'message' => 'alert-success');
?>
<div id="system-message-container">
    <?php if (is_array($msgList) && $msgList) : ?>
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <?php foreach ($msgList as $type => $msgs) : ?>
            <div class="alert <?php echo $alert[$type]; ?>">
                <h4 class="alert-heading"><?php echo JText::_($type); ?></h4>
                <?php if ($msgs) : ?>
                    <?php foreach ($msgs as $msg) : ?>
                        <p><?php echo $msg; ?></p>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>
        <?php endforeach; ?>
    <?php endif; ?>
</div>

administrator\templates\isis\js\template.jsの内容：

/**
 * @package     Joomla.Administrator
 * @subpackage  Templates.isis
 * @copyright   Copyright (C) 2005 - 2014 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 * @since       3.0
 */

(function($)
{
    $(document).ready(function()
    {
        $('*[rel=tooltip]').tooltip();

        // Turn radios into btn-group
        $('.radio.btn-group label').addClass('btn');
        $('.btn-group label:not(.active)').click(function()
        {
            var label = $(this);
            var input = $('#' + label.attr('for'));

            if (!input.prop('checked')) {
                label.closest('.btn-group').find('label').removeClass('active btn-success btn-danger btn-primary');
                if (input.val() == '') {
                    label.addClass('active btn-primary');
                } else if (input.val() == 0) {
                    label.addClass('active btn-danger');
                } else {
                    label.addClass('active btn-success');
                }
                input.prop('checked', true);
            }
        });
        $('.btn-group input[checked=checked]').each(function()
        {
            if ($(this).val() == '') {
                $('label[for=' + $(this).attr('id') + ']').addClass('active btn-primary');
            } else if ($(this).val() == 0) {
                $('label[for=' + $(this).attr('id') + ']').addClass('active btn-danger');
            } else {
                $('label[for=' + $(this).attr('id') + ']').addClass('active btn-success');
            }
        });
        // add color classes to chosen field based on value
        $('select[class^="chzn-color"], select[class*=" chzn-color"]').on('liszt:ready', function(){
            var select = $(this);
            var cls = this.className.replace(/^.(chzn-color[a-z0-9-_]*)$.*/, '\1');
            var container = select.next('.chzn-container').find('.chzn-single');
            container.addClass(cls).attr('rel', 'value_' + select.val());
            select.on('change click', function()
            {
                container.attr('rel', 'value_' + select.val());
            });

        });
    });
})(jQuery);
joomla-3.xadministrator
3
MagTun

これには次のjQueryを使用できます。

setTimeout(function() {
    $('#system-message-container').fadeOut('fast');
}, 5000);

5000は5秒なので、この値を好きなように変更できます

このコードはどこに追加しますか？

オプション1：これは長くて曲がった方法です。このjQueryコードを呼び出す小さなプラグインを作成できます。

オプション2：上記のコードを次のファイルに追加するだけです。

administrator/templates/isis/js/template.js

オプション2はコアハックと見なされるため、Joomlaの更新をインストールし、管理テンプレートにいくつかの変更があった場合、この変更は上書きされます。

更新>>オプション3：

これをシステムメッセージのテンプレートオーバーライドに追加することもできます。したがって、次のファイルをテキストエディタで開きます。

administrator/templates/isis/html/message.php

14行目で$buffer = null;。このすぐ下に、以下を追加します。

$buffer .= "<script>
                setTimeout(function() {
                    jQuery('#system-message-container').fadeOut('fast');
                }, 5000);
            </script>";

successメッセージの場合のみ、これを使用します。

$buffer .= "<script>    
                setTimeout(function() {
                    jQuery('.alert-success').parents('#system-message-container').fadeOut('fast');
                }, 5000);
            </script>";

お役に立てれば

5
Lodder

これは正常に機能しますが、1回だけです。レンダリングされた2番目のメッセージがある場合、スクリプトはトリガーされません。

これを使用すると、正常に機能するeverytimeが成功します。

setInterval(function() {
    jQuery('.alert-success').parents('#system-message-container').fadeOut('fast');
}, 5000);

これを追加して、フロントエンドで使用します。

$buffer .= "<script>    
            setInterval(function() {
              jQuery('.alert-success').parents('#system-message-container').fadeOut('fast');
            }, 5000);
            console.log('timout triggered');
            </script>";

messages.phpの14行目（元はtemplates/beez3/html/layouts/joomla/systemにあります）の後、それをtemplate/htmlフォルダーに配置します。

1
TLWebdesignNL