-1

初めてのシングルページ アプリケーションを作成しようとしています。アイデアは、多くの<div>タグを含む 1 つの HTML ファイルを持つことです。ここで、それぞれ<div>が単一の Web「ページ」を表します。次に、アプリケーション<div>は一度に 1 つだけを表示し、他のものを非表示にします。このようにして、ユーザーがアプリをナビゲートすると、実際にはさまざまな「ページ」div を表示/非表示にし、単一ページ アプリのような錯覚を与えます。

追加の要件は次のとおりです。

  • これは HTML5 アプリです
  • 各ページ div は、独自のブックマーク可能な URL ( 、 など) もマップする必要がありhttp://myapp.example.com/#fizzますhttp://myapp.example.com/#buzz。
  • 各ページ div を焦がすことはブックマーク可能です。アプリは HTML5 履歴 API で動作する必要があります

ルーティングには Crossroads を使用し、履歴には Hasher を使用することにしました。もう 1 つの有力な候補は AngularJS でしたが、AngularJS は私がここでやろうとしていることに対して重量が重すぎて学習曲線が急勾配であると思われたため、最終的には AngularJS を使用しないことにしました。

これまでのところ、私のプロジェクトには次のディレクトリ構造があります。

myapp/
    index.html
    myapp.js
    myapp.css
    signals.min.js          <-- Required by both Crossroads and Hasher
    crossroads.min.js
    hasher.min.js

index.htmlmy 、myapp.cssおよびmyapp.jsファイルを含む JSFiddle は次のとおりです。

http://jsfiddle.net/Sxfms/2/

これは、ユーザーが「ナビゲーション バー」 (「ホーム」、「概要」、「連絡先」) のいずれかのリンクをクリックすると、その特定のページを表す「ページ」(div) に移動できるという考え方です。ご覧のとおり、デフォルトの「ページ」は である必要がありますHOME。これは、表示できる唯一の div であることを意味します。ただし、すべてのページ div が表示され、非表示になっているものはありません。そして、ページ div を正しく表示/非表示にするまで、ルーティング/履歴機能を実際にテストすることはできません。Crossroads/Hasher をどうにか間違って設定しましたか?

4

1 に答える 1

4

あなたの要件に対する解決策があると思います。これは、JavaScript を必要とせず、CSS の機能だけを使用する、非常に簡単で軽量なアプローチです。;-)

アプローチ全体の鍵となるのは、CSS 疑似クラス セレクター:targetです。

最初に の概念を説明しましょう: 疑似セレクターは、URL 内:targetのフラグメント識別子 (またはハッシュ、#contentidなど) とHTML 要素の が同じ場合に一致します。のような URL があり、セレクターhttp://www.example.com/hallo.html#contentを持つ要素が一致する場合。id="content"#content:target { ... }

このfiddelでは実際には URL を確認できませんが、別の例では確認できます。彼女はフィドルのコードです：

HTML:

<a href="#content">content</a>
<div id="content">
    Markup is poetry!
</div>

CSS:

#content {
    border: 1px solid black;
    padding: 20px;
}

#content:target {
    background: lightblue;
}

このアプローチは、ページ ナビゲーションのアイデアを説明するために、次の簡略:target化された例につながります。

HTML:

<a href="#div1">div1</a>
<a href="#div2">div2</a>
<a href="#div3">div3</a>

<div id="div2">
    <div id="div3">
        <div class="div1Inner">content div1</div>
        <div class="div2Inner">content div2</div>
        <div class="div3Inner">content div3</div>
    </div>
</div>

CSS:

.div2Inner, .div3Inner, 
#div2:target .div1Inner, #div3:target .div1Inner {
    display: none;
}

#div2:target .div2Inner, #div3:target .div3Inner {
    display: block;
}

div最初に表示されるべきではないすべての を非表示にします: .div2Inner, .div3Inner { display: none;}. だからただ<div class="div1Inner">content div1</div>見える。divフラグメント識別子が URL の一部である場合に、対応する を表示します: #div2:target .div2Inner, #div3:target .div3Inner {display: block;}。最後に、div1いつdiv2または表示されているかを非表示にする必要div3があります#div2:target .div1Inner, #div3:target .div1Inner { display: none; }。最初と最後の CSS セレクターを組み合わせると、上記の CSS が得られます。

マークアップに関するいくつかの推奨事項:

:targetここに、CSS とセレクター (600 行目から始まる) と、私がクリーンなマークアップと見なすものを使用した、私のアイデアの最終的なアプローチがあります。

Fiddle: http://jsfiddle.net/Cxr73/2/ 最終的にフラグメント識別子と実際の:target動作を確認し、テスト目的で別の URL: DEMO ... このデモは数日で消えますが、fiddle は残ります。

私はそれがあなたのすべてのニーズにほぼ合っていると思います。楽しむ！

于 2014-06-04T02:24:07.763 に答える