(佐賀→熊本)マークアップエンジニアのググる生活

地方のWEB制作会社で働く、フロントエンドエンジニア。
HTML、CSS、JavaScript(jQuery)、PHP、Smary、EC-CUBE、WordPress、Movable Type等々で解らない時に、Googleで検索したら解決した話や、「閃いた!」などをほとんど自分用にメモとして残すブログです。

※URLがあったら元記事を参照推奨です!
※ほとんどの事は検証はしていますが、あくまでも参考程度にお願い致します!
※記載が不正確であったことにより生じたいかなる損害に関しても、当ブログは責任を負いかねます。自己責任でよろしくおねがいいたします。

2015年09月

バージョンは、2.12.2で見ています。
2.11、2.13も多分同じだと思います。
(追記:2.13.4 でもそのままでいけました。)

追従とマウスホバーをひとつずつご紹介。




テーブルヘッダーを追従させる。

管理画面でよくみるテーブルのヘッダーを、
追従させてみました。






管理画面のテンプレート /data/Smarty/templates/admin/main_frame.tpl の admin_file_manager.css というCSSの下に下記スタイルを追記

<style type="text/css">
#navi li ul {
z-index: 1;
} table.list.js_add_is_active { position: relative; } table.list.js_add_is_active .list_fixed { opacity: 0; position: fixed; top: 0; } table.list.js_add_is_active .list_fixed.js_add_is_active { opacity: 1; } </style>

同ファイルの file_manager.js というJSの下に下記スクリプトを追記

<script type="text/javascript">
jQuery(function($) {

/* ---------------------------------------
 スクロール追従
--------------------------------------- */
var $list = $('table.list');
$(window).bind('load.list', function() {
    $list.addClass('js_add_is_active').each(function() {
        // scroll 内でも自身を使いたいので便利に格納
        var $this = $(this);

        // ターゲットを設定
        var $list_head       = $this.find('tr:first');
        var $list_head_label = $list_head.children('th');

        // 横幅計算
        $list_head_label.each(function() {
            var width = $(this).width();
            $(this).css({
                'width': width,
            });
        });

        // 位置取得
        var offset = $list_head.offset();
        var left   = offset.left;

        // 複製
        var $list_head_html = $list_head.html();
        $this.append('<tr class="list_fixed">' + $list_head_html + '</tr>');

        // 複製した fixed 取得
        var $fixed = $this.find('tr.list_fixed');

        // fixed に位置情報を付与
        var fixed_left = left - 1; // -1 は border分
        $fixed.css({
            'left': fixed_left + 'px',
        });

        // スクロール追従
        $(window).bind('scroll.list', function() {
            var thisTop = $this.offset().top;
            var scrollTop = $(window).scrollTop();
            if ( scrollTop > thisTop ) {
              $fixed.addClass('js_add_is_active');
            } else {
              $fixed.removeClass('js_add_is_active');
            }
        });
    });
});

});
</script>





テーブルの行にマウスホバーすると、現在の行をハイライトにする。

管理画面のテンプレート /data/Smarty/templates/admin/main_frame.tpl(さっきと一緒) の admin_file_manager.css というCSSの下(さっきと一緒)に下記スタイルを追記

<style type="text/css">
    table.list tr:not([class]):hover th,
    table.list tr:not([class]):hover td {
        background: rgba(0, 0, 0, .1) !important;
    }
</style>

バージョン 2.12.2

その表示不具合、
プラグインが原因かもしれません...。

私が追加修正したサイトでは、
販売期間設定というプラグインを無効にすると正常に表示されました

このページのトップヘ