タグ

2013年8月24日のブックマーク (2件)

  • jQuery+Ajaxで画面遷移せずにコメント投稿をカッコよく更新するチュートリアル | URIN HACK

    URIN HACKは2013年8月3日をもって http://urin.github.ioへ移転しました。 ここで公開した主なソフトウェアは全て GitHubレポジトリとして公開してあります。 当サイトのコメントは投稿した時に画面遷移しないで更新されるようにしています。記事はjQueryとブログサービスの仕組みを上手く組み合わせてシームレスにコメント投稿できるようにするためのチュートリアルです。 コメント投稿のサンプル動画 コメントを投稿すると、投稿した人には以下のように見えます。 htmlサンプル 記事で紹介するJavascriptのサンプルは以下のようなhtml構造を前提にしています。仕組みを理解すれば自分のサイト向けにカスタマイズ出来ると思います。 コメントが表示される部分のhtml jQuery+Ajaxで取得した結果を格納するための要素(サンプルでは#new-comme

    otim3
    otim3 2013/08/24
  • jQueryとAjaxで作るスムーズページング (1/3)

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

    jQueryとAjaxで作るスムーズページング (1/3)