0

今はこれだけです。自分用に vcard のデザインを作成しています。私のモチベーションは、できるだけ見栄えを良くすることです。この vcard を使用してウェブデザイン会社に応募し、ウェブデザインの専門教育を受けたいと考えています。

要件を完全に満たすまで、まだ多くの変更が必要ですが、これは、デザインの概要を把握するためにアップロードしたばかりの現在のバージョンのデザインです。

ご覧のとおり、レトロ、ヴィンテージ、リボン、アートワークの要素に焦点を当てています.

これらのぎくしゃくしたコンテンツの更新を取り除きたいと思っています。そのため、ajax と jQuery を介した動的コンテンツ スワップが最適な方法であると考えました。

私はjsや実際にはajaxをあまり使ったことがありません。

私の設計に役立つと思われる解決策について皆さんにお聞きしたいと思います。なにやらスッと考えていました。

変更が必要なコンテンツは

<nav>
(...)
<ul class="ribbon s"><!--Following links got the class="ribbon b/p/l/k"-->
 <li class="ribbon-content"><a href="?content=main">Link</a></li>
 <!--
 ?content=blog
 ?content=portfolio
 ?content=lebenslauf
 ?content=kontakt
 -->
</ul>
(...)
</nav>
<section id="content">
 <div class="con clearfix">
 (...)
 </div><!--An empty div for possibly swapping without touching the vintage paper thing -->
</section>

http://robert-richter.com/boilerplate/

4

1 に答える 1

0

たとえば、jquery を使用します。

まず、html に jquery を追加します。domready-event 内で、リボン メニューにクリック イベントを登録できます。クリックするたびに、html-part の指定された link-url から div-content をロードします。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$.ready(function(){
    $(".ribbon-content a").on("click", function(event){
        event.preventDefault();
        $(".con").load($(event.target).attr("href"), function(){
            // add code after loading - for example change classes of menue
        })
    });
})
</script>

さらに、ブラウザの履歴を使用して、ブラウザの前と次のボタンを有効にすることができます。

于 2013-08-01T14:59:34.037 に答える