[Javascript]Reveal.js

Reveal.js 是一套利用HTML 5實作而成的Presentation Framework，可以利用它來製作網頁型的簡報

官方文件也非常清楚，本身內部也提供許多API，讓簡報更容易控制，是個非常方便的東西

安裝
可以到 這裡 下載 source code，或者按照官方文件操作，利用 npm 和 grunt 安裝

操作方法

1.一般用法
內頁皆是使用 section 包起來

<section>
	<h3>TEST</h3>
</section>

2.Anchor Text
透過 id 自定義網頁上顯示的anchor text

<section id="title">
	<h3>TEST</h3>
</section>

3.Vertical Slides
垂直型簡報

<section>
	<h2>Vertical Slides</h2>
	<p>
		Slides can be nested inside of other slides,
		<!-- .navigate-down 觸發點擊事件可以切換下一頁(垂直) -->
		try pressing <a href="#" class="navigate-down">down</a>.
	</p>
</section>
<section>
	<h2>Basement Level 1</h2>
	<p>Press down or up to navigate.</p>
</section>

4.Highlight
Highlight程式區段

	<h3>Highlight code</h3>
	<!-- data-trim會自動刪除頭尾空白，contenteditable啟用編輯(會有錯字的底線) -->
	<pre><code data-trim contenteditable style="font-size: 25px">
Reveal.addEventListener( 'slidechanged', function(event) {
	console.log(event.currentSlide);
	console.log(event.indexh);
});
	</code></pre>
</section>

5.Background
簡報背景

<section data-background="#007777">
	<h3>Background</h3>
</section>

6.Blockquote
Blockquote

<section>
	<h3>Quote</h3>
	<blockquote>123 321</blockquote>
</section>

7.Fragment
分批顯示功能

<section>
	<h2>Fragment</h2>
	<ul>
		<li>one</li>
		<li class="fragment">two</li>
		<li class="fragment">three</li>
	</ul>
</section>

8.Fragment Styles
分批顯示功能特效

<section>
	<h2>Fragment Styles</h2>
	<p>There's a few styles of fragments, like:</p>
	<p class="fragment grow">grow</p>
	<p class="fragment shrink">shrink</p>
	<p class="fragment roll-in">roll-in</p>
	<p class="fragment fade-out">fade-out</p>
	<p class="fragment highlight-red">highlight-red</p>
	<p class="fragment highlight-green">highlight-green</p>
	<p class="fragment highlight-blue">highlight-blue</p>
	<p class="fragment current-visible">current-visible</p>
	<p class="fragment highlight-current-blue">highlight-current-blue</p>
</section>

API
Reveal 內部也有許多API可以使用

Reveal.slide( indexh, indexv, indexf );
Reveal.left();
Reveal.right();
Reveal.up();
Reveal.down();
Reveal.prev();
Reveal.next();
Reveal.prevFragment();
Reveal.nextFragment();
Reveal.toggleOverview();
Reveal.togglePause();


Reveal.getPreviousSlide();
Reveal.getCurrentSlide();

Reveal.getIndices();

// State checks
Reveal.isFirstSlide();
Reveal.isLastSlide();
Reveal.isOverview();
Reveal.isPaused();

CustomEvent

//監聽換頁事件
Reveal.addEventListener( 'slidechanged', function(event) {
	// event.previousSlide, event.currentSlide, event.indexh, event.indexv
});