UIデザイン入門」の第24回です。過去の記事もご覧ください。Googleの検索結果のように、長いリスト項目を複数のページに分割して表示することを「ページング」(Paging)と言います。ページング処理では下部にナビゲーションリンクを配置し、クリックされた番号のページを表示しますが、ページ全体をリロードして切り替えるには時間がかかります。そこで今回は、スムーズにページングさせるためにAjaxを利用して更新が必要な部分のみを外部ファイルから読み込んで書き換え、ユーザーのストレスを軽減する方法を紹介しましょう。今回制作するサンプル(画像クリックでサンプルページを表示します)データのHTMLを用意する今回は、数が多い商品情報のリストを複数のページに分割して表示するサンプルを作成します。はじめにAjaxで読み込むコンテンツデータを用意します。Notation)、テキストなどさまざまデータを扱えますが、今回はもっとも手軽なHTMLを使いましょう。コンテンツデータのHTMLは1ページ目を「data1.html」、2ページ目を「data2.html」として作成します。データのHTMLは1ページ目を「data1.html」、2ページ目を「data2.html」として用意するデータのHTMLは次のようになります。Ajaxだからといって特別な記述はありません。id属性に「content」を設定したdiv要素を配置し、その内側に表示したい内容を記述していきます。ここでは、商品情報1件ごとにclass属性「colmun」を設定したdiv要素で包んでいます。一覧へDESIGN実務で使えるjQueryプラグイン3選Web制作者のためのjQuery入門。最終回は、現場で使える便利なプラグインを3つ紹介。具体的な使い方もサンプル付きで解説する。DESIGN制作現場で役立つjQueryプラグインの使い方Web制作者のためのjQuery入門。今回と次回は、制作効率を上げる「jQueryプラグイン」の概要と使い方について解説する。DESIGNjQueryとAjaxで作るスムーズページングWebデザイナーのためのjQuery入門。jQueryのAjax機能を使ってスムーズなページングを実現する方法をチュートリアルで解説する。DESIGNjQuery+CSSによるカルーセルパネルの作り方Web制作に活用するjQuery入門。アマゾンでおなじみの「カルーセル」(Carrousel)作り方をチュートリアルで解説する。タイマーを使った改造法付き。DESIGNjQueryでバリデーション付きメールフォームを作ろうWeb制作者のためのjQuery入門。今回はバリデーション(検証)機能付きの問い合わせフォームの作り方をチュートリアルで解説する。DESIGNjQueryで自作するフローティングウィンドウドラッグ&ドロップで動かせるフローティングウィンドウをCSS+jQueryで作ってみよう。IE対策のポイントも解説。UIデザイン入門(目次)Webデザイナー、(X)HTML/CSSコーダー、マークアップエンジニアが扱いやすいJavaScriptライブラリー「jQuery」を基礎から解説。プログラムの基本的な書き方から、実務で使えるサンプルまで。jQueryをマスターして仕事の幅をぐっと広げよう。この冬作ろう!jQueryプラグイン講座2008年、最も勢いのあったJavaScript/Ajaxライブラリ「jQuery」。1日1本、簡単なプラグインの作成方法を解説する6日間の集中講座だ。00DESIGNjQueryで作るAmazon流リキッドレイアウトAmazonのようにウィンドウの幅に合わせてコンテンツの表示を変えるようにしたい――難しいリキッド・レイアウトで使えるテクニックにチャンレジしてみよう。00DESIGNjQueryで作る“Amazon風”インターフェイス国内外の商用サイトの優れたUIをお手本にして、なるべくカンタンに、手間も時間もかけずに自分のWebサイトをブラッシュアップしていく方法を紹介する本連載。第4回はAmazon.co.jpの回転式スライドパネル(カルーセル)に挑戦しよう。00DESIGNあのFlashサイトのUIをjQueryで作る海外サイトをお手本に、ページの切り換えをJavaScriptで派手に演出する方法を紹介しよう。スライドする動きもjQeryを使えば手軽に作れる。00DESIGNjQueryアニメ&エフェクト合わせ技で画像を拡大jQueryを使ってWebサイトのブラッシュアップに挑戦。コンテンツの魅力を引き立てるシンプルなWebデザインに、ちょっとした華を添えるアニメーション/エフェクト処理を作ってみよう。00DESIGNjQueryでクールなくるくるウィジェットを作ろうjQueryでかっこよく使いやすいUIを作ろう。今回は、くるくる回るカルーセルをページをめくるナビゲーションに使う方法について。スマホお気に入り一覧マイページ。