Googleの検索結果のように、長いリスト項目を複数のページに分割して表示することを「ページング」(Paging)と言います。ページング処理では下部にナビゲーションリンクを配置し、クリックされた番号のページを表示しますが、ページ全体をリロードして切り替えるには時間がかかります。そこで今回は、スムーズにページングさせるためにAjaxを利用して更新が必要な部分のみを外部ファイルから読み込んで書き換え、ユーザーのストレスを軽減する方法を紹介しましょう。 データのHTMLを用意する 今回は、数が多い商品情報のリストを複数のページに分割して表示するサンプルを作成します。はじめにAjaxで読み込むコンテンツデータを用意します。Ajaxは、XMLやJSON(JavaScript Object Notation)、テキストなどさまざまデータを扱えますが、今回はもっとも手軽なHTMLを使いましょう。コンテン
This site is kept for historical purposes and represents original version of the Fancybox. Check out the latest - Fancybox v5 What is it? FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page. It was built using the jQuery library. Licensed under both MIT and GPL licenses Features Can display images, HTML elements, SWF movi
下準備〜コーディング Adobe Labsから、Spryフレームワークをダウンロード (要Adobe ID) (注)本記事でのSpryのバージョンは1.6.1です。 Adobe Labs - Spry framework for Ajax http://labs.adobe.com/technologies/spry/ ダウンロードしたフォルダの中の、widgets >> accordion を今回は使います。 今回は読み込み方は割愛(付属のSpryAccordion.htmlを参照)。次はカスタマイズ方法行くよ〜。 SpryAccordionのデフォルト動作を確認 こちらから確認できます JSファイルを編集 今回は、以下の2点に絞って見ていきましょう(Javascriptはあまり詳しくないので、自分はこれが限界っす…)。 アコーディオンの動くスピードを調整する クリックでアコーディオン動
Galleria Documentation: http://devkick.com/lab/galleria/ Demo: http://devkick.com/lab/galleria/demo_01.htm#img/grass-blades.jpg License: GPL s3Slider jQuery plugin Documentation: http://www.serie3.info/s3slider/ Demo: http://www.serie3.info/s3slider/demonstration.html License: Creative Commons Attribution 2.5 jQuery Coda Slider Documentation: http://jqueryfordesigners.com/coda-slider-effect/ Demo:
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く