タブレット用のHTML5アプリケーションを開発しています。アイデアは次のとおりです。アプリは5つの記事で構成され、各記事には10ほどのスライドがあります。各スライドは画面に完全にフィットし、次または前のスライドに移動するための左/右ボタンがあります。また、スライドにはjQueryアニメーション、タイマー設定などが含まれている場合があります。すべての記事が一覧表示され、ユーザーがそれらに移動できるトップレベルのメニューもあります。
したがって、現在5つのhtmlファイルがあり、各ファイルには10個のDIVがあり、ユーザーの操作に基づいてdivを非表示/表示するロジックがあります。要件は、5つのファイルすべてを1つの単一のHTMLファイルにマージすることです。理由-記事間の移行をスムーズにするため(現在、画面が点滅します-別のHTMLファイルがロードされているため)。
私は、これらすべての50 divで現在行っているのと同じアプローチで進むことができることを理解していますが、コードが多くなり、理解するのが難しくなります。記事/スライド間の遷移のために、ある種のステートマシンを作成することを考えています。
function changeSlide(bool forward)
{
disableAnimationForAllSlides();
var articleNumber = getArticle();
var currentSlideNumber = getCurrentSlide();
if (currentSlideNumber == 1 && forward == false)
{
goToArticleList();
return;
} else if (currentSlideNumber == 10 && forward == true)
{
goToArticleList();
return;
}
else
{
hideAllSlides();
displaySlide(articleNumber, currentSlideNumber + 1);
enableAnimationForSlide(articleNumber, currentSlideNumber + 1);
}
}
function changeArticle(newArticleNumber)
{
disableAnimationForAllSlides();
hideAllSlides();
displaySlide(newArticleNumber, 1);
enableAnimationForSlide(newArticleNumber, 1);
}
そして、それはすべて比較的簡単だと思いますが、車輪の再発明はしたくありません...そしてもちろん、私の場合はこの例よりもかなり複雑です。だから私の質問は:
- このタスクの標準的なアプローチは何ですか?1つのHTMLファイルに複数のスライドがあり、それらの間にトランジションがありますか?たとえば、next / prev要素をどのように定義する必要がありますか?
- これに使用できるライブラリ/フレームワークはありますか?
- 私が見ることができるインターネットの例はありますか?
HTML5 / CSS3/jQueryプロジェクトです。
ありがとうございました。