web-dev-qa-db-ja.com

ヘッダーとフッターのreveal.jsプレゼンテーションを設定します

プレゼンテーションにヘッダーとフッターを設定したいと思います。次の問題を出発点として使用しました： https://github.com/hakimel/reveal.js/issues/806 および http://www.ciges.net/revealjs_demo /＃/

私の現在の実装では、次の出力が得られます。 enter image description here

私が理解している限り、reveal.jsは プレゼンテーションの固定サイズ をデフォルトで使用し、幅は960px、高さは700pxです。このサイズは私にはまったく問題ありません。ただし、このウィンドウでヘッダーとフッターを修正しないようにします。実際の画面サイズに合わせる必要があります。つまり、左側のヘッダーを画面の左上隅に揃えたいのです。他のヘッダーとフッターについても同様に、画像も参照してください。どうすればこれを達成できますか？現在、私のヘッダーとフッターはデフォルトウィンドウ（960x700）内で修正されているようです。

次のコード（index.html）をreveal.js3.2.0で使用します

<!doctype html>
<html lang="en">

    <head>
        <meta charset="utf-8">

        <title>reveal.js – The HTML Presentation Framework</title>

        <meta name="description" content="A framework for easily creating beautiful presentations using HTML">
        <meta name="author" content="Hakim El Hattab">

        <meta name="Apple-mobile-web-app-capable" content="yes">
        <meta name="Apple-mobile-web-app-status-bar-style" content="black-translucent">

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">

        <link rel="stylesheet" href="css/reveal.css">
        <link rel="stylesheet" href="css/theme/simple.css" id="theme">

        <!-- Code syntax highlighting -->
        <link rel="stylesheet" href="lib/css/zenburn.css">

        <!-- Printing and PDF exports -->
        <script>
            var link = document.createElement( 'link' );
            link.rel = 'stylesheet';
            link.type = 'text/css';
            link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
            document.getElementsByTagName( 'head' )[0].appendChild( link );
        </script>

        <!--[if lt IE 9]>
        <script src="lib/js/html5shiv.js"></script>
        <![endif]-->

        <style type="text/css">
            .reveal div.header-left {
                position: absolute;
                top: 0;
                left: 0;
                padding: 0;
                margin: 0;
            }
            .reveal div.header-right {
                position: absolute;
                top: 0;
                right: 0;
                padding: 0;
                margin: 0;
            }
            .reveal div.footer-left {
                position: absolute;
                bottom: 0;
                left: 0;
                padding: 0;
                margin: 0;
            }
            .reveal div.footer-right {
                position: absolute;
                bottom: 0;
                right: 0;
                padding: 0;
                margin: 0;
            }
        </style>

    </head>

    <body>

        <div id="hidden" style="display:none;">
            <div id="header">
                <div class="header-left">test header left</div>
                <div class="header-right">test header right</div>
                <div class="footer-left">test footer left</div>
                <div class="footer-right">test footer right</div>
            </div>
        </div>

        <div class="reveal">

            <!-- Any section element inside of this container is displayed as a slide -->
            <div class="slides">
                <section>
                    <h1>Reveal.js</h1>
                    <h3>The HTML Presentation Framework</h3>
                    <p>
                        <small>Created by $x^2$ <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://Twitter.com/hakimel">@hakimel</a></small>
                    </p>
                </section>

                <section>
                    <h2>Hello There</h2>
                    <p>
                        reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.
                    </p>
                </section>

                <!-- Example of nested vertical slides -->
                <section>
                    <section>
                        <h2>Vertical Slides</h2>
                        <p>Slides can be nested inside of each other.</p>
                        <p>Use the <em>Space</em> key to navigate through all slides.</p>
                        <br>
                        <a href="#" class="navigate-down">
                            <img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
                        </a>
                    </section>
                    <section>
                        <h2>Basement Level 1</h2>
                        <p>Nested slides are useful for adding additional detail underneath a high level horizontal slide.</p>
                    </section>
                    <section>
                        <h2>Basement Level 2</h2>
                        <p>That's it, time to go back up.</p>
                        <br>
                        <a href="#/2">
                            <img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="transform: rotate(180deg); -webkit-transform: rotate(180deg);">
                        </a>
                    </section>
                </section>

            </div>

        </div>

        <script src="lib/js/head.min.js"></script>
        <script src="js/reveal.js"></script>

        <script>

            // Full list of configuration options available at:
            // https://github.com/hakimel/reveal.js#configuration
            Reveal.initialize({
                controls: false,
                progress: true,
                slideNumber: true,
                history: true,
                center: false, 
                transition: 'slide', // none/fade/slide/convex/concave/zoom
                math: {
                    mathjax: 'https://cdn.mathjax.org/mathjax/latest/MathJax.js',
                    config: 'TeX-AMS_HTML-full'  // See http://docs.mathjax.org/en/latest/config-files.html
                },
                // Optional reveal.js plugins
                dependencies: [
                    { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
                    { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
                    { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
                    { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
                    { src: 'plugin/zoom-js/zoom.js', async: true },
                    { src: 'plugin/notes/notes.js', async: true },
                    { src: 'plugin/math/math.js', async: true }
                ]
            });

        </script>

        <script src="//code.jquery.com/jquery-2.2.0.min.js"></script>

        <script type="text/javascript">
            var header = $('#header').html();
            if ( window.location.search.match( /print-pdf/gi ) ) {
                $('.slides > section').prepend(header);
            } else {
                $('.slides').prepend(header);
            }
        </script>

    </body>

</html>
javascripthtmlcsspresentationreveal.js
10
WG-

ここに もう少し複雑な答え これはpdf-export印刷バージョンでも機能します：

要素をslide-background <div>に追加します（section、slides、またはrevealの代わりに）。この<div>は動的に生成されるため、Reveal.js readyイベントを待つ必要があります。印刷時にわずかな遅延が発生した後、ヘッダーとフッターが所定の位置に移動するアニメーションが不要になりますが、すべてのヘッダー/フッターは必要に応じてPDFでレンダリングされます。

擬似コード：

  1. ヘッダー/フッター<div>のスタイルを設定して、必要に応じて配置します。
  2. 非表示のヘッダー/フッターを作成する<div>
  3. Reveal.jsの準備完了イベントで、ヘッダー/フッター<div>を各.slide-background <div>にコピーします

コード：これは、reveal.jsファイルの最後（終了</ body>タグの直前）にコピーして貼り付けることができます：

<style type="text/css">
    /* 1. Style header/footer <div> so they are positioned as desired. */
    #header-left {
        position: absolute;
        top: 0%;
        left: 0%;
    }
    #header-right {
        position: absolute;
        top: 0%;
        right: 0%;
    }
    #footer-left {
        position: absolute;
        bottom: 0%;
        left: 0%;
    }
</style>

<!-- 2. Create hidden header/footer <div> -->
<div id="hidden" style="display:none;">
    <div id="header">
        <div id="header-left">HEADER-LEFT</div>
        <div id="header-right">HEADER-RIGHT</div>
        <div id="footer-left">FOOTER-LEFT</div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
    // 3. On Reveal.js ready event, copy header/footer <div> into each `.slide-background` <div>
    var header = $('#header').html();
    if ( window.location.search.match( /print-pdf/gi ) ) {
        Reveal.addEventListener( 'ready', function( event ) {
            $('.slide-background').append(header);
        });
    }
    else {
        $('div.reveal').append(header);
   }
</script>
16
Leftium

ヘッダー/フッター要素を_div.reveal_スライド要素の代わりに_.slides_要素に挿入します。

ヘッダー/フッター要素を挿入するDOMツリー内の位置は、適用されるCSSに影響し、CSSの位置に影響します。

  • $('.slides').prepend(header)は、slides <div>内に要素を追加します。 slides <div>のサイズがこのように設定されているため、要素はデフォルト（960x700）ウィンドウに固定されます。
  • $('div.reveal').append(header)は、reveal <div>内に要素を追加します。 reveal <div>はブラウザのビューポート全体を占めるサイズであるため、要素は画面に固定されます。

これはprint/pdfバージョンでは機能しないことに注意してください...私はまだそれを理解しようとしています...

1
Leftium