ウェブ学のすすめ

Study of Web Design & Programing

jQuery

簡単なjQueryでtableにアコーディオンを実装する方法

jQueryを使ってテーブル内でアコーディオンするための方法をご紹介します。 開くボタンを押すと隠れていたコンテンツが開閉するようになっています。 テーブルをすっきり見せたいけど詳細なども表示させないといけないときのUIとして参考になるかもしれませ…

Wookmark jQueryのAPIを使って無限スクロール

前回ご紹介したグリッドレイアウトができるjqueryプラグインのうちWookmark jQueryのAPIを使って無限スクロールのサンプルを作ってみました。ほぼ公式サイトのデモのままですが表示させるものを変更しています。

可変グリッドレイアウトが簡単にできるjQueryプラグイン3選

可変グリッドレイアウトができるjQueryプラグインをいろいろ試したところ3つほど良さそうなものがあったのでご紹介します。可変グリッドレイアウトは写真のギャラリーサイトやポートフォリオサイトなど多くのオブジェクトを見せる際に効果的なレイアウトです…

フィルタリングもできるjQueryプラグイン「isotope.js」

デモ↓別ウィンドウを開いて見る フィルタリングもできるjQueryプラグイン|isotope.js - js do it

Flashもiframeも動画もlightboxにできる!jQueryプラグイン「prettyPhoto」の使い方

ポートフォリオサイトでも使用したjQueryプラグイン「prettyPhoto」をいろいろ試してみました。このプラグインは写真の他にFlashやiframe、動画もlightboxにすることができます。

Nivo Sliderの使い方|イメージスライドショーのjQueryプラグイン

プレビュー ↓別ウィンドウを開いて見る Nivo Sliderの使い方|イメージスライドショーのjQueryプラグイン※以下の使い方はNivo Slider ver 3.1をカスタマイズする方法です。バージョンによっては構成が異なる可能性がありますのでご注意ください。ステップ1…

jQueryとCSS3でで作る横スライド「RotateImageMenu.js」

プレビュー ↓別ウィンドウを開いて見る jQueryとCSS3で横スライド「Rotating Image Slider with jQuery」ポイント RotateImageMenu.js Rotating Image Slider with jQuery | Codropsコード HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQueryとCSS3で横スライド「Rotating Image Slider with j</title></meta></head></html>…

jQueryで作るマウスホイール対応横スライド「jquery.mousewheel.js」

プレビュー ↓別ウィンドウを開いて見る jquery.mousewheel.jsポイント jquery.mousewheel.js Downloads · brandonaaron/jquery-mousewheel · GitHub jquery 1.7.2とmousewheel.js ver.2.2:動作× jquery 1.6.1とmousewheel.js ver.2.2:動作○ jquery 1.7.2と…

jQueryで作る横スライド「easySlider」

横スライドギャラリーが作れるjQueryプラグイン「easySlider.js」を試してみました。プレビュー ↓別ウィンドウを開いて見る jquery easySliderポイント easySlider.js Easy Slider 17 Numeric Navigation jQuery Slider | CSS Globe ↓基本 $(function(){ $("…

可変グリッドレイアウト〜jQueryを使ったデモサイト「no3design」

プレビュー ↓別ウィンドウを開いて見る no3designポイント jQuery Easing Plugin 加速・減速など動きに強弱のついたエフェクト(イージング処理)をつけられるjQueryプラグイン jQuery Easing Plugin jquery.vgrid.js 可変グリッドレイアウトjQueryプラグイ…

jQueryを使ったデモサイト「Kitchenware Club」

プレビュー ↓別ウィンドウを開いて見る Kitchenware Clubポイント アコーディオンパネル jQuery UIを使用。オプションでアイコンの画像などを変更してみました。 $(function(){ $("#nav").accordion({ header: "h3", collapsible:true, animated: 'bouncesli…

画像をホバーするとキャプションが表示するjQueryプラグイン3選

Mosaic Mosaic - Sliding Boxes and Captions jQuery Plugin デモはこちら jCaption jCaption - Plugin for Simple, Custom Image Captions デモはこちら jCapSlide jCapSlide: A jQuery Image Caption Plugin | Codrops デモはこちら

画像をホバーするとキャプションが表示する「jQuery Image Overlay Plugin」

写真の上にカーソルを乗せると写真の説明を表示してくれる「jQuery Image Overlay Plugin」を試してみたのでその使い方と注意点を挙げていきたいと思います。FerretArmy.com jQuery Image Overlay Plugin 使い方 【1】サンプルソースファイルをダウンロード …

jQueryでポラロイド風写真ギャラリーを作る「polaroid photo viewer with CSS3 and jQuery」

Creating a polaroid photo viewer with CSS3 and jQuery ポイント Google AJAX Libraries API(参考:Google Loader Developer's Guide - Google Loader ― Google Developers) ↓書き方例 <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("search", "1"); g…

可変グリッドレイアウト+ Lazy Load

昨日、divを使ってグリッドレイアウトを作りましたが(グリッドレイアウト(divバージョン) - ウェブ学のすすめ)、今度はarticleやsectionを使って書き直してみました。書き直すと同時に以下の機能を追加してみました。 スクロールするごとに画像を読み込…

グリッドレイアウト(divバージョン)

プレビュー ↓別ウィンドウを開いて見る グリッドレイアウト(divバージョン) コード HTML <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes"> <title>グリッドレイアウト(divバージョン)…</meta></meta></meta></head></html>

jQuery でドロップダウンメニューver2

プレビュー ↓スマートフォンの方はこちらからプレビューできます。 jQuery でドロップダウンメニューver2 - js do it コード HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery でドロップダウンメニューver2</title> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery-1.7.2.min.js"></script> </link></meta></head></html>

jQuery でドロップダウンメニュー

プレビュー ↓スマートフォンの方はこちらからプレビューできます。 jQuery でドロップダウンメニュー - js do it コード HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery でドロップダウンメニュー</title> <link rel="stylesheet" href="css/style.css"> <script src="js/index.js"></script> </link></meta></head></html>

タブ切り替えパネル

プレビュー ↓スマートフォンの方はこちらからプレビューできます。 タブ切り替えパネル - js do it コード HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>タブパネル</title> <link href="css/style.css" rel="stylesheet"> <…</link></meta></head></html>

jQuery Tools tabs

プレビュー ↓スマートフォンの方はこちらからプレビューできます。 jQuery Tools tabs コード HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery Tools standalone demo</title> <link rel="stylesheet" href="css/standalone.css"> <link rel="stylesheet" href="css/tabs.css"> </link></link></meta></head></html>

jQuery UIでtabメニュー

プレビュー ↓スマートフォンの方はこちらからプレビューできます。 jQuery UIでtabメニュー - js do it コード HTML <html lang="ja"> <head> <meta charset="utf-8"> <title>jQuery UI Example Page</title> <link href="css/ui-darkness/jquery-ui-1.8.21.custom.css" rel="stylesheet"> <script src="js/jquery-1.7.2.min.js"></script> </link></meta></head></html>

横スクロールとlightBox2の合わせ技

昨日はjQuery tools scrollableとjQuery lightBox pluginを組み合わせましたが、今度は「lightBox2」を試してみました。Lightbox 2 ポイント lightbox2はLightbox 2からダウンロードし、「lightbox.js」、「lightbox.css」と画像(close.png/loading.gif/next…

jQuery tools scrollableとlightBoxの連携

jQuery tools scrollableとlightBoxがなかなか同時に動作しませんでしたが試行錯誤の上やっと動いてくれました。 プレビュー ↓拡大表示にすると見やすいです(右上のボタンが拡大表示)。 ↓スマートフォンの方はこちらからプレビューできます。 scrollableと…

jQuery Tools scrollableを試す

プレビュー ↓スマートフォンの方はこちらからプレビューできます。 jQuery Tools scrollable コード HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery Tools scrollable</title> <script src="jquery.tools.min.js"></script> <link rel="stylesheet" href="standalone.css"> </link></meta></head></html>

jQuery UIでアコーディオンメニュー

プレビュー ↓スマートフォンの方はこちらからプレビューできます。 jQuery UIでアコーディオンメニュー - js do it コード HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery UIでアコーディオンメニュー</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> </meta></head></html>

jQueryで作るアコーディオンパネルpart2

プレビュー ↓スマートフォンの方はこちらからプレビューできます。 jQueryで作るアコーディオンパネルpart2 - js do it コード HTML <div id="container"> <dl> <dt>【ゆく河の流れ】</dt> <dd> ゆく河の流れは絶えずして、しかももとの水にあらず。淀みに浮ぶうたかたは、かつ消え、かつ結びて、久</dd></dl></div>…

jQueryで作るアコーディオンパネル

プレビュー ↓スマートフォンの方はこちらからプレビューできます。 jQueryで作るアコーディオンパネル - js do it コード HTML <dl> <dt>テキスト1</dt> <dd> <p>テキスト...(中略)...テキスト</p> </dd> <dt>テキスト2</dt> <dd> <p>テキスト...(中略)...テキスト</p> </dd> <dt>テキスト3</dt> <dd> <p>テキスト...(中略)...</p></dd></dl>…

jQueryでノーマルアニメーション

プレビュー ↓スマートフォンの方はこちらからプレビューできます。 jQueryでノーマルアニメーション - js do it コード HTML <button>表示</button> <div></div> JavaScript $(function(){ $('button').click(function(){ if($('div').css('display') == 'none'){ $('div').show('slow');…

jQueryで文字を非表示にする

プレビュー ↓スマートフォンの方はこちらからプレビューできます。 jQueryで文字を非表示にする - js do it コード HTML <div id="sample">このdivを消す</div> JavaScript $(function(){ $('#sample').hide(); }); ポイント hide():表示状態にあるものを非表示にする