タグ

JavaScriptとHTMLとhtmlとjqueryとajaxに関するyifeのブックマーク (3)

  • pjaxできれいなURL+非同期画面遷移! | ヘッドウォータースのブログ TechNote

    こんにちは。荒井です。 Facebookもtwittergoogleも画面遷移のときには、非同期で次のページを読み込むような作りになってますね! これは、ajaxで次のページを読み込むのと同時に「History API」というHTML5の機能を使って、URLを更新することで実現してます。 毎回全部読み直さないから通常の画面遷移よりも早いし、URLが変わるから履歴に残るし、良いことばっかり!!SEO的にも「#!」を使ったやつより良いよっていうのを何かで読みました!!! これからWebサービスを作るなら、導入したいですね!!! これpjaxを使えば簡単に導入できるんです!!!よし!!! PJAX!! pjaxとは、GithubのChris Wanstrathって人が作ってるjqueryプラグインです。 上で説明した、History APIとajaxを使った非同期の画面遷移を簡単に導入すること

    pjaxできれいなURL+非同期画面遷移! | ヘッドウォータースのブログ TechNote
  • jQueryとAjaxで作るスムーズページング (1/3)

    Googleの検索結果のように、長いリスト項目を複数のページに分割して表示することを「ページング」(Paging)と言います。ページング処理では下部にナビゲーションリンクを配置し、クリックされた番号のページを表示しますが、ページ全体をリロードして切り替えるには時間がかかります。そこで今回は、スムーズにページングさせるためにAjaxを利用して更新が必要な部分のみを外部ファイルから読み込んで書き換え、ユーザーのストレスを軽減する方法を紹介しましょう。 データのHTMLを用意する 今回は、数が多い商品情報のリストを複数のページに分割して表示するサンプルを作成します。はじめにAjaxで読み込むコンテンツデータを用意します。Ajaxは、XMLやJSON(JavaScript Object Notation)、テキストなどさまざまデータを扱えますが、今回はもっとも手軽なHTMLを使いましょう。コンテン

    jQueryとAjaxで作るスムーズページング (1/3)
  • 開閉式のメニューを作る - jQuery 日本語リファレンス

    よくある開閉するメニュー(リファレンスTOPでもやってます)の実装は、slideToggle()を使えば簡単に出来ます。 例えばこのサイトの左側に出ているメニューでは [HTMLソース] <div id="navi"> : <h4>API</h4> <ul class="sub"> <li><a href="/jquery/api/core/">Core</a></li> <li><a href="/jquery/api/selectors/">Selectors</a></li> <li><a href="/jquery/api/attributes/">Attributes</a></li> <li><a href="/jquery/api/traversing/">Traversing</a></li> <li><a href="/jquery/api/manipulation/">

  • 1