on:2012年6月19日sponsorsベーシックなHTMLとCSSで実装されたプロダクトページの表示をリストとグリッドに切り替えるjQueryのチュートリアルを紹介します。jQuery[ad#ad-2]デモ実装デモ表示の切り替えは、右上のアイコンをクリックで。デフォルトはリスト表示で、プロダクトのサムネイル、リンク、購入ボタンがセットになっています。デモページ:リスト表示[ad#ad-2]グリッド表示に切り替えると、サムネイルの一覧性がアップします。デモページ:グリッド表示グリッド表示時のリンクや購入ボタンは、ホバーで表示されます。実装HTMLHTMLはそれほど複雑ではありません。右上の切替用のアイコンのHTMLです。alt="List"></a></span>プロダクトはリスト要素で実装し、サムネイルやテキスト、ボタンを配置します。</section></li>CSSスタイルシートは、リスト表示用とグリッド表示用の2つを用意します。リスト表示用のスタイルから。}続いて、グリッド表示用のスタイルです。}JavaScriptjquery.js」を外部ファイルとして記述し、以下のスクリプトでプロダクトの表示を切り替えます。Posts関連記事が見つかりませんでした。